Notification 对象用来为用户设置和显示桌面通知，Web Notifications API 可以将通知发送至页面之外的系统层级上，因此，即便应用处于空闲状态或是在后台，web 应用仍然可以通过这个 API 向用户发送信息。比如网页版微信，每当用户收到一条新的消息，就会有一条通知显示给用户
用法
var notification = new Notification(title, [options])
参数
| Param | Type | Description |
|---|---|---|
| title | string |
显示的通知标题 |
| [options] | object |
显示通知的配置项，可选 |
| [options.dir] | string |
文字方向， 取值为 auto、ltr、rtl 之一 |
| [options.lang] | string |
通知的语言，这个字符串必须在 BCP 47 language tag 文档中是有效的。 |
| [options.body] | string |
通知的内容 |
| [options.tag] | string |
通知的 id，通过此 id 可以对通知进行刷新、替换或移除 |
| [options.icon] | string |
通知的图标图片URL，将被用于显示通知的图标。 |
请求权限
要显示通知，需要得到用户的授权，Notification 提供了 requestPermission 方法向用户申请显示通知的权限，此方法只能被用户行为调用（比如在onclick 事件中）
Notification.requestPermission(function(permission) {
if (permission === "granted") {
console.log(11)
popNotice()
}
});
权限状态
只读属性 Notification.permission 可以用来获取用户授权状态
-
denied ：拒绝通知显示
-
granted ：允许通知显示
-
default ：用户尚未被询问是否授权，在浏览器中表现与 denied 相同
事件处理
Notification 实例上的事件监听
-
onshow/ondisplay : 在通知显示的时触发
-
onclick : 当用户点击通知时触发
-
onerror : 当通知出现错误时触发
-
onclose ：当用户关闭通知时触发
Example
<button class="button">Hello</button>
<script type="text/javascript">
var button = document.querySelector('.button')
button.addEventListener('click', function() {
if (!("Notification" in window)) {
alert("不支持 notification");
} else if (Notification.permission === "granted") { // 允许通知
notice()
}else if (Notification.permission !== 'denied') { // 用户没有选择是否显示通知，向用户请求许可
Notification.requestPermission(function(permission) {
if (permission === "granted") {
notice()
}
});
}
}, false)
function notice() {
var notification = new Notification("你好，JavaScript",{
body:'微信订阅号',
icon:"https://mp.weixin.qq.com/misc/getheadimg?token=990524500&fakeid=3006291623&r=674680"
});
notification.onclick = function(){
notification.close()
}
}
</script>
浏览器支持
-
Firefox 22+
-
Cheome 22+
-
Safari 6+
-
Opera 25+
-
Edge 14+
pc端基本支持（忘掉IE吧），移动端，在ios safari 上暂不支持，androd 4.4+ browser需要添加 webkit 前缀，上月24号发布的Firefox 51 for android 已经支持消息通知，安卓用户可以下载最新的Firefox浏览器在手机端体验（点击阅读原文查看demo），你也可以在 pc 浏览器查看 demo，效果类似手机默认系统消息提示