前言
Notification API 是 HTML5 新增的桌面通知 API，用于向用戶顯示通知信息。該通知是脫離瀏覽器的，即使用戶沒有停留在當(dāng)前標(biāo)簽頁，甚至最小化了瀏覽器愁溜，該通知信息也一樣會(huì)置頂顯示出來。
用戶權(quán)限
想要向用戶顯示通知消息外厂，需要獲取用戶權(quán)限冕象，而相同的域名只需要獲取一次權(quán)限。只有用戶允許的權(quán)限下汁蝶，Notification 才能起到作用渐扮，避免某些網(wǎng)站的廣告濫用 Notification 或其它給用戶造成影響。那么如何知道用戶到底是允不允許的掖棉？
Notification.permission 該屬性用于表明當(dāng)前通知顯示的授權(quán)狀態(tài)墓律，可能的值包括：
default ：不知道用戶的選擇，默認(rèn)幔亥。
granted ：用戶允許耻讽。
denied ：用戶拒絕。
if(Notification.permission === 'granted') {
console.log('用戶允許通知');
}else if(Notification.permission === 'denied') {
console.log('用戶拒絕通知');
} else {
console.log('用戶還沒選擇帕棉，去向用戶申請權(quán)限吧');
}
請求權(quán)限
當(dāng)用戶還沒選擇的時(shí)候针肥，我們需要向用戶去請求權(quán)限饼记。Notification 對象提供了 requestPermission() 方法請求用戶當(dāng)前來源的權(quán)限以顯示通知。
以前基于回調(diào)的語法已經(jīng)棄用（當(dāng)然在現(xiàn)在的瀏覽器中還是能用的）慰枕，最新的規(guī)范已將此方法更新為基于 promise 的語法：
Notification.requestPermission().then(function(permission) {
if(permission === 'granted') {
console.log('用戶允許通知');
} else if(permission === 'denied') {
console.log('用戶拒絕通知');
}
});
推送通知
獲取用戶授權(quán)之后具则，就可以推送通知了。
var notification = new Notification(title, options)
參數(shù)如下：
title：通知的標(biāo)題
options：通知的設(shè)置選項(xiàng)（可選）具帮。
body：通知的內(nèi)容博肋。
tag：代表通知的一個(gè)識別標(biāo)簽，相同tag時(shí)只會(huì)打開同一個(gè)通知窗口匕坯。
icon：要在通知中顯示的圖標(biāo)的URL束昵。
image：要在通知中顯示的圖像的URL拔稳。
data：想要和通知關(guān)聯(lián)的任務(wù)類型的數(shù)據(jù)葛峻。
requireInteraction：通知保持有效不自動(dòng)關(guān)閉，默認(rèn)為false巴比。
還有一些其他的參數(shù)术奖，因?yàn)橛貌涣嘶蛘邲]什么用這里就沒必要說了。
var n = new Notification(
'狀態(tài)更新提醒', {
body: '你的朋友圈有3條新狀態(tài)轻绞，快去查看吧',
tag: '孤酒獨(dú)酌',
icon: 'https://ojlf2aayk.qnssl.com/logo.jpeg',
requireInteraction: true
})
通知消息的效果圖如下：
關(guān)閉通知
從上面的參數(shù)可以看出采记，并沒有一個(gè)參數(shù)用來配置顯示時(shí)長的。我想要它 3s 后自動(dòng)關(guān)閉的話政勃，這時(shí)可以調(diào)用 close() 方法來關(guān)閉通知唧龄。
var n = new Notification('狀態(tài)更新提醒', {
body: '你的朋友圈有3條新狀態(tài)，快去查看吧'
})
setTimeout(function() {
n.close();
}, 3000);
應(yīng)用場景
前面說那么多奸远，其實(shí)就是為了用既棺。那么到底哪些地方可以用到呢？
現(xiàn)在網(wǎng)站的消息提醒懒叛，大多數(shù)都是在消息中心顯示個(gè)消息數(shù)量丸冕，然后發(fā)郵件告訴用戶，這流程完全沒有錯(cuò)薛窥。不過像我這種用戶胖烛，覺得別人點(diǎn)個(gè)贊，收藏一下都要發(fā)個(gè)郵件提醒我诅迷，老是要去刪郵件（強(qiáng)迫癥）佩番，我是覺得挺煩的甚至關(guān)閉了郵件提醒。
當(dāng)然這里并不是說要用 Notification罢杉，畢竟它和郵件的功能完全不一樣趟畏。
我覺得比較適合的是新聞網(wǎng)站。用戶瀏覽新聞時(shí)屑那，可以推送給用戶實(shí)時(shí)新聞拱镐。以騰訊體育為例艘款，它就使用了 Notification API。在頁面中引入了一個(gè) notification2017_v0118.js沃琅，有興趣可以看看別人是怎么成熟的使用的哗咆。
一進(jìn)入頁面，就獲取授權(quán)益眉，同時(shí)自己頁面有個(gè)浮動(dòng)框提示你允許授權(quán)晌柬。如果允許之后，就開始給你推送通知了郭脂。不過它在關(guān)閉標(biāo)簽卡的時(shí)候年碘，通知也會(huì)被關(guān)閉，那是因?yàn)楸O(jiān)聽了頁面 beforeunload 事件展鸡。
functionaddOnBeforeUnload(e) {
FERD_NavNotice.notification.close();
}
if(window.attachEvent) {
window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
window.addEventListener('beforeunload', addOnBeforeUnload, false);
}
兼容
說到兼容屿衅，自然是倒下一大片，而且各瀏覽器的表現(xiàn)也會(huì)有點(diǎn)差異莹弊。移動(dòng)端的幾乎全倒涤久，PC端的還好大多都能支持，除了IE忍弛。所以使用前响迂，需要先檢查一下瀏覽器是否支持 Notification。
青團(tuán)社招聘：
招聘崗位：資深前端開發(fā)工程師
簡歷投遞到：hr@qtshe.com || haochen@qtshe.com
職位描述：
1细疚、建設(shè)工具蔗彤、提煉組件、抽象框架疯兼，促進(jìn)前端工程化然遏、服務(wù)化，持續(xù)提升研發(fā)效率镇防，保障線上產(chǎn)品質(zhì)量
2啦鸣、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺(tái)来氧，指導(dǎo)落實(shí)解決方案
3诫给、持續(xù)優(yōu)化前端頁面性能，維護(hù)前端代碼規(guī)范啦扬，鉆研各種前沿技術(shù)和創(chuàng)新交互中狂，增強(qiáng)用戶體驗(yàn)、開拓前端能力邊界
