在应用图标上显示徽章

只有当 PWA 安装在其主机操作系统上时，才会支持应用徽章。徽章显示在应用图标上，该图标仅在应用安装后才存在。

在桌面操作系统上，徽章仅在 Windows 和 macOS 上受支持，并且仅当 PWA 从 Chrome 或 Edge 安装时才受支持。虽然徽章 API 在 Linux 上的基于 Chromium 的浏览器上受支持，但徽章不会在此操作系统上显示。

桌面上的 Safari 和 Firefox 不支持徽章 API，也不支持安装 PWA。

从 iPadOS 16.4 开始，iOS 和 iPadOS 上的 Safari 支持徽章。Android 上运行的基于 Chromium 的浏览器不支持徽章 API。相反，Android 会在 PWA 的应用图标上自动显示徽章，以指示是否有未读通知，就像它对 Android 应用所做的那样。

在学习如何使用徽章之前，请考虑以下最佳实践，以确保您的应用以最有效和最实用的方式为用户使用徽章。

为了确保徽章 API 在用户的浏览器和操作系统中 受支持，以防止抛出 JavaScript 错误，请在使用 API 之前检查支持情况

if (navigator.setAppBadge) {
  // The API is supported, use it.
} else {
  // The API is not supported, don't use it.
}

不要仅仅依靠徽章来告知用户新内容的可用性。支持徽章 API 的浏览器可能安装在不支持显示徽章的操作系统上。例如，虽然 Chrome 支持徽章 API，但徽章不会出现在 Linux 上已安装的应用程序图标上。

虽然 iOS 和 iPadOS 上支持通知徽章，但徽章只有在应用程序获得通知权限后才会显示。要请求通知权限，请调用 Notification.requestPermission() 方法

Notification.requestPermission().then((result) => {
  console.log(result);
});

或者，您可以使用 权限 API 检查用户是否之前已授予通知权限。

与通知一样，徽章在谨慎使用时可以成为重新吸引用户使用您的应用的非常有效的方法。确保仅使用徽章来指示对用户而言重要的新内容。

确保实时更新您的应用程序徽章。这意味着更新徽章计数以反映用户实际上还有多少新项目需要使用，并在没有新项目时清除应用徽章。

例如，如果电子邮件客户端应用在后台收到新邮件，它应该更新其徽章以显示收件箱中未读邮件的正确数量，并可能过滤掉来自其他文件夹（如垃圾邮件文件夹）的邮件。可以通过使用服务工作者中的 navigator.setAppBadge() 方法来 在后台更新徽章。

一旦用户启动应用程序并开始阅读邮件，电子邮件客户端应用应该相应地更新其徽章，方法是使用新的未读邮件计数调用 navigator.setAppBadge()，或者在没有未读邮件时调用 navigator.clearAppBadge()。

当您的应用收到新内容并在应用图标上添加徽章时，请确保在用户启动应用时突出显示这些新内容。

例如，如果电子邮件客户端应用在应用图标徽章上显示未读邮件计数，则在打开应用时，这些邮件应以粗体或某种方式突出显示。

要在您的 PWA 应用图标上显示一个显示未读邮件数量的徽章，请使用 Navigator.setAppBadge() 方法

// Check for support first.
if (navigator.setAppBadge) {
  // Display the number of unread messages.
  navigator.setAppBadge(numberOfUnreadMessages);
}

您还可以通过省略计数参数或将其设置为 0 来使用相同方法显示一个空徽章

// Check for support first.
if (navigator.setAppBadge) {
  // Just display the badge, with no number in it.
  navigator.setAppBadge();
}

要删除应用图标上的徽章，请使用 Navigator.clearAppBadge() 方法

// Check for support first.
if (navigator.clearAppBadge) {
  // Remove the badge on the app icon.
  navigator.clearAppBadge();
}

徽章对于在用户尚未使用应用时重新吸引他们使用您的应用很有用。这意味着您的应用必须能够即使在未运行时也能更新其徽章。

PWA 可以使用以下机制在后台更新并显示、更新或隐藏其徽章

推送 API

即使应用未运行，PWA 也可以使用此 API 从服务器接收消息。大多数浏览器要求在收到推送消息时显示通知。对于某些用例（例如，在更新徽章时显示通知）来说，这很好，但它使得在不显示通知的情况下巧妙地更新徽章变得不可能。此外，用户必须授予您的网站通知权限才能接收推送消息。有关更多信息，请参阅 ServiceWorkerRegistration: showNotification() 方法。

后台同步 API

PWA 可以使用此 API 在检测到稳定的网络连接时在后台运行代码。

Web 定期后台同步 API

PWA 可以使用此 API 在定期的时间间隔内在后台运行代码。

以下是一个服务工作者代码示例，演示如何侦听服务器的推送消息并更新应用徽章以反映未读邮件计数

// Listen to "push" events in the service worker.
self.addEventListener("push", (event) => {
  // Extract the unread count from the push message data.
  const message = event.data.json();
  const unreadCount = message.unreadCount;

  // Set or clear the badge.
  if (navigator.setAppBadge) {
    if (unreadCount && unreadCount > 0) {
      navigator.setAppBadge(unreadCount);
    } else {
      navigator.clearAppBadge();
    }
  }
  // It's obligatory to show the notification to the user.
  self.registration.showNotification(`${unreadCount} unread messages`);
});

• 如何创建应用徽章
• 应用图标的徽章
• 使用徽章、通知和推送消息重新吸引用户
• Codelab：构建推送通知服务器