HTML5 桌面通知：Notification

Notification介绍

Notification API 是HTML5新增的桌面通知API，用来显示桌面通知消息。

浏览器权限

通过window.Notification来判断浏览器是否兼容Notification API

if (window.Notification) { // 判断浏览器是否兼容Notification }

用户权限

要想向用户显示通知消息，就要通过浏览器获取用户权限，主要通过Notification.permission来判断。
Notification.permission包括的值:

• default ：默认。
• granted ：显示通知的权限。
• denied ：用户拒绝。

 let permission = Notification.permission;
      // 显示通知的权限
     if (permission == "granted") {

     } else if (permission == "denied") {
         // 不同意，发不了咯
     } else {
         // 其他状态，可以重新发送授权提示
        Notification.requestPermission();
     }

推送通知

获取用户通知后，就可以进行推送消息啦！！

var notification = new Notification(title, options)

参数如下:
title：显示的通知标题
options:通知的设置选项（可选）

• dir : 文字的方向,它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）。
• body:通知的内容。
• icon：要在通知中显示的图标的URL。
• requireInteraction：通知保持有效不自动关闭，默认为false。(测试了下这个参数好像没有效果)

还有一些其他的参数，因为没有用到这里就不一一列举啦。

var notification = new Notification(item.name, {
      dir: 'rtl',
      body: "这个是内容哦！",
      icon: icon,
      requireInteraction:false,
})

通知消息的效果图如下：

通知事件

Notification接口的 onclick属性指定一个事件侦听器来接收click事件。

 notification.onclick = function() {
      //  window.focus 可以定位到有消息的窗口
      window.focus();
      // 关闭通知
      notification.close();
  };

最后关于兼容问题:目前测试了PC端的，发现window 7 的IE浏览器还不支持，其他各浏览器通知消息如果为默认的话也会有不一样的差异。