使用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)

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

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

body:推送的主體內容

tag:推送的標識,如果我們聲明瞭多個 Notification,而這些推送的 tag 都相同,則隻會推送一次

icon:需要在推送中顯示的圖標的 URL

data:推送的消息所帶有的數據信息,當用戶點擊推送窗口時,可以通過這些信息為用戶展示相應的內容

requireInteraction:正常情況下,推送發出後若用戶沒有操作,幾秒後就會消失,而將該屬性設為 true 則可以讓推送始終維持而不消失,默認值是 false

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

點擊推送事件

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

note.onclick = () => {

//在這裡實現用戶點擊後的邏輯

}

其他

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

或許有的小夥伴會想,這個功能不錯,這樣在手機上也能實現網頁

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *