Notification(通知):利用 JavaScript 實作瀏覽器推播通知
09 Jul 2017概述
實作瀏覽器推播通知的過程以下面的流程圖表示,會經過幾個步驟:瀏覽器支援度檢查、請求授權、建立通知、發出通知、分門別類通知、事件處理和錯誤處理。
備註
- 老舊瀏覽器可能會有 undefined 狀況
- 使用標籤(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' // 設定標籤
});
在下圖範例中,假設要建立三種通知:
- 第一種是沒有設定標籤的,範例中會建立 1 個通知。
- 第二種是標籤為「newArrival」,每 1 秒建立一次。範例中會建立 10 個通知,編號 0 ~ 9。
- 第三種是標籤為「newFeature」,每 0.5 秒建立一次。範例中會建立 10 個通知,編號 0 ~ 9。
由下圖可知,同一時間,同一種標籤只會出現一個通知。
點擊通知
設定點擊通知之後做些什麼,例如打開特定網頁。
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 實作瀏覽器推播通知。