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

Is there a way to add badge notifications using progressive web apps (PWA)?

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

我已经知道我可以发送推送通知(就像任何常规应用程序一样),如以下博客 post 中所述: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最近推出了一个post解释所谓的“Badging for App Icons”,这很令人兴奋:

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

更新 - 2018 年 9 月 28 日

相关链接:

正如 Josh Lee 在 中指出的那样,chromium 团队对此主题进行了一些讨论。

查看 discussion:

FYI, the notification indicators are being pushed to M-71.

Thanks for the heads up. That's fine for us because while we hope to have this testable behind a flag in M70, there's no way we'll be launching the API before (at least) M71.

所以,也许,至少目前,似乎无法为 PWA 添加徽章通知,但也许将来我们可以做到这一点。

目前无法使用 PWA 执行此操作。尽管如果开发人员喜欢该功能,我希望它会在某个时候出现。

2020 年更新:

The App Badging API works on Windows, and macOS, in Chrome 81 or later. It has also been confirmed to work on Edge 84 or later. Support for Chrome OS is in development and will be available in a future release of Chrome. On Android, the Badging API is not supported. Instead, Android automatically shows a badge on app icon for the installed web app when there is an unread notification, just as for Android apps.

原回答:

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

(所以,10 月下旬的测试版(schedule)。没有其他 activity 的错误可以证实这一点,但大多数 WebAPK 工作都没有针对 public 错误, FWIW.)

根据 Google Developers it is a work in progress and available as an origin trial or through the flag #enable-experimental-web-platform-features on Chrome 73 and there is also a demo Windows 和 MacOS。

关于其他平台:

Android is not supported because it requires you to show a notification, though this may change in the future.

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

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

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