HTML5 桌面通知：Notification API

通知可以说是应用中比较常见且重要的功能，私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈，这个时候，就需要页面给予即使的通知。Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。 通知效果如图：

用户权限

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

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

请求权限

当用户还没选择的时候，我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。 以前基于回调的语法已经弃用（当然在现在的浏览器中还是能用的），最新的规范已将此方法更新为基于 promise 的语法：

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

推送通知

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

var notification = new Notification(title, options)

参数如下：

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

一旦通知被创建出来，它会立即被显示出来。为了跟踪通知当前的状态，在 Notification 实例层面上会有4个事件被触发：

show：

当通知被显示给用户时触发。

click：

当用户点击通知时触发。

close：

当通知被关闭时触发。

error：

当通知发生错误的时候触发。这通常是因为通知由于某些原因而无法显示。

这些事件可以通过事件处理跟踪 onshow、onclick、onclose 和 onerror。因为 Notification 同样继承自 EventTarget，因此可以对它调用 addEventListener() 方法。

关闭通知

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

var n = new Notification(‘状态更新提醒’,{
body: ‘你的朋友圈有3条新状态，快去查看吧’
})

setTimeout(function() {
n.close();
}, 3000);

事件

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

var n = new Notification(‘状态更新提醒’,{
body: ‘你的朋友圈有3条新状态，快去查看吧’,
data: {
url: ‘https://zhchi.me'
}
})
n.onclick = function(){
window.open(n.data.url, ‘_blank’); // 打开网址
n.close(); // 并且关闭通知
}

demo：点击查看demo