Badging API：PWA 应用角标与状态提示

---

title: Badging API：PWA 应用角标与状态提示

keywords:

• Badging API
• setAppBadge
• clearAppBadge
• 角标
• 安装应用

description: 介绍 Badging API 的应用角标设置与清理、与通知/后台任务协作、兼容与平台差异，并给出示例与参考。

categories:

• 应用软件
• 编程开发

---

概述

Badging API 允许已安装的 PWA 在操作系统层显示角标，提示未读消息或任务状态。不同平台支持度存在差异，需特性检测与回退。

示例

if ('setAppBadge' in navigator) {
  await navigator.setAppBadge(3)
  // 清理角标
  await navigator.clearAppBadge()
}

工程建议

• 状态驱动：与消息/任务状态联动；避免过度提示造成干扰。
• 兼容：桌面与移动平台支持不一；不支持时使用应用内提示。
• 隐私与合规：避免泄露敏感计数信息；用户可控制开关。

参考与验证

• MDN Badging API（实验性）文档：https://developer.mozilla.org/docs/Web/API/Badging_API
• web.dev Badging 指南：https://web.dev/articles/badging-api
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/badging/