Web Notification API

消息提示在web应用的开发中非常常见，而Web Notification API是一个 系统级 的消息推送，相较于传统的页面级消息推送，更适合做重要信息提醒的功能。系统级，是指它不要求当前页面处于focus（当前显示页签）状态，也不要求浏览器窗口处于可见（非最小化）状态，同时，打开它的父窗口可以被关闭，在父窗口关闭时，如果对它设置了点击事件并且该点击事件会聚焦到它的父窗口，则会唤醒它的父窗口。当然，兼容性这个话题不可忽略，而本文仅针对Chrome这一款浏览器，对其它浏览器未做尝试，当然，IE一如既往的不可用。

---

Part 1 设置及授权

Chrome 下，需要对其进行授权，如图所示：

在需要授权的项目地址栏最左侧，会有图中圈中的图标，点击它，会出现如下窗口：

点击网站设置，进入设置页面，如下图所示：

 

将通知的状态改为允许即可。

当然，API中也提供了直接通过问询判断的代码方式，如下：

// 用于判断是否已经将Notification设置为允许状态
// 状态值：granted 允许 | denied 拒绝
Notification.permission === 'granted'

// 用于请求Notification的权限
Notification.requestPermission((permission) => {
    if (perm === 'granted') {
        
    }
})

Part 2 创建Notifaction

创建Notifaction的方式，如下：

// 创建一个Notification实例
const notification = new Notification(title, options);  

title 是消息提醒的标题，options 里面可以设置多个属性，对你的消息提醒进行一定的内容扩充，下面只介绍一些我用到的属性（部分属性在测试时未生效或场景没有用到，所以没有研究）。

const notification = new Notification('Notification', { 
    // 文字方向，取值范围为 auto | ltr | rtl 
    dir: 'auto',  
    // 消息标识，默认状态下，相同标识的消息，只会更新内容，不会创建新的消息实例
    tag: 'myNotification',  
    // 消息内容中的图片（图标）路径
    icon: 'https://profile.csdnimg.cn/E/A/9/1_funnyt0',  
    // 消息体
    body: 'This is a notification demo.',
    // 数据对象
    data：{ name: 'My Notification' },
    // 是否播放声音，默认false
    silent: false,
    // 音频地址
    sound: '',
}); 

实际运行效果如下：

Part 3 事件

Notification实例提供了4种状态监听及一个关闭方法，如下：

const notifaction = new Notification('Notification');

// 显示时触发
notifaction.onshow = () => {};

// 关闭时触发
notifaction.onclose = () => {};

// 点击时触发
notifaction.onclick = () => {};

// 错误时触发
notifaction.onerror = () => {};

// 关闭
notifaction.close();