PWA 的主屏幕应用程序在 Android 系统中不显示徽章

Question

我们有一个网站，可以在 Android 和 iOS 系统中添加（安装）主屏幕。在“应用程序”中请求通知并且在两个系统中都运行良好。现在我们想向应用程序添加“徽章”功能。我们只是向应用程序添加了一个简短的 JavaScript 代码片段，如下所示：

if(navigator.setAppBadge){
    alert("Badge Supported.");
    navigator.setAppBadge(3);
} else {
    alert("No Badges.");
}

两个系统中的测试结果分别是： iOS（iPhone 8 Plus、iOS 16.7.4）： 警报显示“支持徽章”，返回主屏幕我们可以看到应用程序图标上有一个显示“3”的徽章。如下图所示：

Android（搭载 Android 14 的 Pixel 6 Pro 和搭载 Android 10 的三星 Galaxy Note 7）： 警报显示“支持徽章”，但主屏幕应用程序图标不显示徽章。两台设备均不显示。如下图所示：

请问有人知道如何让两个系统都正常显示徽章吗？谢谢！

Answer 1

您可以点击此链接了解如何演示如何在应用程序的图标上添加徽章： https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Display_badge_on_app_icon