本篇文章內(nèi)容簡(jiǎn)單确徙，速讀只需兩三分鐘醒串，通過(guò)這兩三分鐘的時(shí)間你就可以給自己的網(wǎng)站實(shí)現(xiàn)推送提醒的功能
Notification 類(lèi)
簡(jiǎn)單明了执桌，這個(gè)類(lèi)就是負(fù)責(zé)推送消息的，只要用戶(hù)當(dāng)前沒(méi)有關(guān)閉頁(yè)面芜赌，及時(shí)是在使用其他程序仰挣，瀏覽器也能夠?qū)⑾⑼扑徒o用戶(hù)
請(qǐng)求權(quán)限
我們?cè)谑謾C(jī)上都收到過(guò)消息推送，在接收推送之前我們會(huì)先將消息推送權(quán)限開(kāi)放給應(yīng)用缠沈。在瀏覽器中也一樣椎木，在使用瀏覽器推送之前，需要先獲取權(quán)限
Notification.requestPermission().then(permission => {
console.log(permission)
})
通過(guò) requestPermission 方法可以為當(dāng)前域名請(qǐng)求消息推送的權(quán)限博烂，這個(gè)方法可以使用 Promise 語(yǔ)法來(lái)實(shí)現(xiàn)請(qǐng)求結(jié)果的處理。當(dāng)然漱竖，你也可以使用回調(diào)的方式來(lái)實(shí)現(xiàn)
回調(diào)的參數(shù) permission 表示當(dāng)前請(qǐng)求后用戶(hù)的選擇：允許推送 / 不允許推送禽篱，它的值也分別有兩個(gè) granted / denied，當(dāng)我們發(fā)現(xiàn)用戶(hù)不允許的推送的時(shí)候馍惹，就可以在回調(diào)中做出相應(yīng)的提示躺率，告訴用戶(hù)可能會(huì)導(dǎo)致不能及時(shí)接收消息，并且告訴用戶(hù)如果想要接收消息該如何操作等
查看權(quán)限
由于推送的權(quán)限是基于域名的万矾，因此同一個(gè)網(wǎng)站在請(qǐng)求一次權(quán)限后悼吱，下一次打開(kāi)時(shí)就不會(huì)再次請(qǐng)求，而是直接通過(guò)第一次的用戶(hù)選擇來(lái)決定網(wǎng)站是否能向用戶(hù)推送
因此我們就需要能夠獲取到當(dāng)前網(wǎng)站的推送的狀態(tài)良狈，可以通過(guò)下面的這個(gè)屬性來(lái)獲取狀態(tài)：
Notification.permission
permission 屬性的值有三種：granted - 允許推送后添；denied - 拒絕推送；default - 還未申請(qǐng)權(quán)限
當(dāng)值為 default 時(shí)薪丁，我們就可以向用戶(hù)請(qǐng)求推送的權(quán)限了
發(fā)起一條推送
const note = new Notification (title, opts)
通過(guò)上面的方式可以聲明一條推送遇西，它有兩個(gè)參數(shù)，第一個(gè)參數(shù)是消息的標(biāo)題严嗜，這個(gè)是必填的一個(gè)參數(shù)粱檀；而通過(guò)第二個(gè)選填參數(shù)，我們則可以實(shí)現(xiàn)更多自定義的顯示內(nèi)容：
第二個(gè)參數(shù)接收一個(gè)對(duì)象漫玄，它有一下幾個(gè)屬性：
- body：推送的主體內(nèi)容
- tag：推送的標(biāo)識(shí)茄蚯，如果我們聲明了多個(gè) Notification，而這些推送的 tag 都相同睦优，則只會(huì)推送一次
- icon：需要在推送中顯示的圖標(biāo)的 URL
- data：推送的消息所帶有的數(shù)據(jù)信息渗常，當(dāng)用戶(hù)點(diǎn)擊推送窗口時(shí)，可以通過(guò)這些信息為用戶(hù)展示相應(yīng)的內(nèi)容
- requireInteraction：正常情況下刨秆，推送發(fā)出后若用戶(hù)沒(méi)有操作凳谦，幾秒后就會(huì)消失，而將該屬性設(shè)為
true則可以讓推送始終維持而不消失衡未，默認(rèn)值是false
當(dāng)我們需要自定義推送顯示時(shí)長(zhǎng)的時(shí)候尸执，可以通過(guò)最后一個(gè)屬性將自動(dòng)消失關(guān)閉家凯，然后配合
note.close()和setTimeout方法人為控制推送時(shí)長(zhǎng)
點(diǎn)擊推送事件
既然已經(jīng)可以成功的發(fā)起一條推送，那么該如何監(jiān)聽(tīng)到用戶(hù)是否點(diǎn)擊了這個(gè)推送呢如失？很簡(jiǎn)單绊诲，通過(guò) onclick 屬性就可以實(shí)現(xiàn)
note.onclick = () => {
//在這里實(shí)現(xiàn)用戶(hù)點(diǎn)擊后的邏輯
}
其他
需要注意的是，并不是所有瀏覽器都支持 Notification褪贵，所以在使用前需要先檢測(cè)能否使用
或許有的小伙伴會(huì)想掂之，這個(gè)功能不錯(cuò)，這樣在手機(jī)上也能實(shí)現(xiàn)網(wǎng)頁(yè)消息推送了脆丁。然而很不幸的是世舰，移動(dòng)端瀏覽器幾乎100%不支持 Notification ：(
