使用 Javascript 實現瀏覽器推送提醒功能的示例

本篇文章內容簡單，速讀只需兩三分鐘，通過這兩三分鐘的時間你就可以給自己的網站實現推送提醒的功能

Notification 類

簡單明了，這個類就是負責推送消息的，只要用戶當前沒有關閉頁面，及時是在使用其他程序，瀏覽器也能夠將消息推送給用戶

請求權限

我們在手機上都收到過消息推送，在接收推送之前我們會先將消息推送權限開放給應用。在瀏覽器中也一樣，在使用瀏覽器推送之前，需要先獲取權限

Notification.requestPermission().then(permission => {
  console.log(permission)
})

通過 requestPermission 方法可以為當前域名請求消息推送的權限，這個方法可以使用 Promise 語法來實現請求結果的處理。當然，你也可以使用回調的方式來實現

回調的參數 permission 表示當前請求后用戶的選擇：允許推送 / 不允許推送，它的值也分別有兩個 granted / denied，當我們發現用戶不允許的推送的時候，就可以在回調中做出相應的提示，告訴用戶可能會導致不能及時接收消息，并且告訴用戶如果想要接收消息該如何操作等

查看權限

由于推送的權限是基于域名的，因此同一個網站在請求一次權限后，下一次打開時就不會再次請求，而是直接通過第一次的用戶選擇來決定網站是否能向用戶推送

因此我們就需要能夠獲取到當前網站的推送的狀態，可以通過下面的這個屬性來獲取狀態：

Notification.permission

permission 屬性的值有三種：granted - 允許推送；denied - 拒絕推送；default - 還未申請權限

當值為 default 時，我們就可以向用戶請求推送的權限了

發起一條推送

const note = new Notification (title, opts)

通過上面的方式可以聲明一條推送，它有兩個參數，第一個參數是消息的標題，這個是必填的一個參數；而通過第二個選填參數，我們則可以實現更多自定義的顯示內容：

第二個參數接收一個對象，它有一下幾個屬性：

1. body：推送的主體內容
2. tag：推送的標識，如果我們聲明了多個 Notification，而這些推送的 tag 都相同，則只會推送一次
3. icon：需要在推送中顯示的圖標的 URL
4. data：推送的消息所帶有的數據信息，當用戶點擊推送窗口時，可以通過這些信息為用戶展示相應的內容
5. requireInteraction：正常情況下，推送發出后若用戶沒有操作，幾秒后就會消失，而將該屬性設為 true 則可以讓推送始終維持而不消失，默認值是 false

當我們需要自定義推送顯示時長的時候，可以通過最后一個屬性將自動消失關閉，然后配合 note.close() 和 setTimeout 方法人為控制推送時長

點擊推送事件

既然已經可以成功的發起一條推送，那么該如何監聽到用戶是否點擊了這個推送呢？很簡單，通過 onclick 屬性就可以實現

note.onclick = () => {
  //在這里實現用戶點擊后的邏輯
}

其他

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

或許有的小伙伴會想，這個功能不錯，這樣在手機上也能實現網頁消息推送了。然而很不幸的是，移動端瀏覽器幾乎100%不支持 Notification ：(

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。