badging api仅用于系统级应用图标标识，如pwa标签页favicon、桌面任务栏或android启动器图标右上角徽章，不作用于dom元素；页面内徽章需用ui组件或css+js实现。
Badging API 本身不作用于任意 DOM 元素，它专用于**应用级图标标识**——即浏览器标签页 favicon、PWA 安装后的主屏幕图标，或桌面/移动系统任务栏中的应用入口。它无法直接给页面内的按钮、头像或导航项添加徽章。若你希望在 DOM 元素（如头像、消息图标）上显示未读提示，应使用 UI 组件方案（如 Ant Design 的 Badge），而非 Badging API。
明确 Badging API 的适用范围
Badging API（navigator.setAppBadge() 和 navigator.clearAppBadge()）仅影响操作系统层级的应用标识：
- 在桌面端：显示在 PWA 窗口标题栏 favicon 右上角，或任务栏应用图标右上角；
- 在 Android：部分厂商（如 Samsung、Sony）支持显示在启动器图标上（需适配其私有机制）；
- 在 iOS/iPadOS：不支持 Badging API，苹果未开放该能力；
- 对普通网页标签页（非安装的 PWA）：多数浏览器忽略调用，或静默失败。
为 DOM 元素添加徽章的正确方式
要在页面中某个元素（如头像、Tab Bar 项、消息按钮）动态显示数字或红点，请使用前端框架或原生 CSS + JS 实现：
- 使用 Ant Design、Element Plus、Chakra UI 等组件库的
Badge组件，通过count或dot属性控制显示； - 手动实现：包裹目标元素，用绝对定位的
span模拟徽章，绑定数据响应式更新（例如 Vue 的v-if+:class，React 的useState）； - 小程序环境（微信/支付宝）：调用
wx.setTabBarBadge（仅限 Tab Bar）、uni.setTabBarBadge或自定义组件模拟； - 避免混淆：不要尝试用
navigator.setAppBadge(5)去“驱动”页面内某个按钮的角标——两者无关联，也不会同步。
何时可结合使用（系统徽标 + DOM 徽章）
典型协同场景是“双层提示”：
- 用户收到新消息 → 前端更新聊天按钮上的
Badge（DOM 层，即时可见）； - 同时调用
navigator.setAppBadge(1)→ 若用户切到其他窗口或最小化浏览器，系统级徽标仍能提醒； - 用户点击消息按钮并读取全部内容后 → 同时清除 DOM Badge 和调用
navigator.clearAppBadge()。
兼容性与降级处理
Badging API 目前仅在 Chromium 内核浏览器（Chrome ≥ 89、Edge ≥ 89、Opera ≥ 75）中稳定支持，Firefox 和 Safari 尚未实现。使用前务必检测：
if ('setAppBadge' in navigator) {
navigator.setAppBadge(3);
} else {
console.warn('Badging API not supported');
// 启用 DOM Badge 作为唯一提示
}
生产环境建议始终以 DOM 徽章为默认方案，Badging API 仅作增强补充，不承担核心通知职责。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
