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 |
浏览器兼容性
加载中…