H5桌面通知： Notification API 的应用

这是利用html5桌面通知Notification API实现的，先看看代码，再分析Notification。

// 桌面通知
    (() => {
      // 请求权限
      Notification.requestPermission().then(function(permission) {
          if(permission === 'granted'){
              console.log('用户允许通知了');
          }else if(permission === 'denied'){
              console.log('用户拒绝通知了');
          }
      });

      // 推送通知
      let n = new Notification('欢迎浏览',{
          body: '点击获取更多福利',
          tag: 'geekjc',
          icon: 'https://geekjc-img.geekjc.com/chudian01.jpg',
          requireInteraction: true,
          data: {
            url: 'https://www.geekjc.com/apdl'
          }
      })

      // 定时关闭通知
      setTimeout(() => {
        n.close()
      },10000)

      // 点击
      n.onclick = () => {
          window.open(n.data.url, '_blank');      // 打开网址
          n.close();                              // 并且关闭通知
      }
    })()

Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。

1. 用户权限

想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的？

Notification.permission 该属性用于表明当前通知显示的授权状态，可能的值包括：

• default ：不知道用户的选择，默认。
• granted ：用户允许。
• denied ：用户拒绝。

if(Notification.permission === 'granted'){
    console.log('用户允许通知');
}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');
}else{
    console.log('用户还没选择，去向用户申请权限吧');
}

2. 请求权限

当用户还没选择的时候，我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。

以前基于回调的语法已经弃用（当然在现在的浏览器中还是能用的），最新的规范已将此方法更新为基于 promise 的语法：

 

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }
});

3. 推送通知

获取用户授权之后，就可以推送通知了。

var notification = new Notification(title, options)

参数如下：

• title：通知的标题
• options：通知的设置选项（可选）。
  • body：通知的内容。
  • tag：代表通知的一个识别标签，相同tag时只会打开同一个通知窗口。
  • icon：要在通知中显示的图标的URL。
  • image：要在通知中显示的图像的URL。
  • data：想要和通知关联的任务类型的数据。
  • requireInteraction：通知保持有效不自动关闭，默认为false。
    还有一些其他的参数，因为用不了或者没什么用这里就没必要说了。

 let n = new Notification('欢迎浏览',{
          body: '点击获取更多福利',
          tag: 'geekjc',
          icon: 'https://geekjc-img.geekjc.com/chudian01.jpg',
          requireInteraction: true,
          data: {
            url: 'https://www.geekjc.com/apdl'
          }
      })

4. 关闭通知

从上面的参数可以看出，并没有一个参数用来配置显示时长的。我想要它 10s 后自动关闭的话，这时可以调用 close() 方法来关闭通知。

// 定时关闭通知
      setTimeout(() => {
        n.close()
      },10000)

5. 事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发相应事件，比如打开一个网址，引导用户回到自己的网站去。

// 点击
      n.onclick = () => {
          window.open(n.data.url, '_blank');      // 打开网址
          n.close();                              // 并且关闭通知
      }

6. 应用场景

前面说那么多，其实就是为了用。那么到底哪些地方可以用到呢？

现在网站的消息提醒，大多数都是在消息中心显示个消息数量，然后发邮件告诉用户，这流程完全没有错。不过像我这种用户，觉得别人点个赞，收藏一下都要发个邮件提醒我，老是要去删邮件（强迫症），我是觉得挺烦的甚至关闭了邮件提醒。

当然这里并不是说要用 Notificationÿ