PWA 徽章通知實作教學 運用 App Badging API 為圖示增加動態計數顯示

什麼是 App Badging API？

App Badging API 是一種 Web API，允許已安裝的 Progressive Web App (PWA) 在應用程式圖示上顯示「徽章」（Badge），通常表現為一個小數字或圓點。這項功能旨在模仿原生 App 的通知機制，用於提醒使用者有未讀訊息、待辦事項或系統更新，而無需開啟 App 或發送顯眼的推播通知。App Badging API 的核心方法為 navigator.setAppBadge()，它不需要特殊的使用者授權，只要 App 已被安裝至系統即可運作，是提升使用者參與度（Engagement）極其低成本且有效的手段。

什麼是 Badging API？PWA 通知數字解析

App Badging API 讓 Web App 也能像原生應用一樣，在圖示上顯示「通知數字」（徽章）。小編覺得這對於提醒用戶有新訊息、待辦事項或遊戲任務非常實用。

值得注意的是，通知數字的顯示位置會隨著平台不同而異（例如 Windows 的工作列、Android 的主畫面等）。

• 應用場景：Email 未讀數、社群訊息通知、購物車商品數。
• 低門檻：不需要任何使用者權限即可使用。
• 相容性：支援 Windows、macOS 以及 Chrome 81+、Edge 84+。

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

App Badging API 實作：如何動態設定通知數字？

實作 App Badging API 其實非常直覺。小編建議採取的開發流程如下：

1. 安裝確認：確保 App 已被安裝。Chrome 的 API 通常要求 Web App 必須先進入系統管理列表才能顯示徽章。
   • 您可以安裝此 Demo 站台 來實際測試。
2. 條件判斷：呼叫 API 前，先確認瀏覽器是否支援 navigator.setAppBadge。

Badging API 在桌面裝置上的顯示效果 (圖片來源: https://web-dev)

跨瀏覽器相容的 setAppBadge 範例

在前端程式中，小編整理了一段具備相容性的程式碼：

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

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

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

FAQ：PWA 圖示徽章常見問題

Q1：App Badging API 與一般的 Push Notification 有什麼區別？

A：Push Notification 通常會彈出視窗並發出聲音，適合緊急訊息；而 App Badging 則是靜態的圖示標記，適合非侵入式的提醒。它的干擾性較低，不會讓使用者感到煩躁，但能有效地引導使用者重新開啟 App 查看更新。

Q2：為什麼我在 Android 或 iOS 上看不到數字，只看到圓點？

A：這是由作業系統決定的。例如 iOS 某些版本或特定的 Android 啟動器（Launcher）可能只支援「標記點」（Dot）而非具體數字。PWA 僅能傳遞數值給作業系統，具體呈現樣式則由系統 UI 規範。

Q3：如果我設定 setAppBadge(0) 會發生什麼事？

A：雖然傳入 0 是合法的，但大多數瀏覽器的行為等同於呼叫 clearAppBadge()，即移除徽章。如果您想要表達「沒有未讀但仍有狀態」，API 目前並沒有提供「空徽章」的選項。

• ← 上一篇
• 下一篇 →