本頁面由 Cloud Translation API 翻譯而成。

應用程式圖示徽章

安裝的網頁應用程式可透過 App Badging API，在應用程式圖示上設定應用程式專屬徽章。

Pete LePage

什麼是 App Badging API？

Twitter 示例：有八則通知，另一個應用程式則顯示旗幟類型的徽章。 — 範例：Twitter 有八則通知，另一個應用程式顯示旗幟類型徽章。

透過 App Badging API，已安裝的網頁應用程式可以設定應用程式專屬的徽章，並顯示在與應用程式相關聯的作業系統特定位置 (例如架子或主畫面)。

徽章可輕鬆地以不顯眼的方式通知使用者，有新的活動可能需要他們注意，或顯示少量資訊，例如未讀計數。

徽章比通知更貼近使用者需求，而且不會打擾使用者，因此更新頻率可以更高。由於不會打擾使用者，因此不需要使用者授權。

可能用途

可能使用這項 API 的應用程式包括：

即時通訊、電子郵件和社群媒體應用程式，用來表示有新訊息送達，或顯示未讀取的項目數。
生產力應用程式，用來表示長時間執行的背景工作 (例如轉譯圖片或影片) 已完成。
遊戲：表示需要玩家採取行動 (例如在西洋棋中，輪到玩家下棋時)。

支援

應用程式徽章 API 適用於 Windows 和 macOS，以及 Chrome 81 和 Edge 81 以上版本。ChromeOS 支援功能正在開發中，將於日後版本推出。Android 不支援 Badging API。Android 不會顯示通知，但會自動在已安裝網頁應用程式的圖示上顯示徽章，表示有未讀通知，就像 Android 應用程式一樣。

立即試用

開啟 App Badging API 示範。
系統提示時，請按一下「安裝」安裝應用程式，或使用 Chrome 選單安裝。
以已安裝的 PWA 開啟。請注意，這項功能必須以已安裝的 PWA 形式執行 (位於工作列或 Dock 中)。
按一下「設定」或「清除」按鈕，即可在應用程式圖示上設定或清除徽章。你也可以提供徽章值的數字。

如何使用 App Badging API

如要使用 App Badging API，網頁應用程式必須符合 Chrome 的可安裝性條件，且使用者必須將其新增至主畫面。

Badge API 在 navigator 上包含兩種方法：

setAppBadge(number)：設定應用程式的徽章。如有提供值，請將徽章設為提供的值；否則，請顯示純白色圓點 (或其他適合平台的標記)。將 number 設為 0，等同於呼叫 clearAppBadge()。
clearAppBadge()：移除應用程式的徽章。

兩者都會傳回可用於錯誤處理的空白 Promise。

徽章可以從目前頁面或已註冊的 Service Worker 設定。如要設定或清除徽章 (前景網頁或 Service Worker 中)，請呼叫：

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

在某些情況下，作業系統可能不允許精確呈現徽章。在這種情況下，瀏覽器會嘗試提供最適合該裝置的呈現方式。舉例來說，Android 不支援 Badging API，因此只會顯示圓點，不會顯示數值。

請勿假設使用者代理程式顯示徽章的方式。部分使用者代理程式可能會將「4000」等數字改寫為「99+」。如果您自行將徽章設為「99」等值，系統就不會顯示「+」。無論實際數字為何，只要呼叫 setAppBadge(unreadCount)，使用者代理程式就會負責顯示相應的數字。

雖然 Chrome 中的 App Badging API 需要已安裝的應用程式，但您不應讓對 Badging API 的呼叫作業取決於安裝狀態。只要 API 存在，就呼叫 API，因為其他瀏覽器可能會在其他位置顯示徽章。如果有效，就繼續使用。如果沒有，就表示該應用程式不支援這項功能。

透過 Service Worker 在背景設定及清除徽章

您也可以使用 Service Worker 在背景設定應用程式徽章。您可以透過定期背景同步處理、Push API 或兩者搭配使用來完成這項操作。

定期背景同步處理

定期在背景同步處理可讓 Service Worker 定期輪詢伺服器，藉此取得最新狀態並呼叫 navigator.setAppBadge()。

不過，系統呼叫同步的頻率並非完全可靠，而是由瀏覽器自行決定。

Web Push API

Push API 可讓伺服器將訊息傳送至服務工作人員，即使沒有任何前景網頁正在執行，服務工作人員也能執行 JavaScript 程式碼。因此，伺服器推送可透過呼叫 navigator.setAppBadge() 更新徽章。

不過，大多數瀏覽器 (包括 Chrome) 都會在收到推播訊息時顯示通知。在某些情況下 (例如更新標記時顯示通知)，這項做法沒有問題，但如果不想顯示通知，就無法以細微的方式更新標記。

此外，使用者必須授予網站通知權限，才能接收推送訊息。

兩者並用

雖然不盡完美，但同時使用 Push API 和定期背景同步處理，仍是不錯的解決方案。系統會透過 Push API 傳送高優先權資訊，顯示通知並更新徽章。系統會在網頁開啟時或透過定期背景同步處理，更新徽章來傳送優先順序較低的資訊。

意見回饋

Chrome 團隊想瞭解您使用 App Badging API 的體驗。

介紹 API 設計

API 是否有任何功能無法正常運作？或者，是否有缺少的方法或屬性，導致您無法實作想法？你對安全模式有任何疑問或意見嗎？

在 Badging API GitHub 存放區中提出規格問題，或在現有問題中新增想法。

回報導入問題

您是否發現 Chrome 實作方式有錯誤？還是實作方式與規格不同？

前往 https://new.crbug.com 回報錯誤。請務必盡可能提供詳細資訊、重現問題的簡單指示，並將「Components」設為 UI>Browser>WebAppInstalls。

支援 API

您打算在網站上使用 App Badging API 嗎？您的公開支持有助於 Chrome 團隊優先處理相關功能，並向其他瀏覽器供應商展現支援這些功能的必要性。

使用主題標記 #BadgingAPI 傳送推文給 @ChromiumDev，告訴我們您在何處使用這項功能，以及使用方式。

實用連結

主頁橫幅相片來源：Prateek Katyal 發表於 Unsplash

應用程式圖示徽章 透過集合功能整理內容 你可以依據偏好儲存及分類內容。