Progressive Web App 通知數字: Badging API 入門實做 | 前端三分鐘

文章目錄

1. 什麼是 Badging API
2. Badging API 推播網頁實做

什麼是 Badging API

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

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

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

Badging API 推播網頁實做

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

App 需要被安裝，被安裝過後就會出現在 App 列表中

可以用手機或電腦打開後點選安裝 https://linyencheng.github.io/progressive-web-application/pwa-badging-api/

開啟 PWA 測試 Badging API

直接叫用設定
透過 Service Worker 叫用設定

注意事項

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

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

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，也是一樣先進行判斷後直接叫用，有就可以設定。

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));
});