HTML5 桌面通知：Notification API

linshuai發表於2017-10-23
HTMLAPI

前言

Notification API 是 HTML5 新增的桌面通知 API，用於向使用者顯示通知資訊。該通知是脫離瀏覽器的，即使使用者沒有停留在當前標籤頁，甚至最小化了瀏覽器，該通知資訊也一樣會置頂顯示出來。

使用者許可權

想要向使用者顯示通知訊息，需要獲取使用者許可權，而相同的域名只需要獲取一次許可權。只有使用者允許的許可權下，Notification 才能起到作用，避免某些網站的廣告濫用 Notification 或其它給使用者造成影響。那麼如何知道使用者到底是允不允許的？

Notification.permission 該屬性用於表明當前通知顯示的授權狀態，可能的值包括：

  • default ：不知道使用者的選擇，預設。
  • granted ：使用者允許。
  • denied ：使用者拒絕。
if(Notification.permission === 'granted'){
    console.log('使用者允許通知');
}else if(Notification.permission === 'denied'){
    console.log('使用者拒絕通知');
}else{
    console.log('使用者還沒選擇，去向使用者申請許可權吧');
}複製程式碼

請求許可權

當使用者還沒選擇的時候，我們需要向使用者去請求許可權。Notification 物件提供了 requestPermission() 方法請求使用者當前來源的許可權以顯示通知。

以前基於回撥的語法已經棄用（當然在現在的瀏覽器中還是能用的），最新的規範已將此方法更新為基於 promise 的語法：

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('使用者允許通知');
    }else if(permission === 'denied'){
        console.log('使用者拒絕通知');
    }
});複製程式碼

推送通知

獲取使用者授權之後，就可以推送通知了。

var notification = new Notification(title, options)複製程式碼

引數如下：

  • title：通知的標題
  • options：通知的設定選項（可選）。
    • body：通知的內容。
    • tag：代表通知的一個識別標籤，相同tag時只會開啟同一個通知視窗。
    • icon：要在通知中顯示的圖示的URL。
    • image：要在通知中顯示的影像的URL。
    • data：想要和通知關聯的任務型別的資料。
    • requireInteraction：通知保持有效不自動關閉，預設為false。

還有一些其他的引數，因為用不了或者沒什麼用這裡就沒必要說了。

var n = new Notification('狀態更新提醒',{
    body: '你的朋友圈有3條新狀態，快去檢視吧',
    tag: 'linxin',
    icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
    requireInteraction: true
})複製程式碼

通知訊息的效果圖如下：

image
image

關閉通知

從上面的引數可以看出，並沒有一個引數用來配置顯示時長的。我想要它 3s 後自動關閉的話，這時可以呼叫 close() 方法來關閉通知。

var n = new Notification('狀態更新提醒',{
    body: '你的朋友圈有3條新狀態，快去檢視吧'
})

setTimeout(function() {
    n.close();
}, 3000);複製程式碼

事件

Notification 介面的 onclick屬性指定一個事件偵聽器來接收 click 事件。當點選通知視窗時會觸發相應事件，比如開啟一個網址，引導使用者回到自己的網站去。

var n = new Notification('狀態更新提醒',{
    body: '你的朋友圈有3條新狀態，快去檢視吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }
})
n.onclick = function(){
    window.open(n.data.url, '_blank');      // 開啟網址
    n.close();                              // 並且關閉通知
}複製程式碼

應用場景

前面說那麼多，其實就是為了用。那麼到底哪些地方可以用到呢？

現在網站的訊息提醒，大多數都是在訊息中心顯示個訊息數量，然後發郵件告訴使用者，這流程完全沒有錯。不過像我這種使用者，覺得別人點個贊，收藏一下都要發個郵件提醒我，老是要去刪郵件（強迫症），我是覺得挺煩的甚至關閉了郵件提醒。

當然這裡並不是說要用 Notification，畢竟它和郵件的功能完全不一樣。

我覺得比較適合的是新聞網站。使用者瀏覽新聞時，可以推送給使用者實時新聞。以騰訊體育為例，它就使用了 Notification API。在頁面中引入了一個 notification2017_v0118.js，有興趣可以看看別人是怎麼成熟的使用的。

一進入頁面，就獲取授權，同時自己頁面有個浮動框提示你允許授權。如果允許之後，就開始給你推送通知了。不過它在關閉標籤卡的時候，通知也會被關閉，那是因為監聽了頁面 beforeunload 事件。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();
}
if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);
}複製程式碼

相容

說到相容，自然是倒下一大片，而且各瀏覽器的表現也會有點差異。移動端的幾乎全倒，PC端的還好大多都能支援，除了IE。所以使用前，需要先檢查一下瀏覽器是否支援 Notification。

更多文章：github.com/lin-xin/blo…

聽說寫文章可以得非同步社群的書，非同步社群作為國內頂尖的IT專業圖書社群，它的書我非常想要，所以我竭力寫了這篇文章，我想要這本書 《高效能響應式Web開發實戰》

相關文章