为渐进式 Web 应用程序 (PWA) 添加“徽章通知”答案

【问题标题】：Add "badge notification" for progressive web application (PWA)为渐进式 Web 应用程序 (PWA) 添加“徽章通知”
【发布时间】：2022-04-05 21:38:49
【问题描述】：

我正在开发一个渐进式 Web 应用程序 (PWA)，它最终会向用户发送通知。

我已经知道我能够发送推送通知（就像在任何常规应用中一样），如以下博客文章所述：https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/?hl=en-us。

但是，在主屏幕上有应用程序后，我想向用户添加一个“提示”，让他知道他必须访问该应用程序。一个很好的方法是执行“徽章通知”之类的操作（如下图的 whatsapp 图标所示）。

Whatsapp 图标上的类似徽章通知

是否可以使用渐进式 Web 应用程序添加这种行为？

【问题讨论】：

标签： android web badge progressive

【解决方案1】：

我相信您正在寻找的是Badging API。

要使用 Badging API，您可以执行类似的操作

if('setAppBadge' in navigator && 'clearAppBadge' in navigator){
  // set badge
  navigator.setAppBadge(badgeCount).catch(error => {
    // handle error
  });

  // remove badge
  navigator.clearAppBadge().catch(error => {
  // handle error
  });
}

另外，将它与Web Periodic Background Synchronization API 一起使用更有意义。

支持

Android 的 Chrome 和三星互联网浏览器目前支持Badging API，桌面的 Chrome 和 Edge 部分支持。

【讨论】：