原文
大綱
1励堡、推送通知的概念
2翩隧、消息推送的知識點
3、實例
1姻蚓、推送通知的概念
大部分現(xiàn)代 Web 應(yīng)用都需要定期更新和與用戶溝通的能力宋梧。比如社交媒體、郵件和應(yīng)用通知都很不錯狰挡，但并不總是能夠吸引用戶的注意捂龄，尤其是當(dāng)他們離開網(wǎng)站的時候。
這正是推送通知出現(xiàn)的契機加叁。它們是出現(xiàn)在你設(shè)備上的有用通知倦沧，提示可能對你有用的相關(guān)信息。你可以簡單地滑動或點擊按鈕來關(guān)閉它們它匕，或者可以點擊它們展融，并立即指向具有相關(guān)信息的網(wǎng)頁。傳統(tǒng)上豫柬，只有原生應(yīng)用具有這種超棒的能力告希，它會利用設(shè)備的操作系統(tǒng)并發(fā)送推送通知。這也正是 PWA 成為 Web 顛覆者的切入點烧给。它們有能力接收出現(xiàn)在瀏覽器中的推送通知燕偶。
推送通知最棒的是即使用戶沒有瀏覽你的網(wǎng)站也會收到這些更新。體驗類似于原生應(yīng)用础嫡，而且即使瀏覽器沒有運行也可以工作指么。這使它成為與用戶互動并將其拉回至 Web 應(yīng)用的完美方法，即使用戶在一段時間內(nèi)沒有打開瀏覽器榴鼎。例如涧尿，如果你的網(wǎng)站是個天氣應(yīng)用，推送通知可以為你的用戶提供像“惡劣天氣即將來臨的警告”這樣有用的信息檬贰。你甚至可以安排每周的天氣預(yù)報姑廉，它們可以根據(jù)用戶訂閱的來發(fā)送推送通知，這將有無限的可能性翁涤！
推送通知是與用戶互動的好方法桥言，即使用戶沒在訪問你的網(wǎng)站或已經(jīng)關(guān)閉了瀏覽器窗口。
為了給用戶發(fā)送推送消息葵礼，首先需要用戶授權(quán)号阿。這為開發(fā)者提供了基于用戶設(shè)備和瀏覽器的唯一訂閱詳情。
一旦用戶授權(quán)了鸳粉，需要保存他們的訂閱詳情扔涧，以便向他們發(fā)送消息。
2、消息推送的知識點
2.1. Notification.requestPermission()
這是一個靜態(tài)方法枯夜，作用就是讓瀏覽器出現(xiàn)是否允許通知的提示弯汰，window系統(tǒng)Chrome瀏覽器目前的UI效果是這樣的：
語法目前有新舊兩種，下面這個是最近規(guī)范上更新的基于promise的語法：
Notification.requestPermission().then(function(permission) { ... });
下面這個是基于簡單的回調(diào)：
Notification.requestPermission(callback);
其中callback是可選參數(shù)湖雹，根據(jù)MDN的說法咏闪，Gecko 46開始舍棄了這種語法，但是摔吏，我自己使用FireFox 47測試鸽嫂，跑得很正常（有part4的截圖為證）。難道FireFox的版本號不等同于Gecko的版本號征讲？
無論是then中的還是直接callback函數(shù)的參數(shù)都是一樣的据某，表示當(dāng)前是否允許。只會是granted, denied, 或default.
其中g(shù)ranted表示用戶允許通知诗箍，denied表示用戶嫌棄你哗脖，default表示用戶目前還沒有管你。
Notification.requestPermission().then(function(result) {
// result可能是是granted, denied, 或default.
});
2.2. Notification.permission[只讀]
這是一個靜態(tài)屬性扳还。表示是否允許通知才避，值就是上面的granted, denied, 或default.
默認(rèn)情況下，Notification.permission的值是'default':
因此氨距，Notification.requestPermission()的回調(diào)方法中桑逝，可以不使用result參數(shù)，直接使用Notification.permission獲取當(dāng)前的通知狀態(tài)俏让。
2.3. new Notification(title, options)
/*
通過new構(gòu)造楞遏，顯示通知。其中title是必須參數(shù)首昔，表示通知小框框的標(biāo)題內(nèi)容寡喝，
options是可選參數(shù)，對象勒奇，支持的參數(shù)以及釋義見下表：
*/
options
dir
/*
默認(rèn)值是auto, 可以是ltr或rtl预鬓，有點類似direction屬性。表示提示主體內(nèi)容的水平
書寫順序赊颠。
*/
lang
/*
提示的語言格二。沒看出來有什么用。大家可以忽略之~
*/
body
/*
提示主體內(nèi)容竣蹦。字符串顶猜。會在標(biāo)題的下面顯示。比方說上面的“好岸焕ā长窄！(害羞.gif)”滔吠。
*/
tag
/*
字符串。標(biāo)記當(dāng)前通知的標(biāo)簽挠日。
*/
icon
/*
字符串疮绷。通知面板左側(cè)那個圖標(biāo)地址。
*/
data
/*
任意類型和通知相關(guān)聯(lián)的數(shù)據(jù)肆资。
*/
vibrate
/*
通知顯示時候矗愧，設(shè)備震動硬件需要的振動模式灶芝。所謂振動模式郑原，指的是一個描述
交替時間的數(shù)組，分別表示振動和不振動的毫秒數(shù)夜涕，一直交替下去犯犁。例如[200, 100, 200]表
示設(shè)備振動200毫秒，然后停止100毫秒女器，再振動200毫秒酸役。
*/
renotify
/*
布爾值。新通知出現(xiàn)的時候是否替換之前的驾胆。如果設(shè)為true涣澡，則表示替換，表示當(dāng)前標(biāo)記
的通知只會出現(xiàn)一個丧诺。注意都這里“當(dāng)前標(biāo)記”沒入桂？沒錯，true參數(shù)要想其作用驳阎，必須tag需要
設(shè)置屬性值抗愁。然后，通知就會像這樣覆蓋：
而不會是默認(rèn)的疊高樓：
*/
silent
/*
布爾值呵晚。通知出現(xiàn)的時候蜘腌，是否要有聲音。默認(rèn)false, 表示無聲饵隙。
*/
sound
/*
字符串撮珠。音頻地址。表示通知出現(xiàn)要播放的聲音資源金矛。
*/
noscreen
/*
布爾值劫瞳。是否不再屏幕上顯示通知信息。默認(rèn)false, 表示要在屏幕上顯示通知內(nèi)容绷柒。
*/
sticky
/*
布爾值志于。是否通知具有粘性，這樣用戶不太容易清除通知废睦。默認(rèn)false, 表示沒有粘性伺绽。
根據(jù)我自己的猜測，應(yīng)該和position的sticky屬性值類似。
*/
2.4. Notification.close()
通知顯示了奈应，如何關(guān)閉呢澜掩？可以通過調(diào)用Notification.close()實例方法實現(xiàn)關(guān)閉
3、實例
/*
獲得權(quán)限
這行代碼在這里不起作用杖挣，因為可以通過permission來判斷是否具有權(quán)限肩榕，當(dāng)然可以通過這
個方式來人為獲取權(quán)限，然后再根據(jù)使用者的行為來判斷是否繼續(xù)進行之后的代碼惩妇，畢竟默認(rèn)
的權(quán)限是default
var reqPermission = Notification.requestPermission();
點擊按鈕
*/
document.querySelector('#button').addEventListener('click', function () {
if (Notification.permission == "granted") {
var notification = new Notification("Hi株汉，帥哥：", {
body: '可以加你為好友嗎？',
icon: './images/icon-1.png'
});
var text = document.querySelector('#text');
notification.onclick = function() {
text.innerHTML = '張小姐已于' + new Date().toTimeString().split(' ')[0] + '加你為好友歌殃！';
notification.close();
};
setTimeout(function(){
notification.close();
},5000);
}else {
alert('bye bye');
}
});
參考網(wǎng)址
http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/
