17370845950

pwa 的 `navigator.setappbadge()` 在 windows/macos chrome 中可用，但 android chrome 完全不支持该 api；系统会自动为有未读通知的已安装 pwa 显示徽章，开发者无需手动调用。

Web 应用徽章（App Badging API）是一项用于在主屏幕应用图标上显示数字或提示标记的 Web API，常用于通知提醒场景。其核心方法 navigator.setAppBadge() 在桌面端（Windows、macOS）的 Chrome 81+ 和 Edge 81+ 中已稳定支持，但在 Android 平台的 Chrome 浏览器中明确不支持——这不是配置缺失或权限问题，而是平台级限制。

根据 Chrome 官方文档：

“The App Badging API works on Windows, and macOS, in Chrome 81 and Edge 81 or later. Support for ChromeOS is in development… On Android, the Badging API is not supported. Instead, Android automatically shows a badge on app icon for the installed web app when there is an unread notification, just as for Android apps.”

MDN 兼容性表格也明确标注 Chrome for Android 为 黄色“Partial support”状态，并注明仅限 Windows/macOS。

✅ 正确做法（Android 适配）：

• 确保你的 PWA 已通过 beforeinstallprompt 安装到主屏幕（即作为“独立应用”运行）；
• 发送符合标准的 Web Push 通知（需 service worker + showNotification()），且 不关闭通知（保持 tag 唯一且未被 close()）；
• Android 系统将自动为存在未读通知的 PWA 图标添加红点徽章（无数字），行为与原生 Android App 一致。

⚠️ 注意事项：

• 不要尝试在 Android 上调用 navigator.setAppBadge() —— 该方法返回 undefined 或直接抛错，且无法降级处理；
• 可通过特性检测安全调用：

  if ('setAppBadge' in navigator && typeof navigator.setAppBadge === 'function') {
  navigator.setAppBadge(3).catch(console.warn); // 仅在桌面端执行
  } else {
  console.log('App Badging API not supported (e.g., on Android)');
  }

• 若需跨平台统一提示体验，建议结合 UI 内部角标（如消息气泡）、通知横幅及系统通知声音/震动，而非依赖图标徽章。

? 总结：Android 不是“没配置好”，而是设计如此。拥抱平台原生行为——让系统自动管理徽章，专注提升通知内容质量与用户交互路径，才是 PWA 在移动生态中的最佳实践。