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,所以在使用前需要先檢測能否使用
或許有的小夥伴會想,這個功能不錯,這樣在手機上也能實現網頁