HTML5 桌面通知：Notification API

前言

Notification API 是 HTML5 新增的桌面通知 API，必須localhost或者HTTPS才能訪問，用於向用戶顯示通知信息。該通知是脫離瀏覽器的，即便用戶沒有停留在當前標籤頁，甚至最小化了瀏覽器，該通知信息也同樣會置頂顯示出來。

用戶權限

想要向用戶顯示通知消息，須要獲取用戶權限，而相同的域名只須要獲取一次權限。只有用戶容許的權限下，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

關閉通知

從上面的參數能夠看出，並無一個參數用來配置顯示時長的。我想要它 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。