navigator.setAppBadge 是 Chromium 桌面端 PWA 的角标 API，需满足安装、通知权限和后台状态条件；须 try/catch 封装并降级处理；数值来自推送、轮询或本地同步；仅支持 0–99 整数，需防抖且仅对已安装 PWA 生效。
navigator.setAppBadge 是 Web App Manifest 规范中用于在桌面端（Windows、macOS）为 PWA 应用图标添加角标（badge）的 API，可用于直观展示未读消息数、待处理任务、订单状态等实时业务指标。但它本身不提供“异步实时”能力，需与后端推送、定时拉取或事件监听机制配合使用。以下是关键实现路径：
一、确认浏览器与平台兼容性
该 API 目前仅在 Chromium 内核浏览器（Chrome ≥ 93、Edge ≥ 93）的桌面端生效，且需满足以下条件：
- PWA 已正确安装（manifest.json 中包含
"display": "standalone"或"display": "minimal-ui"） - 用户已授予通知权限（
Notification.permission === 'granted'），否则部分系统（如 Windows）会静默忽略角标设置 - 应用处于后台或非聚焦状态时角标才可见（前台时通常不显示，这是系统级行为）
二、封装安全可靠的角标更新逻辑
由于 setAppBadge 可能抛出异常（如权限不足、API 不可用），应包裹 try/catch 并降级处理：
async function updateAppBadge(count) {
if (!('setAppBadge' in navigator)) return;
try {
if (count > 0) {
await navigator.setAppBadge(count);
} else {
await navigator.clearAppBadge(); // 清除角标（Chrome 94+ 支持）
}
} catch (err) {
// 例如：DOMException: Badge setting is not allowed
console.warn('Failed to set app badge:', err);
// 可选：fallback 到本地存储 + 页面内徽标提示
}
}
三、对接实时业务状态源
角标数值需来自真实业务上下文，常见方式有：
-
服务端推送（推荐）：通过 Web Push API 接收后台消息，在
service worker的push事件中调用self.registration.setAppBadge()（注意：此为 Service Worker 环境下的同名方法，需在 SW 中注册 push 事件） -
长连接轮询：前端使用
fetch或WebSocket监听订单/消息变更，触发updateAppBadge() - 本地状态同步：当用户在其他设备完成操作（如手机端读取消息），通过 IndexedDB + BroadcastChannel 通知桌面端刷新角标
四、避免常见陷阱
实际落地中易被忽略的关键点：
- 角标只支持整数（
0–99），超出自动截断为 99；0 或负数会清除角标（非设为 0） - 频繁调用（如每秒多次）可能被浏览器节流，建议做防抖（debounce）或合并更新
- macOS Ventura+ 对角标样式有限制（仅圆点或数字，不支持自定义颜色/形状），设计时需保持语义清晰
- 测试时务必使用已安装的 PWA（而非地址栏访问），否则 API 调用无效
不复杂但容易忽略：角标不是 UI 组件，而是系统级提示信号。它的价值在于“一眼感知变化”，因此业务逻辑要确保数值准确、更新及时、语义明确——比如用「3」表示 3 条未读客服消息，而不是模糊的「有新动态」。
