web Notification接口的简单的封装--nf.js

learn_shifeng 发布于2019-08-20 12:03 / 891人阅读

摘要：花了两个小时重温了一下的接口，虽然简单，但我觉得还应该有更方便的使用方式，所以就对这个的接口进行了简单的封装。加上注释也就行，想看源码的同学请移步。以下就是对这个小库的功能的一个简单的介绍。默认是我的名称字符串，弹窗的提示信息。

花了两个小时重温了一下html5的Web Notification接口，虽然简单，但我觉得还应该有更方便的使用方式，所以就对这个API的接口进行了简单的封装。源码放在了我的github上。加上注释也就90行，想看源码的同学请移步seeyou404--nf.js。以下就是对这个小库的功能的一个简单的介绍。

基本使用

  import NF from "./nf";
  
  //创建一个实例对象
  const nf = new NF()
  //或者传入一个配置选项信息：options应该是一个对象
  const nf = new NF(options);

利用上面的方法就能创建了一个Notification通知窗口

options选项

options选项是Notification的基本配置选项，除了我们常规使用的一些选项外，我们还可以在这里面指定事件处理程序函数

  {
    "title": "字符串， 弹窗的标题。默认是我的github名称："seeyou404"",
    
    "body": "字符串，弹窗的提示信息。默认是我的github地址："https://github.com/seeyou404"",
    
    "icon": "字符串，弹窗显示的图片的路径。默认是我的github头像："https://avatars2.githubusercontent.com/u/12776545?v=3&s=466"",
    
    "tag": "字符串，当前弹窗的标识符。避免显示多个弹窗",
    
    "silent": "布尔值，弹窗出现的时候是否需要声音，不能和vibrate共存",
    
    "sound": "指定弹窗出现的时候的音频地址",
    
    "vibrate": "设置振动模式",
    
    "renotify": "布尔值，新弹窗出现的时候是否需要覆盖之前的，必须和tag参数共存",
    
    "click": "function 弹窗点击时候的事件监听器",
    
    "close": "function 弹窗关闭时候的事件监听器",
    
    "show": "function 弹窗出现时候的事件监听器",
    
    "error": "function 弹窗出现错误时候的事件监听器"
  }

methods

NF的实例主要有五个基本的方法:

click([callback])

添加点击事件，callback的默认值是options.click方法

const nf = new NF();
nf.click();
或者
nf.click(() => {
  alert("clicked");
})

show([callback])

添加show事件，callback的默认值是options.show方法

const nf = new NF();
nf.show();
或者
nf.show(() => {
  alert("showed");
})

close([callback])

添加点击事件，callback的默认值是options.close方法

const nf = new NF();
nf.close();
或者
nf.close(() => {
  alert("closed");
})

error([callback])

添加点击事件，callback的默认值是options.error方法

const nf = new NF();
nf.error();
或者
nf.error(() => {
  alert("errored");
})

shut()

关闭弹窗

const nf = new NF();
nf.shut();

综述

上面的四个事件处理程序支持链式调用，同时，我们也应该知道，为添加事件处理程序有两种基本形式：在options中声明事件处理函数和显示调用事件处理方法。所以我们可以像下面这样使用。

const nf = new NF({
  title: "你的标题",
  body: "你的内容",
  icon: "你的icon图片",
  click(){
    alert("clicked");
  },
  show(){
    alert("showd")
  },
  close(){
    alert("closeed");
  },
  error(){
    alert("errored");
  }
})
//声明的时候就指定了事件处理程序

//也可以这样使用
nf.show().click(function(){alert("你怎么又弹出来了")}).close();

GPU云服务器云服务器简单的web开发问题简单的web服务器最简单的web服务器 java实现简单的web服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80772.html

【PWA学习与实践】(5)在Web中进行服务端消息推送

摘要：本文是学习与实践系列的第五篇文章。实际上，消息推送与提醒是两个功能和。在这一篇里，我们先来学习如何使用进行消息推送。而当服务端要推送消息时，会使用私钥对发送的数据进行数字签名，并根据数字签名生成一个叫请求头。《PWA学习与实践》系列文章已整理至gitbook - PWA学习手册，文字内容已同步至learning-pwa-ebook。转载请注明作者与出处。本文是《PWA学习与实践》系...

suemi 2019-08-23 12:48 评论0 收藏0
Ant design的Notification源码分析

摘要：通过将实例传入回调函数。添加再回过头来看回调函数的内容。其中的作用是一次调用传入的各函数，其中方法是移除中相应的节点，是传入的关闭标签后的回调函数。 notification简介 showImg(https://segmentfault.com/img/remote/1460000014117558?w=483&h=135); notification就是通知提醒框，在系统四个角显示通...

SimpleTriangle 2019-08-22 15:56 评论0 收藏0
基于Web Notification的前端桌面弹窗

摘要：只有用户允许的权限下，才能起到作用，避免某些网站的广告滥用或其它给用户造成影响。对象提供了方法请求用户当前来源的权限以显示通知。代表通知的一个识别标签，相同时只会打开同一个通知窗口。要在通知中显示的图像的。通知保持有效不自动关闭，默认为。最近在和阿里云客服进行备案沟通的过程中，时常看到阿里云能够在桌面上实现消息推送，感觉很是神奇，因此就进行了下搜索学习；发现主要用到了Web Not...

LucasTwilight 2019-08-02 16:18 评论0 收藏0
基于Web Notification的前端桌面弹窗

摘要：只有用户允许的权限下，才能起到作用，避免某些网站的广告滥用或其它给用户造成影响。对象提供了方法请求用户当前来源的权限以显示通知。代表通知的一个识别标签，相同时只会打开同一个通知窗口。要在通知中显示的图像的。通知保持有效不自动关闭，默认为。最近在和阿里云客服进行备案沟通的过程中，时常看到阿里云能够在桌面上实现消息推送，感觉很是神奇，因此就进行了下搜索学习；发现主要用到了Web Not...

helloworldcoding 2019-08-26 13:46 评论0 收藏0