徽章 API

W3C 工作草案

关于本文档的更多详情
此版本:
https://www.w3.org/TR/2025/WD-badging-20251006/
最新发布版本:
https://www.w3.org/TR/badging/
最新编辑草案:
https://w3c.github.io/badging/
历史:
https://www.w3.org/standards/history/badging/
提交历史
编辑:
Jay Harris (Brave Software, Inc.)
Marcos Cáceres (Apple Inc.)
Diego González (Microsoft)
前任编辑:
Matt Giuca (Google Inc.) - 至
反馈:
GitHub w3c/badging (拉取请求, 新建议, 开放议题)

摘要

本规范定义了一个 API,允许已安装的 Web 应用 设置应用徽章,通常会显示在设备主屏幕或应用程序坞上的应用图标旁边。

本文档状态

本节描述了本文档在发布时的状态。当前 W3C 的出版物列表以及本技术报告的最新修订版可在 W3C 标准与草案索引中找到。

本文档仍在进行中。

本文档由 Web Applications 工作组 以工作草案的形式,根据 推荐规范流程发布。

以工作草案形式发布并不意味着 W3C 及其成员的认可。

本文档为草稿文件,随时可能被更新、替换或废止。除作为工作进展外,不应作为其他引用来源。

本文档由遵循 W3C 专利政策 的小组制作。 W3C 维护着 与本小组交付成果相关的专利公开列表 ,该页面也包含专利披露的说明。任何个人知晓含有 必要声明 的专利,须根据 《W3C 专利政策》第6节进行披露。

本文档受 2025年8月18日 W3C 流程文件管辖。

1. 徽章的负责任使用

本节为非规范性内容。

徽章可能会导致部分用户产生通知疲劳。因此,作者应当仅在真正需要引起用户注意或行动的状态下使用徽章,避免将其用于营销或吸引参与等目的。

避免频繁变化的数值,以减少用户的干扰或认知负担。

为了支持无法感知徽章或已在系统层级禁用徽章的用户,建议作者在应用界面中通过可访问的模式呈现相同的状态(例如,清楚标记的应用内状态指示器)。

2. 用法示例

本节为非规范性内容。

示例 2:在应用图标上显示未读数量
async function updateMailBadge() {
  // 检查 API 是否支持。
  if (!navigator.setAppBadge) return;

  const unreadCount = await getUnreadMailCount();

  // 尝试设置应用徽章。
  try {
    await navigator.setAppBadge(unreadCount);
  } catch (e) {
    // 徽章不支持,或者用户阻止了应用设置徽章。
  }
}

徽章可能会显示在操作系统中的应用图标上。如果在同一个应用内多次调用 API 来设置清除徽章,以最新调用为准,并且即使应用关闭后也可能继续显示。

示例 2:在应用图标上显示就绪状态
async function showPlayerTurn(playerTurnId) {
  if (playerTurnId === localPlayerId)
    await navigator.setAppBadge();
  else
    await navigator.clearAppBadge();
}

在某些操作系统上,设置徽章可能需要用户授权。在这种情况下,开发者需要先查询 "通知"权限状态,然后再设置徽章。如果未获得授权,开发者需要通过 Notification.requestPermission() 进行权限申请。

示例 3:检查权限
async function checkPermission() {
  permission = await navigator.permissions.query({
    name: "notifications",
  });
  const button = document.getElementById("permission-button");
  if (permission.state === "prompt") {
    // 提示用户授权。
    button.hidden = false;
    button.addEventListener("click", async () => {
      await Notification.requestPermission();
      checkPermission();
    }, { once: true });
    return;
  }
  button.hidden = true;
}

3. 模型

徽章旨在作为一种机制,供已安装的 Web 应用程序通知用户有某些可能需要他们注意的新活动,或作为指示少量信息(例如未读计数)的一种方式。

一个徽章可以具有以下之一:

特殊值 "nothing"
表示当前没有设置徽章。当 徽章为此值时,用户不会看到任何视觉指示器。
特殊值 "flag"
表示徽章已设置且应展示给用户,但不包含具体数值。与 "nothing"不同,用户会看到徽章存在的视觉指示器。
number值:
表示徽章已设置为大于0的数值。

已安装的网页应用有一个关联的徽章,初始值为"nothing"。操作系统负责存储和管理徽章值,用户代理则作为中介,将徽章的变化通知给操作系统。

用户代理可以根据自身决定(例如遵循系统规范)(重新)设置应用的徽章为 "nothing"

4. 徽章显示

当应用的徽章被设置时,用户代理或操作系统应该 在用户操作系统中应用的主要图标展示旁,显示该应用的徽章(例如,在设备主屏幕上的应用图标上方以小型覆盖方式展示)。

用户代理可以要求用户明确授权设置徽章。当用户代理需要此类 权限时,应该将授权与 "通知"权限绑定。

徽章设置"flag"时,用户代理或操作系统应该显示一个非特定符号的指示器(例如,一个彩色圆圈)。如果平台不支持展示"flag"徽章,用户代理应该使用最接近的可用方式显示徽章以表示徽章存在(例如显示值“1”),而不是完全清除徽章。

徽章的值被设置"nothing"时, 用户代理或操作系统应该 清除 徽章,即不再显示该徽章。

徽章设置数字时,用户代理或操作系统:

4.1 平台限制的实现注意事项

不同操作系统在徽章展示能力上有所不同。最终的展示行为由操作系统控制,并可能因用户设置或系统规范进一步调整。当向操作系统传递徽章信息时,用户代理应该保留徽章请求的语义意图:

5. NavigatorWorkerNavigator 接口扩展

WebIDL[SecureContext]
interface mixin NavigatorBadge {
  Promise<undefined> setAppBadge(
    optional [EnforceRange] unsigned long long contents
  );
  Promise<undefined> clearAppBadge();
};

Navigator includes NavigatorBadge;
WorkerNavigator includes NavigatorBadge;

永不显示应用徽章的用户代理不应 包含NavigatorBadge

5.1 setAppBadge() 方法

当调用setAppBadge()方法时, 用户代理必须设置此应用的徽章contents参数的值。

5.2 clearAppBadge() 方法

当调用clearAppBadge()方法时, 用户代理必须设置此应用的徽章为0。

6. 设置应用徽章

要将平台对象context应用徽章设置为可选的unsigned long long contents值:

  1. globalcontext相关全局对象
  2. 如果globalWindow 对象,则:
    1. documentglobal关联Document
    2. 如果document不是完全激活状态,则返回一个被拒绝的 promise,错误为"InvalidStateError" DOMException
    3. 如果document相关设置对象originthis相关设置对象顶级 origin不是同源域,则返回一个被拒绝的 promise,错误为"SecurityError" DOMException
  3. promise一个新的 promise
  4. 并行执行:
    1. 如果用户代理要求明确授权才能设置应用徽章,则:
      1. permissionState为使用"notifications"获取当前权限状态的结果。
      2. 如果permissionState不是"granted", global上队列一个全局任务,任务源为用户交互任务源, 以rejectpromise,错误为NotAllowedError 并终止此算法。
    2. 根据contents的情况分支:
      未传递contents
      设置badge"flag"
      contents为0:
      设置badge"nothing"
      contents
      设置badgecontents
    3. global上队列一个全局任务,任务源为DOM 操作任务源 ,以resolvepromise,值为undefined
  5. 返回promise

7. 隐私注意事项

该 API 设计为只写。站点无法读取之前设置的徽章值,以确保应用徽章不能被用作存储或指纹识别机制。

8. 安全注意事项

用户代理或操作系统可以根据自身决定清除徽章 ,并遵循任何系统惯例(例如系统重置时)。

用户代理 可以(MAY) 对徽章设置清除进行速率限制,以防止产生干扰性动画并减少资源使用。然而,用户代理 通常应当(SHOULD)将速率限制留给操作系统,因为操作系统能更好地根据系统负载、用户偏好和无障碍需求来决定合适的限流策略。

9. 无障碍性注意事项

应用程序徽章传达可能需要用户注意的状态。由于徽章通常显示在网页内容区域之外(例如,在 dock 中的应用图标上),用户代理需要确保这些信息能够通过平台的无障碍功能和用户偏好进行访问和控制。

9.1 屏幕阅读器兼容性

用户代理应当(SHOULD)通过平台无障碍 API 暴露当前(包括 "flag"数字),以便辅助技术可按需呈现(例如当用户聚焦应用图标时)。

用户代理不应(SHOULD NOT)自动播报徽章变化;而是应当(SHOULD)遵循平台惯例,避免无预期的打断。

9.2 视觉无障碍

本节为非规范性内容。

由于徽章通常由底层平台绘制,视觉表现通常由平台处理。但用户代理和平台仍需考虑:

9.3 平台集成与用户偏好

用户代理应当(SHOULD)与平台无障碍设置及主题集成。

用户代理应当(SHOULD)反映操作系统层级的单应用徽章偏好(例如当操作系统禁用某应用的徽章时)。

10. 一致性

除了标为非规范性的章节外,本规范中的所有创作指南、图表、示例和注释均为非规范性内容。规范中的其他内容均为规范性内容。

本文件中的关键词 MAYMUSTMUST NOTSHOULDSHOULD NOT 应按照 BCP 14 [RFC2119] [RFC8174] 的说明进行解释,仅当这些词以全大写形式出现时,如此处所示。

A. 参考文献

A.1 规范性引用

[appmanifest]
Web 应用程序清单. Marcos Caceres; Kenneth Christiansen; Diego Gonzalez-Zuniga; Daniel Murphy; Christian Liebel. W3C. 2025年9月3日 . W3C 工作草案. URL: https://www.w3.org/TR/appmanifest/
[html]
HTML 标准。Anne van Kesteren; Domenic Denicola;Dominic Farolino;Ian Hickson;Philip Jägenstedt;Simon Pieters。WHATWG。Living Standard。URL:https://html.spec.whatwg.org/multipage/
[infra]
Infra 标准。Anne van Kesteren;Domenic Denicola。WHATWG。Living Standard。URL:https://infra.spec.whatwg.org/
[notifications]
Notifications API 标准。Anne van Kesteren。WHATWG。Living Standard。URL:https://notifications.spec.whatwg.org/
[permissions]
权限(Permissions)。Marcos Caceres;Mike Taylor。W3C。2025年9月26日。W3C 工作草案。网址:https://www.w3.org/TR/permissions/
[RFC2119]
Key words for use in RFCs to Indicate Requirement Levels。S. Bradner。IETF。1997年3月。最佳当前实践。URL:https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words。B. Leiba。IETF。2017年5月。最佳当前实践。URL:https://www.rfc-editor.org/rfc/rfc8174
[WEBIDL]
Web IDL 标准。Edgar Chen;Timothy Gu。 WHATWG。Living Standard。URL:https://webidl.spec.whatwg.org/