利用 JavaScript 實作瀏覽器推播通知

1. 利用 JavaScript 實作瀏覽器推播通知
Summer Tang
2017 / 08 / 18

2. Agenda
- 瀏覽器支援度
- 使用者授權
- 建立通知
- 標籤
- 事件綁定
- 錯誤處理
- 範例

3. Push Message
- Notification API：建立和發送通知
- Push API：使用 Service Worker 接收通知

4. 流程
開始
瀏覽器
是否支
援？
使用者
是否授
權？
請求授權 建立通知 發出通知
結束
否
是
同意(granted，使用者已授權過)
尚未要求
授權
(default)
拒絕 (denied)
點擊通知 錯誤處理

5. 瀏覽器支援度檢查
檢查瀏覽器是否支援通知，若支援則可建立通知，否則提示不支援。
if (!('Notification' in window)) {
console.log('This browser does not support notification');
}

6. Browser Support
目前支援的主流瀏覽器有
- Chrome：42+ 才能與 Service Worker 合用
- Firefox：22+
- Safari：6+
- Opera：25+
- Edge
Can I use Web Notifications：由於不是每個 feature 都已被瀏覽器實作，所
以使用前要先查詢支援度。

7. 使用者授權
使用者提供的權限分為三種
- granted（同意）
- denied（拒絕）
- default（未授權），老舊瀏覽器可能會有 undefined 的狀況。

8. 請求授權
若使用者從未授權過（default）或 undefined（老舊瀏覽器的未知狀態），可使
用 Notification.requestPermission 請求使用者授權，接受通知。
if (Notification.permission === 'default' || Notification.permission === 'undefined') {
Notification.requestPermission(function (permission) {
// 取得使用者授權後，在這裡處理授權結果
});
}

9. 請求授權

10. 建立通知
若使用者同意授權，則可建立通知。其中通知的 title 是必須的，其他都是
optional。
var notifyConfig = {
body: ' ^o^ /', // 設定內容
icon: '/images/favicon.ico' // 設定 icon
};
var notification = new Notification('Hi there!', notifyConfig); // 建立通知

11. 建立通知

12. 標籤
功用
- 分類
- 決定新舊通知的顯示狀況
var notify = new Notification(Hi
there! , {
body: ' ^o^ /',
icon: '/images/favicon.ico',
tag: 'newArrival' // 設定標籤
});

13. 新舊通知的顯示狀況
新舊通知的顯示狀況：
- 若標籤已在先前出現過，新通知會關閉
舊通知，只留下新通知
- 若標籤沒有出現過，新舊通知會一起出
現
同一時間，同一種標籤只會出現一個通知。
https://codepen.io/cythilya/pen/RZQPQO?e
ditors=1010

14. 事件綁定 - 點擊通知
設定點擊通知之後做些什麼，例如打開特定網頁。
var notify = new Notification(Hi there! , {
body: ' ^o^ /',
icon: '/images/favicon.ico'
});
notify.onclick = function() { // 綁定點擊事件
window.open('http://sample.com./'); // 打開特定網頁
}

15. 錯誤處理
接收錯誤事件並做處理。
notify.onerror = function(e) {
// error handling
}

16. 範例
https://codepen.io/cythilya/pen/RZQPQO?editors=1010