html5无“badging api”标准接口；实现角标需分三层：css页面内角标（position+aria-label）、notification api桌面通知（需用户授权）、平台原生能力（如ios apns、android setappbadge）。
HTML5 没有名为 “Badging API” 的标准接口——这是常见误解。真正能实现桌面级角标（即应用图标右上角的红点或数字）的，是各操作系统的原生能力，网页本身无法直接控制手机桌面图标上的 badge。所谓“Badging API”，实际是开发者对三类技术的统称：CSS 视觉角标（页面内）、Notification API（桌面通知）、以及平台专属的桌面角标设置能力（需原生环境支持）。
CSS 做好页面内的视觉角标
这是最可控、最通用的第一步，用于在按钮、头像、导航图标等元素上显示未读数：
- 用 span 包裹数字，父容器设 position: relative，角标用 position: absolute 定位
- 避免用 % 或 em 写 top/right 值，统一用 px 或 rem 防止字体缩放时偏移
- 若父容器有 overflow: hidden（如圆形头像、卡片），角标会被裁掉，需改用 transform: translate 或外层包裹布局
- 数字为 0 或空时，**不渲染角标元素**（而非 display: none），保障可访问性与焦点流干净
- 给宿主元素（如购物车按钮）加 aria-label="购物车，2 件商品"，并随数字变化更新 aria-live="polite"
用 Notification API 实现桌面弹窗提醒
这是让用户离开页面也能收到消息的核心能力，适用于 Chrome、Firefox、Edge 等现代浏览器：
- 必须运行在 HTTPS 或 localhost 环境下
- 权限请求必须由用户手势触发（如点击“开启提醒”按钮），不能自动调用 Notification.requestPermission()
- 授权后使用 new Notification(title, { body, icon, tag }) 创建通知；tag 可去重，避免重复弹窗
- 添加 onclick 事件，点击后聚焦标签页或跳转到消息页：window.focus(); location.href = '/messages';
- 页面失焦时才发通知：监听 document.onblur 和 document.onfocus，结合 visibilityState 判断是否在后台
真机桌面角标？得靠平台原生能力
网页 JS 无法直接修改 iOS/Android/HarmonyOS 桌面 App 图标的 badge，必须借助对应平台机制：
- iOS：只能通过 APNs 推送中的 badge 字段控制，前端无权写入
- Android：PWA 可尝试 navigator.setAppBadge()（Chrome 89+），但兼容性差；主流方案仍依赖 TWA 或 Cordova 插件调用原生 API
- 鸿蒙（HarmonyOS）：需在 entry/src/main/ets 中调用 setBadgeNumber()，网页侧仅能通过 JSBridge 通信触发
- 桌面端（Windows/macOS）PWA：目前无统一标准，部分 Chromium 浏览器支持 navigator.setAppBadge()，但需 manifest.json 显式声明 "badges": true
别漏掉标题栏闪烁这种轻量方案
当 Notification 不可用或用户拒绝权限时，可用视觉+听觉辅助提醒：
- 监听 document.hidden，未读消息到达时定时切换 document.title（如 "● 新消息 | MyApp" → "MyApp"）
- 配合 AudioContext 播放极短提示音（注意需用户交互后首次启用）
- 页面获得焦点时自动清除闪烁、关闭通知、标记已读
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
