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 都不会报错,但徽章不会出现——这是最常被忽略的坑。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法:
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 可检测是否被拒
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!










