navigator.setappbadge仅在chrome 89+、edge 91+、opera 75+等chromium系浏览器中支持，firefox和safari完全不支持；需pwa已安装、manifest设display为"standalone"或"minimal-ui"、https环境且用户已授通知权限。
setAppBadge 方法在哪些浏览器里能用
setAppBadge 是 Badging API 的核心方法，但目前仅在 Chromium 系列浏览器（Chrome 89+、Edge 110+、Opera 75+）中稳定支持，Firefox 和 Safari 完全不支持。Safari 甚至没有暴露 navigator.setAppBadge 这个属性，调用前必须先检测存在性，否则会直接抛出 TypeError。
实操建议：
- 永远先判断：
if ('setAppBadge' in navigator)，再调用 - 在 PWA 环境下测试：确保页面已通过
register()安装为 PWA，且用户已授予通知权限（Notification.permission === 'granted'），否则 Chrome 会静默失败，不报错也不显示角标 - 桌面端和 Android Chrome 行为一致；iOS 不支持，连检测都会返回
false
调用 setAppBadge 时传什么参数才有效
setAppBadge 只接受一个可选参数：number（整数），传 null 或省略表示清除角标。传非数字（如字符串 "3"、NaN、undefined）会被忽略，图标无变化，也不会报错。
常见错误现象：
- 写了
navigator.setAppBadge("5")—— 没反应，因为类型不对 - 写了
navigator.setAppBadge(0)—— 显示 “0”，不是清除；要清空得用navigator.setAppBadge(null) - 在未聚焦的标签页中调用 —— 大部分 Chromium 版本仍会生效，但部分旧版本（如 Chrome 91）要求页面处于前台
推荐写法：navigator.setAppBadge(Math.max(1, unreadCount) || null)，避免传 0 或负数。
为什么设置了却看不到角标
最常被忽略的是 PWA 安装状态和桌面快捷方式来源。Badging API 只对“从主屏幕/开始菜单启动的 PWA 实例”生效，普通浏览器标签页或从地址栏打开的页面即使满足其他条件，也不会显示角标。
验证步骤：
- 确认 manifest.json 中有
"display": "standalone"或"display": "minimal-ui" - 用 Chrome 访问站点 → 点地址栏右侧「安装」按钮 → 完成安装 → 从桌面/启动器打开该图标
- 检查是否启用了桌面通知：在 Chrome 设置中搜索「通知」→ 找到你的站点 → 确保设为「允许」
- 清除角标后，重启 PWA（完全关闭再打开），有些版本缓存 badge 状态达数秒
与 Notification API 的 badge 字段有什么区别
manifest.json 里的 badge 字段（如 "badge": "icon-badge.png"）是静态资源路径，用于生成通知弹窗左上角的小图标，和 setAppBadge 控制的桌面应用图标右上角数字完全无关。两者命名相似，但作用域、触发时机、数据类型都不同。
容易混淆点：
- 改了 manifest 的
badge图片，不影响setAppBadge(3)显示的数字 -
setAppBadge不能设置图片，只能设数字或清空；也不能控制通知弹窗里的任何 badge - 如果你同时用了 Web Push，想让推送通知带数字，得在服务端 payload 里加
badge字段（如{"badge": "images/badge.png"}），这和navigator.setAppBadge没关系
真正难调试的是：所有条件看似满足，但角标只在某些设备上出现——大概率是系统级限制（比如 Windows 11 的「小组件」开关关了，或 Android 启用了第三方启动器，绕过了原生 PWA 角标机制）。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
