前言
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('用戶還沒選擇，去向用戶申請權限吧');
}
請求權限
當用戶還沒選擇的時候，我們需要向用戶去請求權限。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。
還有一些其他的參數，因為用不了或者沒什麼用這裡就沒必要說了。
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);
事件
Notification 接口的 onclick屬性指定一個事件偵聽器來接收 click 事件。當點擊通知窗口時會觸發相應事件，比如打開一個網址，引導用戶回到自己的網站去。
var n = new Notification('狀態更新提醒',{
body: '你的朋友圈有3條新狀態，快去查看吧',
data: {
url: 'http://blog.gdfengshuo.com'
}
})
n.onclick = function(){
window.open(n.data.url, '_blank'); // 打開網址
n.close(); // 並且關閉通知
}
應用場景
前面說那麼多，其實就是為了用。那麼到底哪些地方可以用到呢？
現在網站的消息提醒，大多數都是在消息中心顯示個消息數量，然後發郵件告訴用戶，這流程完全沒有錯。不過像我這種用戶，覺得別人點個贊，收藏一下都要發個郵件提醒我，老是要去刪郵件（強迫症），我是覺得挺煩的甚至關閉了郵件提醒。
當然這裡並不是說要用 Notification，畢竟它和郵件的功能完全不一樣。
我覺得比較適合的是新聞網站。用戶瀏覽新聞時，可以推送給用戶實時新聞。以騰訊體育為例，它就使用了 Notification API。在頁面中引入了一個 notification2017_v0118.js，有興趣可以看看別人是怎麼成熟的使用的。
一進入頁面，就獲取授權，同時自己頁面有個浮動框提示你允許授權。如果允許之後，就開始給你推送通知了。不過它在關閉標籤卡的時候，通知也會被關閉，那是因為監聽了頁面 beforeunload 事件。
function addOnBeforeUnload(e) {
FERD_NavNotice.notification.close();
}
if(window.attachEvent){
window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
window.addEventListener('beforeunload', addOnBeforeUnload, false);
}
兼容
說到兼容，自然是倒下一大片，而且各瀏覽器的表現也會有點差異。移動端的幾乎全倒，PC端的還好大多都能支持，除了IE。所以使用前，需要先檢查一下瀏覽器是否支持 Notification。
閱讀更多 前端小學生 的文章
