Badge API 是 Web App Manifest 规范中用于 PWA 安装后显示角标的标准化接口，仅 Chromium 93+ 支持且需已安装为 PWA；通过 navigator.setAppBadge(n) 设置数字或清零，需主动同步业务状态并做兼容降级。
Badge API 是 Web App Manifest 规范中用于在 PWA 安装后（如桌面任务栏、Dock 或移动主屏幕图标）显示小红点或数字角标的标准化接口，它不依赖推送服务或后台同步，而是由页面主动调用，实现轻量、可控的状态提示。
确保环境与基础支持
Badge API 目前仅在 Chromium 内核浏览器（Chrome 93+、Edge 93+、Opera 80+）中稳定支持，且仅对已安装为 PWA 的应用生效。需确认以下三点：
- 你的应用已通过
manifest.json正确注册，并满足“可安装性”条件（HTTPS、有 192×192 和 512×512 图标、有start_url和display: "standalone"或"minimal-ui"） - 用户已完成“添加到桌面”操作（即已安装为 PWA）
- 当前页面处于前台或后台但未被完全冻结（部分 Android 系统可能限制后台调用）
使用 navigator.setAppBadge() 设置角标
该方法接受一个非负整数参数，表示角标数字；传入 0 或省略参数将清除角标（显示为空白圆点或隐藏，取决于系统策略）。
示例代码：
// 显示数字 3
if ('setAppBadge' in navigator) {
navigator.setAppBadge(3).catch(console.error);
}
// 清除角标（推荐显式传 0）
navigator.setAppBadge(0).catch(err => {
// 常见错误：未安装为 PWA、权限被拒、跨域 iframe 中调用等
if (err.name === 'InvalidStateError') {
console.warn('PWA 尚未安装，角标不可用');
}
});
结合业务状态做异步更新
Badge 不自动关联数据，需你主动监听状态变化并触发更新。常见模式包括：
- 监听 WebSocket 或 EventSource 消息，收到新通知时递增计数并调用
setAppBadge - 在 IndexedDB 或 localStorage 中维护未读消息数，每次读取后同步更新角标
- 在 Service Worker 中接收推送后，通过
clients.matchAll()找到前台页面并postMessage触发角标更新（注意：SW 本身不能直接调用setAppBadge）
注意：避免高频调用（如每秒多次），系统可能限流；建议做防抖或合并更新。
兼容性降级与体验优化
对不支持 Badge API 的环境，可配合其他方式维持提醒感知：
- 在页面标题中插入 ? 或 [3] 等字符（
document.title = `[${count}] 我的应用`） - 在导航栏或侧边栏 UI 中高亮“消息”入口
- 利用
Notification.permission和showNotification()提供更明确的系统级提醒（需用户授权）
无需额外权限申请——Badge API 默认可用，但若被用户在系统设置中禁用角标（如 Windows 设置 > 通知 > 应用图标徽章），则调用静默失败，应捕获错误并降级。
