Badging API
注意：此功能在 Web Workers 中可用。
徽章 API 為 Web 開發者提供了一種在文件或應用程式上設定徽章的方法，作為狀態已更改的通知，而無需顯示更具干擾性的通知。一個常見的用例是具有訊息功能的應用程式，它會在應用程式圖示上顯示一個徽章，以表明有新訊息到達。
概念與用法
Web 開發者經常更新文件的網站圖示或標題以指示狀態。徽章 API 透過提供一種使用者代理有意義的方法來更優雅地顯示狀態，從而可以按照與 UI 其他部分匹配的方式進行顯示。
徽章型別
有兩種徽章型別
- 文件徽章，通常顯示在瀏覽器標籤頁中靠近或在頁面圖示上。
- 應用程式徽章，與已安裝的 Web 應用程式的圖示相關聯。這些可能會根據使用的裝置顯示在程式塢、工作列或主螢幕的應用程式圖示上。
徽章狀態
徽章可以具有三種可能的內部設定值之一
設定徽章
使用 setAppBadge() 方法（適用於已安裝的應用程式）設定徽章。如果未將任何引數傳遞給這些方法，則徽章值為標誌。使用者代理將顯示其通知徽章，例如，在圖示上顯示一個彩色圓圈。
這些方法也可以傳遞一個名為 contents 的引數，該引數應為數字。然後，該數字將作為徽章的一部分顯示。使用者代理可能會以某種方式更改此值。例如，如果您傳遞一個非常大的數字，如 4000，使用者代理可能會在徽章中將其顯示為 99+。使用者代理也可能忽略此資料並改用標記進行顯示。
清除徽章
使用 clearAppBadge() 方法清除徽章。這些方法不接受任何引數，並將徽章設定為 無 值。此外，將 0 值傳遞給 setAppBadge() 會將徽章設定為 無 並清除徽章。
介面
無。
Navigator 介面的擴充套件
-
在與此應用程式關聯的圖示上設定徽章。
-
清除與此應用程式關聯的圖示上的徽章。
WorkerNavigator 介面的擴充套件
-
在與此應用程式關聯的圖示上設定徽章。
-
清除與此應用程式關聯的圖示上的徽章。
示例
為當前應用程式設定一個值為 12 的通知徽章
js
navigator.setAppBadge(12);
清除當前應用程式上的通知徽章
js
navigator.clearAppBadge();
規範
| 規範 |
|---|
| Badging API # setappbadge-method |
瀏覽器相容性
載入中…