navigator.setAppBadge 是 Web App Manifest 规范中用于在桌面端 PWA 图标右上角显示未读数等状态的 API，目前仅 Chrome 89+、Edge 91+ 等 Chromium 浏览器支持，Firefox 和 Safari 不支持；需满足 HTTPS、PWA 已安装、manifest 中 display 为 "standalone" 或 "minimal-ui"、用户已授通知权限等前提条件。
setAppBadge 是什么，现在能用吗
navigator.setAppBadge 是浏览器提供的 Web App 主屏幕图标角标（Badge）更新接口，用于在 PWA 安装后，给桌面/主屏图标右上角显示数字或状态标记，比如未读消息数、待办数量。但它不是所有浏览器都支持：目前仅 Chromium 系列（Chrome 89+、Edge 110+、Opera 75+）原生支持；Firefox 和 Safari 完全不支持，且无明确实现计划。
如果你的 Web App 主要面向 Chrome/Edge 用户，且已配置为 PWA（含 manifest.json + service worker），那可以安全尝试；否则，这个 API 对多数用户无效，别把它当作跨平台通知方案。
调用 setAppBadge 前必须满足的 3 个条件
即使浏览器支持，navigator.setAppBadge 也会静默失败或抛错。常见原因是没过校验：
- 页面必须是 HTTPS（本地
localhost除外） - 用户必须已将网站以「添加到主屏幕」方式安装为 PWA（仅靠
manifest.json不够，需触发安装流程并完成） - 当前页面必须处于前台（即标签页激活状态），后台调用会被忽略（例如从 Service Worker 或
push事件中直接调用无效）
验证是否已安装：可检查 navigator.getInstalledRelatedApps()（兼容性有限），更可靠的是监听 window.addEventListener('appinstalled', ...) 事件做标记。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
怎么安全地设置和清除徽章
setAppBadge 接收一个 number 参数（非负整数），传 0 会清除角标；传 null 或 undefined 会抛 TypeError；传负数会被截断为 0。注意它不会自动节流，频繁调用（如每秒多次）可能被浏览器降频或丢弃。
推荐写法：
if ('setAppBadge' in navigator) {
try {
await navigator.setAppBadge(3); // 设置为 3
} catch (err) {
// 常见错误：NotAllowedError（未安装）、InvalidStateError（后台）、TypeError（参数非法）
console.warn('setAppBadge failed:', err.name);
}
} else {
console.log('setAppBadge not supported');
}
清除徽章统一用 navigator.setAppBadge(0)，不要用空字符串或 null —— 那会报错。
替代方案：没有 setAppBadge 时怎么办
当目标环境不支持或用户未安装 PWA 时，setAppBadge 彻底不可用。此时不能“假装有角标”，而应退回到前端 UI 层面的提示，比如：
- 在页面顶部导航栏加
span.badge显示未读数 - 用
document.title = `(${count}) MyApp`动态改标题（部分桌面系统会同步显示在任务栏） - 结合桌面通知（
Notification.requestPermission）引导用户安装 PWA，再启用角标
特别注意：iOS Safari 完全无视 setAppBadge，也不支持 PWA 主屏幕角标，任何尝试都是徒劳。如果项目强依赖角标反馈，就得接受 iOS 用户只能看到网页内 badge。
