前言
Notification API 是 HTML5 新增的桌面通知 API，用于向用戶(hù)顯示通知信息。該通知是脫離瀏覽器的，即使用戶(hù)沒(méi)有停留在當(dāng)前標(biāo)簽頁(yè)，甚至最小化了瀏覽器，該通知信息也一樣會(huì)置頂顯示出來(lái)。
用戶(hù)權(quán)限
想要向用戶(hù)顯示通知消息，需要獲取用戶(hù)權(quán)限，而相同的域名只需要獲取一次權(quán)限。只有用戶(hù)允許的權(quán)限下，Notification 才能起到作用，避免某些網(wǎng)站的廣告濫用 Notification 或其它給用戶(hù)造成影響。那么如何知道用戶(hù)到底是允不允許的？
Notification.permission 該屬性用于表明當(dāng)前通知顯示的授權(quán)狀態(tài)，可能的值包括：
default ：不知道用戶(hù)的選擇，默認(rèn)。
granted ：用戶(hù)允許。
denied ：用戶(hù)拒絕。
if(Notification.permission === 'granted'){
console.log('用戶(hù)允許通知');
}else if(Notification.permission === 'denied'){
console.log('用戶(hù)拒絕通知');
}else{
console.log('用戶(hù)還沒(méi)選擇，去向用戶(hù)申請(qǐng)權(quán)限吧');
}
推送通知
獲取用戶(hù)授權(quán)之后，就可以推送通知了。
var notification = new Notification(title, options)
參數(shù)如下：
title：通知的標(biāo)題
options：通知的設(shè)置選項(xiàng)（可選）。
body：通知的內(nèi)容。
tag：代表通知的一個(gè)識(shí)別標(biāo)簽，相同tag時(shí)只會(huì)打開(kāi)同一個(gè)通知窗口。
icon：要在通知中顯示的圖標(biāo)的URL。
image：要在通知中顯示的圖像的URL。
data：想要和通知關(guān)聯(lián)的任務(wù)類(lèi)型的數(shù)據(jù)。
requireInteraction：通知保持有效不自動(dòng)關(guān)閉，默認(rèn)為false。
還有一些其他的參數(shù)，因?yàn)橛貌涣嘶蛘邲](méi)什么用這里就沒(méi)必要說(shuō)了。
var n = new Notification('狀態(tài)更新提醒',{
body: '你的朋友圈有3條新?tīng)顟B(tài)，快去查看吧',
tag: 'linxin',
icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
requireInteraction: true
})
關(guān)閉通知
從上面的參數(shù)可以看出，并沒(méi)有一個(gè)參數(shù)用來(lái)配置顯示時(shí)長(zhǎng)的。我想要它 3s 后自動(dòng)關(guān)閉的話，這時(shí)可以調(diào)用 close() 方法來(lái)關(guān)閉通知。
var n = new Notification('狀態(tài)更新提醒',{
body: '你的朋友圈有3條新?tīng)顟B(tài)，快去查看吧'
})
setTimeout(function() {
n.close();
}, 3000);
