有没有办法使用渐进式网络应用程序 (PWA) 添加徽章通知？

Question

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

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

我还知道我可以通过创建一个简单的清单文件 (https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android) 将 PWA 添加到主屏幕。

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

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

---

更新 - 2018 年 12 月 15 日

Google 最近发布了一篇文章，解释了所谓的“应用图标标记”，这非常令人兴奋：

https://developers.google.com/web/updates/2018/12/badging-api

更新 - 2018 年 9 月 28 日

相关链接：

• https://bugs.chromium.org/p/chromium/issues/detail?id=719176&desc=2
• https://bugs.chromium.org/p/chromium/issues/detail?id=685159
• https://github.com/mgiuca/badging/blob/master/explainer.md
• https://docs.google.com/document/d/1AmX53h-gk8wN7LPMi_Mq7fsIMgsMKRD6zKa1Ymxxvvc/edit#

正如 Josh Lee 在 Is there a way to add badge notifications using progressive web apps (PWA)? 中指出的那样，Chromium 团队对此主题进行了一些讨论。

看着discussion：

仅供参考，通知指示器正在推送到 M-71。

和

感谢您的提醒。这对我们来说很好，因为虽然我们希望在 M70 的标志后面有这个可测试的，但我们不可能在（至少）M71 之前启动 API。

所以，也许，至少目前，似乎不可能为 PWA 添加徽章通知，但也许将来我们可以做到。

Answer 1

以防万一有人来这里寻找答案

现在 chrome 和基于 chromium 的浏览器支持它。 这里是imp链接了解更多

• W3C Badging API Explainer

• Demo App（可安装的 PWA）

• Demo App Source Code

• Web.dev in short know how

Answer 2

2020 年更新： check this nikhil mehta's answer below for the latest information：

App Badging API 适用于 Windows 和 macOS 的 Chrome 81 或更高版本。它也被证实可以在 Edge 84 或更高版本上工作。对 Chrome 操作系统的支持正在开发中，并将在 Chrome 的未来版本中提供。在 Android 上，不支持 Badging API。相反，当有未读通知时，Android 会自动在已安装网络应用的应用图标上显示一个徽章，就像 Android 应用一样。

原答案：

看起来这是在路线图上，可能在 M71 的旗帜后面。

• crbug.com/719176
• crbug.com/685159

（因此，10 月下旬的测试版 (schedule)。没有其他关于该错误的活动可以证实这一点，但大部分 WebAPK 工作都不是针对公共错误，FWIW。）

Answer 3

根据Google Developers，这是一项正在进行的工作，可作为原始试用版或通过 Chrome 73 上的标志 #enable-experimental-web-platform-features 提供，还有适用于 Windows 和 MacOS 的 demo。

关于其他平台：

不支持 Android，因为它要求您显示通知，但将来可能会改变。

虽然没有关于 Safari 或 OSX 的信息。

Answer 4

目前无法使用 PWA 执行此操作。虽然如果开发人员喜欢这个功能，我希望它会在某个时候。