徽章 API

W3C 工作草案

关于本文档的更多详情
本版本:
https://www.w3.org/TR/2025/WD-badging-20250922/
最新发布版本:
https://www.w3.org/TR/badging/
最新编辑草案:
https://w3c.github.io/badging/
历史:
https://www.w3.org/standards/history/badging/
提交历史
编辑:
Marcos Cáceres (Apple公司)
Diego González (微软)
前编辑:
Matt Giuca (谷歌公司) - 截止于
Jay Harris (谷歌公司) - 截止于
反馈:
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"
表示徽章已设置,但不包含特定值。
数字值:
表示徽章已设置为大于 0 的数值。

已安装的 Web 应用程序具有一个关联的徽章,其被初始化为 "nothing"

用户代理可以自行决定(重新)设置应用程序的徽章为 "nothing"(例如,遵循系统惯例)。

4. 徽章显示

当应用程序的徽章被设置时,用户代理或操作系统应该将应用程序的徽章与用户操作系统中应用程序的主要图标表示一起显示(例如,作为设备主屏幕上应用程序图标顶部的一个小覆盖层)。

用户代理可以要求用户明确许可才能设置徽章。当用户代理需要此类许可时,它应该将许可授予与“notifications”许可绑定。

徽章设置"flag"时,用户代理或操作系统应该显示一个带有非特定符号的指示器(例如,一个彩色的圆圈)。

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

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

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. 可访问性注意事项

本节为非规范性内容。

Issue 24:增加可访问性章节

如果浏览器负责徽章的展示,则应可以定义一些可访问性指南。

10. 一致性

除标记为非规范性的章节外,本规范中的所有编写指南、图示、示例和注释均为非规范性内容。规范其他部分均为规范性内容。

本文档中的关键字可以必须应当不应 按照 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年6月24日。W3C 工作草案。URL: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/