徽章 API

W3C 工作草案

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

摘要

本规范定义了一个 API,使已安装的 Web 应用程序能够设置应用程序徽章,通常显示在设备主屏幕或应用程序停靠栏的应用程序图标旁边。

本文档状态

本节描述了本文档在发布时的状态。W3C 当前发布的文档列表以及本技术报告的最新修订版可以在 W3C 技术报告索引中找到,网址为 https://www.w3.org/TR/。

这是一个正在进行的工作。

本文件由Web 应用程序工作组作为使用推荐流程的工作草案发布。

发布为工作草案不代表 W3C 及其成员的认可。

这是一个草案文档,可能会随时被其他文档更新、替换或作废。因此,引用本文件作为除工作草案以外的文献是不合适的。

本文件由遵循 W3C 专利政策的工作组制作。W3C 维护了一份与本工作组的交付物有关的任何专利声明的公开列表;该页面还包括有关专利声明的指示。任何个人在知道专利时,且认为该专利包含“基本声明”时,必须根据 W3C 专利政策第 6 节的规定披露信息。

本文件受 2021 年 11 月 2 日的 W3C 处理文档管理。

1. 使用示例

本节是非规范性的。

示例 1: 显示应用图标上的未读邮件数
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;
}

2. 模型

徽章旨在作为 已安装的 Web 应用程序 向用户通知存在某些需要他们关注的新活动的一种机制,或者用来指示少量信息,例如未读计数。

徽章可以具有以下 之一:

特殊值 "nothing"
表示当前没有设置任何徽章 设置
特殊值 "flag"
表示徽章已设置,但不包含具体值。
数值
表示徽章已设置为大于 0 的数值。

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

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

3. 显示徽章

当应用程序的徽章被设置时,用户代理或操作系统应当在用户操作系统中显示应用程序的徽章,通常作为设备主屏幕上应用程序图标上的小覆盖物。

用户代理可以要求用户提供明确的权限设置徽章。当用户代理要求此类权限时,应当将权限授予绑定到“通知”权限。

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

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

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

4. 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

4.1 setAppBadge() 方法

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

4.2 clearAppBadge() 方法

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

5. 设置应用徽章

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

  1. globalcontext相关全局对象
  2. 如果 globalWindow 对象,则:
    1. documentglobal关联的 Document
    2. 如果 document 不是完全活动的,则返回一个被拒绝的 promise,并带有一个 "InvalidStateError" DOMException
  3. promise一个新的 promise
  4. 并行执行
    1. 如果 this相关设置对象来源this相关设置对象顶级来源不同,则global 上排入一个全局任务DOM 操作任务源,以拒绝 promise,并带有一个 "SecurityError",然后终止此算法。
    2. 如果用户代理需要明确的权限设置应用徽章,则:
      1. permissionState 为通过 "通知" 获取当前权限状态的结果。
      2. 如果 permissionState 不是 "granted",则global 上排入一个全局任务用户交互任务源,以拒绝 promise,并带有一个 NotAllowedError,然后终止此算法。
    3. 根据 contents 进行切换,如果:
      contents 未被传递:
      设置 badge"flag"
      contents 为 0:
      设置 badge"nothing"
      contents
      设置 badgecontents
    4. global 上排入一个全局任务DOM 操作任务源,以解析 promise,返回undefined
  5. 返回 promise

6. 隐私考虑

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

7. 安全考虑

用户代理或操作系统可以在其自行决定的情况下清除一个徽章,并遵循任何系统约定(例如,在系统重置时)。

Issue 68: 限制设置徽章的频率

@grorg 提出于 webkit-dev:

我还希望看到一些规范文本描述浏览器如何忽略快速连续执行的多个设置/清除操作(例如,用于创建闪烁的徽章) - 可能限制为每分钟一次徽章操作之类的?

我们应该解决这个问题;这可能是一个建议而不是强制要求,因为它与用户代理的 UI 相关。

我希望看到某种“最终一致性”保证,即最终写入徽章的值最终将是用户看到的值。这可以防止这种情况:你先设置“3”,然后 10 秒后设置“12”,由于频率限制,“12”从未被设置,所以用户一直看到“3”。相反,规则应该是“如果 UI 在 > N 秒内未更新,则将其更新为新值。否则,设置一个计时器在 N - (上次更新以来的时间)秒后将 UI 更新为新值。”

8. 可访问性考虑

本节是非规范性的。

Issue 24: 添加可访问性部分

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

9. 一致性

与标记为非规范性的部分一样,本规范中的所有作者指南、图表、示例和注释均为非规范性的。本规范中的其他所有内容均为规范性的。

本文档中的关键字 可以必须应当,和 不应当 应按照 BCP 14 [RFC2119] [RFC8174] 的描述进行解释,仅当它们以此处显示的全部大写形式出现时。

A. 参考文献

A.1 规范性引用

[appmanifest]
Web 应用程序清单。Marcos Caceres; Kenneth Christiansen; Matt Giuca; Aaron Gustafson; Daniel Murphy; Anssi Kostiainen。W3C。2023 年 5 月 2 日。W3C 工作草案。URL:https://www.w3.org/TR/appmanifest/
[html]
HTML 标准。Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters。WHATWG。现行标准。URL:https://html.spec.whatwg.org/multipage/
[infra]
Infra 标准。Anne van Kesteren; Domenic Denicola。WHATWG。现行标准。URL:https://infra.spec.whatwg.org/
[notifications]
通知 API 标准。Anne van Kesteren。WHATWG。现行标准。URL:https://notifications.spec.whatwg.org/
[permissions]
权限。Marcos Caceres; Mike Taylor。W3C。2022 年 12 月 20 日。W3C 工作草案。URL:https://www.w3.org/TR/permissions/
[RFC2119]
在 RFC 中用于表示需求级别的关键字。S. Bradner。IETF。1997 年 3 月。最佳当前实践。URL:https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
RFC 2119 关键字中大写与小写的歧义。B. Leiba。IETF。2017 年 5 月。最佳当前实践。URL:https://www.rfc-editor.org/rfc/rfc8174
[WEBIDL]
Web IDL 标准。Edgar Chen; Timothy Gu。WHATWG。现行标准。URL:https://webidl.spec.whatwg.org/