应用图标的标记

借助 App Badging API，已安装的 Web 应用可以在应用图标上设置应用级标志。

Pete LePage

什么是 App Badging API？

<ph type="x-smartling-placeholder">
</ph> 示例：显示 8 条通知的 Twitter 以及另一个显示旗帜类型标志的应用。 <ph type="x-smartling-placeholder">
</ph> Twitter 示例：显示八条通知，另一个应用则显示一面旗帜 类型标记。

借助 App Badging API，已安装的 Web 应用可以设置应用级标志， 在与应用关联的操作系统特定位置显示 （例如任务栏或主屏幕）。

通过徽章，您可以轻松以不易察觉的方式通知用户有新活动 或表明存在少量 信息（例如未读邮件数）。

标记往往比通知更人性化，并且可以更新 频率高得多，因为它们不会干扰用户。此外， 因为它们不会干扰用户，也不需要用户的许可。

可能的应用场景

可能使用此 API 的应用示例包括：

  • 聊天、电子邮件和社交应用，在你收到新消息时发出提醒，或 显示未读条目数。
  • 效率应用，用于向应用发出信号，指示长时间运行的后台任务（如 图片或视频）。
  • 游戏，用于指示玩家需要采取行动（例如，在国际象棋中，当 轮到玩家了）。

支持

App Badging API 适用于 Windows 和 macOS，以及 Chrome 81 和 Edge 81 或更高版本。 我们正在开发对 ChromeOS 的支持，未来将提供支持 发布。Android 设备不支持 Badging API。相反， Android 会自动在已安装 Web 应用的应用图标上显示标志 这与 Android 应用相同。

试试看

  1. 打开 App Badging API 演示。
  2. 出现提示时，点击安装以安装该应用，或使用 Chrome 菜单进行安装。
  3. 将其作为已安装的 PWA 打开。请注意，它必须作为已安装的 PWA 运行 （在任务栏或程序坞中）。
  4. 点击设置或清除按钮，以设置或清除应用中的徽章 图标。您还可以为标记值提供一个数字。

如何使用 App Badging API

要使用 App Badging API，您的 Web 应用需满足 Chrome 的可安装性标准， 用户必须将其添加到主屏幕

Badge API 由两个 navigator 方法组成：

  • setAppBadge(number)：设置应用的标志。如果提供了值，则将 否则，显示纯白点（或其他 标志）。将number设置为0等同于 调用 clearAppBadge()。
  • clearAppBadge()：移除应用的标志。

两者都会返回可用于错误处理的空 promise。

徽章可以从当前页面设置，也可以从已注册的 Service Worker。要设置或清除徽章（在前景页面或 Service Worker），调用：

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

在某些情况下，操作系统可能不允许您完全展示徽章。 在这种情况下，浏览器将尝试以最佳方式呈现 该设备。例如，由于 Badging API 在 Android 上不受支持 Android 仅会显示点，而不是数值。

请勿对用户代理如何显示标志做任何假设。 某些用户代理可能会采用数字，如“4000”并将其重写为 “99+”。自行达到徽章饱和状态（例如，将其设为“99”） “+”号不会出现。无论实际电话号码是什么，只需拨打 setAppBadge(unreadCount)，并让用户代理处理 并相应地进行显示

虽然 Chrome 中的 App Badging API 要求使用已安装应用，但您不应 根据安装状态调用 Badging API。只需调用 API，因为其他浏览器可能会在其他位置显示徽章。 如果有效，就行了。如果不是，则根本就没有效果。

从 Service Worker 在后台设置和清除标志

您还可以使用 Service Worker 在后台设置应用标志。请执行以下任一操作 通过定期后台同步和/或 Push API 访问网站。

定期后台同步

定期后台同步允许 Service Worker 来定期轮询服务器，这可用于获取更新的状态 并调用 navigator.setAppBadge()。

不过，调用同步的频率并不十分可靠， 并由浏览器自行决定是否调用。

Web 推送 API

利用 Push API，服务器可以向 Service Worker 发送消息， 即使没有前台运行，此类代码也可以运行 JavaScript 代码。因此， 服务器推送可以通过调用 navigator.setAppBadge() 来更新标记。

不过，大多数浏览器（包括 Chrome）都要求显示通知， 。这对部分用途没有问题 用例（例如，在更新 但很难在没有标记的情况下 显示通知。

此外，用户必须向您的网站授予通知权限， 接收推送消息。

结合使用这两者

虽然并不完美，但同时使用 Push API 和定期后台同步 提供了很好的解决方案。高优先级信息通过推送传送 API，显示通知并更新标志。以及较低优先级 无论是在网页处于打开状态还是在已打开的页面上， 或定期进行后台同步

反馈

Chrome 团队希望了解您使用 App Badging API 的体验。

向我们介绍 API 设计

API 中是否有的代码无法按预期运行？或者 是否缺少实现想法的方法或属性？ 您对安全模型是否有疑问或意见？

报告实现存在的问题

您在 Chrome 的实现过程中是否发现了错误？还是 与规范不同？

  • 访问 https://new.crbug.com 提交 bug。请提供尽可能多的细节信息 简单说明一下重现问题，然后将组件设置为 UI>Browser>WebAppInstalls。Glitch 非常适用于以下情况： 轻松、快速地分享成果。

表示对 API 的支持

打算在您的网站上使用 App Badging API？你的公开支持将帮助 让 Chrome 团队确定各项功能的优先级，并向其他浏览器供应商展示 而是为他们提供支持

实用链接

主打照片，作者 Prateek Katyal： 取消启动