本篇文章內(nèi)容簡(jiǎn)單，速讀只需兩三分鐘，通過(guò)這兩三分鐘的時(shí)間你就可以給自己的網(wǎng)站實(shí)現(xiàn)推送提醒的功能

Notification 類

簡(jiǎn)單明了，這個(gè)類就是負(fù)責(zé)推送消息的，只要用戶當(dāng)前沒(méi)有關(guān)閉頁(yè)面，及時(shí)是在使用其他程序，瀏覽器也能夠?qū)⑾⑼扑徒o用戶

請(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)求后用戶的選擇：允許推送 / 不允許推送，它的值也分別有兩個(gè) granted / denied，當(dāng)我們發(fā)現(xiàn)用戶不允許的推送的時(shí)候，就可以在回調(diào)中做出相應(yīng)的提示，告訴用戶可能會(huì)導(dǎo)致不能及時(shí)接收消息，并且告訴用戶如果想要接收消息該如何操作等

查看權(quán)限

由于推送的權(quán)限是基于域名的，因此同一個(gè)網(wǎng)站在請(qǐng)求一次權(quán)限后，下一次打開(kāi)時(shí)就不會(huì)再次請(qǐng)求，而是直接通過(guò)第一次的用戶選擇來(lái)決定網(wǎng)站是否能向用戶推送

因此我們就需要能夠獲取到當(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í)，我們就可以向用戶請(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è)屬性：

1. body：推送的主體內(nèi)容
2. tag：推送的標(biāo)識(shí)，如果我們聲明了多個(gè) Notification，而這些推送的 tag 都相同，則只會(huì)推送一次
3. icon：需要在推送中顯示的圖標(biāo)的 URL
4. data：推送的消息所帶有的數(shù)據(jù)信息，當(dāng)用戶點(diǎn)擊推送窗口時(shí)，可以通過(guò)這些信息為用戶展示相應(yīng)的內(nèi)容
5. requireInteraction：正常情況下，推送發(fā)出后若用戶沒(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)到用戶是否點(diǎn)擊了這個(gè)推送呢？很簡(jiǎn)單，通過(guò) onclick 屬性就可以實(shí)現(xiàn)

note.onclick = () => {
  //在這里實(shí)現(xiàn)用戶點(diǎn)擊后的邏輯
}

其他

需要注意的是，并不是所有瀏覽器都支持 Notification，所以在使用前需要先檢測(cè)能否使用

或許有的小伙伴會(huì)想，這個(gè)功能不錯(cuò)，這樣在手機(jī)上也能實(shí)現(xiàn)網(wǎng)頁(yè)消息推送了。然而很不幸的是，移動(dòng)端瀏覽器幾乎100%不支持 Notification ：(

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論