Progressive Web App 通知數字 Badging API 入門實做

me
林彥成
2021-09-10 | 1 min.
文章目錄
  1. 1. 什麼是 Badging API
  2. 2. Badging API 推播網頁實做

什麼是 Badging API

Badging API 讓 App 能夠顯示通知數字,不過通知數字的位置會依照平台的不同而有所差異。

  • 常見是用來通知用戶,像是訊息或是推播數量都能夠透過這個通知數字來實現
    • Email 未讀、訊息未讀
    • 待辦事項
    • 遊戲任務
  • 不需要任何使用者權限即可使用
  • 支援 Windows、macOS、Chrome 81+、Edge 84+

Badging API (圖片來源: https://web-dev)

Badging API 推播網頁實做

其實實作上蠻容易的,就是只要有 API 存在就可以設定,沒有則代表不行。

  1. App 需要被安裝,被安裝過後就會出現在 App 列表中
  1. 開啟 PWA 測試 Badging API
  • 直接叫用設定
  • 透過 Service Worker 叫用設定

注意事項

  • 99 以上會被改成 99+ 所以如果不想顯示 99+ 也可以自行改成 99
  • Chrome App Badging API 要求 App 要先被安裝
  • 背景執行也支援透過 service worker 去叫用,所以可以整合推播

跨瀏覽器支援的寫法,在前景透過程是直接叫用,就是先判斷有沒有這個 API 原則上有就是可以設定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function setBadge(...args) {
if (navigator.setAppBadge) {
navigator.setAppBadge(...args);
} else if (navigator.setExperimentalAppBadge) {
navigator.setExperimentalAppBadge(...args);
} else if (window.ExperimentalBadge) {
window.ExperimentalBadge.set(...args);
}
}

function clearBadge() {
if (navigator.clearAppBadge) {
navigator.clearAppBadge();
} else if (navigator.clearExperimentalAppBadge) {
navigator.clearExperimentalAppBadge();
} else if (window.ExperimentalBadge) {
window.ExperimentalBadge.clear();
}
}

透過 Service Worker,也是一樣先進行判斷後直接叫用,有就可以設定。

1
2
3
4
5
6
7
8
9
10
let requestCounter = 0;

self.addEventListener('fetch', function(e) {
if ('setAppBadge' in navigator) {
navigator.setAppBadge(++requestCounter);
}
console.log('[Service Worker] Fetch', e.request.url);
e.respondWith(fetch(e.request));
});


喜歡這篇文章,請幫忙拍拍手喔 🤣

share