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,
          })

通知消息的效果图如下：

image

通知事件

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

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

---

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