Notification(通知):利用 JavaScript 實作瀏覽器推播通知

概述

實作瀏覽器推播通知的過程以下面的流程圖表示,會經過幾個步驟:瀏覽器支援度檢查、請求授權、建立通知、發出通知、分門別類通知、事件處理和錯誤處理。

通知流程圖

備註

  1. 老舊瀏覽器可能會有 undefined 狀況
  2. 使用標籤(Tag)做為分類通知的依據和決定新舊通知的顯示狀況

瀏覽器支援度檢查

目前支援的主流瀏覽器有 Chrome(42+ 才能與 Service Worker 合用)、Firefox(22+)、Safari(6+)、Opera(25+)和 Edge。

以下程式碼檢查瀏覽器是否支援通知,若支援則可建立通知,否則提示不支援。

if (!('Notification' in window)) {
  console.log('This browser does not support notification');
}

使用者授權

使用者提供的權限分為三種:「granted」(同意)、「denied」(拒絕)和「default」(未授權),其中老舊瀏覽器可能會有 undefined 的狀況。

請求授權

若使用者從未授權過(default)或 undefined(老舊瀏覽器的未知狀態),可使用Notification.requestPermission請求使用者授權,接受通知。

if (Notification.permission === 'default' || Notification.permission === 'undefined') {
  Notification.requestPermission(function (permission) {
    // permission 可為「granted」(同意)、「denied」(拒絕)和「default」(未授權)
    // 在這裡可針對使用者的授權做處理
  });
}

對使用者提出請求後,瀏覽器上方會出現對話框(Request Dialog)。

請求使用者授權

建立通知

若使用者同意授權,則可建立通知。其中通知的 title 是必須的,其他都是 optional。

如下範例,設定通知的 title 為「Hi there!」,第二個參數(在此包裝為 notifyConfig)設定 body(通知的內容)為 「\ ^o^ /」、icon 放置圖片網址,圖片網址可為相對或絕對路徑。一旦使用者同意授權通知,即建立一個新的通知,就會在右下角看到。

var notifyConfig = {
  body: '\\ ^o^ /', // 設定內容
  icon: '/images/favicon.ico' // 設定 icon
};

if (Notification.permission === 'default' || Notification.permission === 'undefined') {
  Notification.requestPermission(function (permission) {
    if (permission === 'granted') { // 使用者同意授權
      var notification = new Notification('Hi there!', notifyConfig); // 建立通知
    }
  });
}

成功建立新通知!

建立通知

標籤(Tag)

用來做為分類通知的依據和決定新舊通知的顯示狀況。

建立通知時可設定通知的標籤,若新通知的標籤已在先前出現過,新通知會關閉舊通知,只留下新通知;若沒有出現過,新舊通知會一起出現。

var notify = new Notification(Hi there! , {
  body: '\\ ^o^ /',
  icon: '/images/favicon.ico',
  tag: 'newArrival' // 設定標籤
});

在下圖範例中,假設要建立三種通知:

由下圖可知,同一時間,同一種標籤只會出現一個通知。

設定通知標籤

點擊通知

設定點擊通知之後做些什麼,例如打開特定網頁。

var notify = new Notification(Hi there! , {
  body: '\\ ^o^ /',
  icon: '/images/favicon.ico'
});

notify.onclick = function(e) { // 綁定點擊事件
  e.preventDefault(); // prevent the browser from focusing the Notification's tab
  window.open('http://sample.com./'); // 打開特定網頁
}

錯誤處理

接收錯誤事件並做處理。

notify.onerror = function(e) {
  // error handling
}

資料來源:Notifications API

範例

附上露天讀書會投影片-利用 JavaScript 實作瀏覽器推播通知

利用 JavaScript 實作瀏覽器推播通知 from Hsin-Hao Tang

comments powered by Disqus