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，效果類似手機默認系統消息提示