引言：随着用户对 Web 应用程序需求的不断增长，开发人员需要一种简洁有效的方式来通知用户新活动或未读内容。传统的通知方式有时可能过于打扰用户，而徽章（Badge）则提供了一种不易分散注意力且用户友好的解决方案。本文将详细介绍 Badging API，它允许开发人员为安装的 Web 应用程序设置徽章。

什么是 Badging API？

Badging API 是一种允许 Web 应用程序在其图标上设置徽章的 API。这些徽章通常显示在操作系统的任务栏、主屏幕或应用程序坞中的应用图标旁。与显示通知不同的是，徽章不会干扰用户，因此无须用户许可即可更新。

徽章通常用于指示需要用户注意的新活动或少量信息，例如未读消息计数。常见用途包括：

聊天、电子邮件和社交应用通知新消息或未读内容数。

效率应用指示后台任务完成。

游戏通知玩家需要采取行动。

Badging API 的支持情况

目前，Badging API 支持 Windows 和 macOS 平台，并在 Chrome 81 和 Edge 81 及更高版本可用。未来版本将支持 ChromeOS，而 Android 上则通过其他机制显示徽章。

如何使用 Badging API

要使用 Badging API，您的 Web 应用需要符合安装要求，并且用户需将应用添加到主屏幕。Badging API 提供了两个主要方法：

setAppBadge(contents): 设置应用徽章，可以传递一个数字值。

clearAppBadge(): 清除应用徽章。

以下是一些代码示例，展示了如何设置和清除徽章：

// 设置徽章，未读消息数为12navigator.setAppBadge(12).catch((error) => {
 console.error("设置徽章失败", error);});// 清除徽章navigator.clearAppBadge().catch((error) => {
 console.error("清除徽章失败", error);});

机制与细节

设置徽章
setAppBadge 方法接收一个可选的数字参数。如果未传递任何参数，系统会显示一个表示状态的标识。传递的数字会显示在徽章中，可能被本地化和格式化。例如，较大的数字可能显示为“99+”。

清除徽章
调用 clearAppBadge 方法将清除徽章，恢复到无状态。

在 Service Worker 中使用
由于 Service Worker 可以在后台运行，我们可以在其中调用 Badging API。例如，通过推送 API，服务器可以发送消息到 Service Worker，更新徽章状态。

// Push API 接收推送消息时更新徽章self.addEventListener('push', event => {
 const unreadCount = event.data.json().unreadCount;
 self.registration.setAppBadge(unreadCount).catch(error => {
   console.error("更新徽章失败", error);
 });});

实用示例

未读邮件计数：

async function updateMailBadge() {
 // 检查 API 是否支持  if (!navigator.setAppBadge) return;

 const unreadCount = await getUnreadMailCount();
 try {
   await navigator.setAppBadge(unreadCount);
 } catch (e) {
   console.warn("设置徽章失败", e);
 }}

玩家轮到行动：

async function showPlayerTurn(playerTurnId) {
 if (playerTurnId === localPlayerId)
   await navigator.setAppBadge();
 else
   await navigator.clearAppBadge();}

安全与隐私考量

Badging API 的设计考虑了隐私和安全。由于该 API 仅提供写操作，并没有读取先前设置的徽章值的功能，因此减少了被滥用为存储或指纹机制的风险。操作系统或用户代理可能会清除徽章，以符合系统一致性或其他需求。

总结

Badging API 为 Web 开发人员提供了一种简洁高效的方式来通知用户应用状态的变化，而不会过多打扰到用户。通过巧妙地使用这个 API，可以显著提升用户体验，同时保持应用与用户之间的良好互动关系。