花了两个小时重温了一下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();