前言
Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。
用户权限
想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的？
Notification.permission 该属性用于表明当前通知显示的授权状态，可能的值包括：
default ：不知道用户的选择，默认。
granted ：用户允许。
denied ：用户拒绝。
if(Notification.permission === 'granted'){
console.log('用户允许通知');
}else if(Notification.permission === 'denied'){
console.log('用户拒绝通知');
}else{
console.log('用户还没选择，去向用户申请权限吧');
}
推送通知
获取用户授权之后，就可以推送通知了。
var notification = new Notification(title, options)
参数如下：
title：通知的标题
options：通知的设置选项（可选）。
body：通知的内容。
tag：代表通知的一个识别标签，相同tag时只会打开同一个通知窗口。
icon：要在通知中显示的图标的URL。
image：要在通知中显示的图像的URL。
data：想要和通知关联的任务类型的数据。
requireInteraction：通知保持有效不自动关闭，默认为false。
还有一些其他的参数，因为用不了或者没什么用这里就没必要说了。
var n = new Notification('状态更新提醒',{
body: '你的朋友圈有3条新状态，快去查看吧',
tag: 'linxin',
icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
requireInteraction: true
})
关闭通知
从上面的参数可以看出，并没有一个参数用来配置显示时长的。我想要它 3s 后自动关闭的话，这时可以调用 close() 方法来关闭通知。
var n = new Notification('状态更新提醒',{
body: '你的朋友圈有3条新状态，快去查看吧'
})
setTimeout(function() {
n.close();
}, 3000);
网友评论