android - 为渐进式 Web 应用程序 (PWA) 添加 "badge notification"

Question

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

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

但是，在主屏幕上有应用程序后，我想向用户添加一个“提示”，让他知道他必须访问该应用程序。一个很好的方法是做类似“徽章通知”的事情(如下图的whatsapp图标所示)。

Whatsapp 图标上的类似徽章通知

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

Answer 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 一起使用更有意义。 .
支持
Badging API目前支持 Android 的 Chrome 和三星互联网浏览器，部分支持桌面的 Chrome 和 Edge。