clearAppBadge 仅在已安装的 PWA 的 Service Worker 环境中可用，普通 HTML 页面主线程直接调用会报错或静默失败；必须通过 postMessage 通知 Service Worker 执行 self.registration.clearAppBadge()，并事先检查 API 可用性与安装状态。
Badging API 的 clearAppBadge 在 HTML 中根本不可用
直接说结论：clearAppBadge 是一个仅限于 安装后的 PWA（渐进式 Web 应用） 在 Service Worker 环境中调用的 API，无法在普通 HTML 页面的主线程中使用。如果你在 <script> 标签里直接写 navigator.setAppBadge(1) 或 navigator.clearAppBadge()，浏览器会抛出 TypeError: navigator.clearAppBadge is not a function 或静默失败。
为什么主线程调用会失败
这个 API 的设计初衷是让已安装的 PWA 能安全地更新桌面/任务栏图标角标，因此它被严格限制在「安装态 + 安全上下文 + Service Worker 控制范围内」：
- 必须通过
serviceWorker.ready获取到激活的 Service Worker 实例后，再调用其registration.clearAppBadge() - 页面必须已通过
beforeinstallprompt安装为 PWA（即出现在系统应用列表中，且有独立窗口） - HTTP 必须是
https://（localhost 除外），否则navigator.setAppBadge和clearAppBadge均不可见 - Chrome 89+、Edge 91+ 支持，Firefox 和 Safari 完全不支持，且无明确实现计划
正确的调用方式：从 Service Worker 发起
你不能在 HTML 里直接清除角标，但可以通过 postMessage 通知 Service Worker 执行。关键步骤如下：
- 确保你的 PWA 已注册 Service Worker：
navigator.serviceWorker.register('/sw.js') - 在
sw.js中监听主线程消息，并调用self.registration.clearAppBadge() - 主线程触发时发送消息：
navigator.serviceWorker.controller?.postMessage({ type: 'CLEAR_BADGE' })
示例（sw.js 片段）：
立即学习“前端免费学习笔记（深入）”；
self.addEventListener('message', (event) => {
if (event.data.type === 'CLEAR_BADGE') {
self.registration.clearAppBadge().catch(console.error);
}
});
常见错误和兼容性陷阱
即使代码结构正确，以下情况仍会导致 clearAppBadge 无效果或报错：
- 用户从未安装该 PWA —— 此时
self.registration存在，但角标本身就不受控，清除无效 - 调用前未检查 API 是否可用：
if ('clearAppBadge' in self.registration)必须加，否则旧版 Chrome 会报错 - 在非激活的 Service Worker 中调用（比如刚更新 SW 但还没 skipWaiting）—— 需确保用的是
self.registration.active或等待waiting状态处理 - 角标由原生系统（如 iOS 的 Push Notification）设置 —— Badging API 无法干预，只能管理自己设的 badge
真正能稳定清除角标的唯一路径，是确认安装态、走 SW 消息通道、并始终做存在性判断。漏掉任一环节，都会变成“看起来写了，但图标纹丝不动”。
