为渐进式Web应用程序(PWA)添加"徽章通知"

Question

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

我已经知道我可以发送推送通知(例如在任何常规应用中),如以下博客文章中所述:https://developers.google.com/web/fundamentals/getting-started/codelabs/push-通知/？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 定期后台同步 API一起使用更有意义。

支持

Badging API目前在 Android 的 Chrome 和 Samsung 互联网浏览器上受支持，并且在桌面版的 Chrome 和 Edge 上部分受支持。