Badging API 仅 Chrome 89+ 和 Edge 91+ 支持，Firefox/Safari 不支持；需用 'setAppBadge' in navigator 检测可用性；仅在 PWA（含 Service Worker 且 manifest 中 display 为 standalone/minimal-ui）下生效；桌面端需主屏幕安装且系统开启任务栏徽章；参数必须为大于 0 的整数，设 0 无效，清空须用 clearAppBadge()；无自动同步，需业务侧主动管理；首次调用可能触发权限提示，拒绝后调用静默失败；徽章样式与位置由系统控制，不可自定义。
Badging API 不支持所有浏览器，先查兼容性再写代码
Chrome 89+ 和 Edge 91+ 才支持 navigator.setAppBadge() 和 navigator.clearAppBadge()，Firefox 和 Safari 完全不支持。调用前必须检查是否存在，否则会直接报 TypeError: navigator.setAppBadge is not a function。
- 用
if ('setAppBadge' in navigator)判断可用性，别只靠 User-Agent - PWA 环境下才生效：页面需注册 Service Worker，且在 manifest.json 中设置了
"display": "standalone"或"minimal-ui" - 桌面端 Chrome 有严格限制：只有从主屏幕安装的 PWA 才能显示徽章；Windows/macOS 的任务栏徽章默认关闭，用户需手动开启「在任务栏上显示应用徽章」系统设置
setAppBadge() 只接受正整数，传错类型会静默失败
setAppBadge() 参数不是字符串也不是浮点数，必须是大于 0 的整数。传 0、null、"5"、5.2 都不会报错，但徽章不会出现——这是最常被忽略的坑。
- 正确写法：
navigator.setAppBadge(7) - 错误写法：
navigator.setAppBadge("7")（字符串）、navigator.setAppBadge(0)（清空要用clearAppBadge()） - 业务中建议封装一层：
updateBadge(count) { if (Number.isInteger(count) && count > 0) navigator.setAppBadge(count); }
清除徽章不能用 setAppBadge(0)，必须调 clearAppBadge()
很多开发者以为设为 0 就能隐藏徽章，实际 setAppBadge(0) 是无效操作，徽章会保持上一次有效值。真正清空只能靠 navigator.clearAppBadge()。
- 未安装 PWA 时调用
clearAppBadge()不会报错，但无效果 - Service Worker 失效或页面离线时，调用仍会成功返回 Promise，但徽章状态不会同步更新（本地缓存可能滞后）
- 推荐组合使用：
if (count > 0) await navigator.setAppBadge(count); else await navigator.clearAppBadge();
徽章数字不自动同步，需自行管理状态和触发时机
Badging API 不感知业务逻辑，它只是“画一个数字”。消息未读数变化、订单待处理数更新，都得由你监听并主动调用 API —— 没有自动绑定机制。
立即学习“前端免费学习笔记（深入）”；
- 常见遗漏点：切换标签页后忘记重置徽章（比如用户已读消息，但页面没触发
clearAppBadge()） - 避免频繁调用：连续多次
setAppBadge()可能被节流，建议做防抖或合并计数 - 注意权限模型：首次调用会触发浏览器权限提示（仅 Chrome），用户拒绝后后续调用将被静默忽略，且无 API 可检测是否被拒
