PWA应用图标角标在Windows生效，Android端失效问题咨询

核心问题分析 #

你在service-worker.js中直接使用navigator.setAppBadge是错误的——Service Worker的全局上下文没有navigator对象，Windows Chrome可能因特殊兼容逻辑临时生效，但Android Chrome严格遵循规范，导致代码执行失败。除此之外还有几个Android特有的限制条件：

解决方案 #

• 修正Service Worker代码：通过clients API获取激活的客户端窗口，在客户端上下文调用角标方法：

self.addEventListener('push', (event) => {
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then(clientList => {
        clientList.forEach(client => {
          if ('setAppBadge' in client) {
            client.setAppBadge(6);
          }
        });
      })
  );
});

• 确保PWA已安装到主屏幕：Android上只有安装到主屏幕的PWA才支持角标显示，浏览器内打开的PWA无法触发该功能。
• 检查Launcher兼容性：原生Android默认Launcher（如Pixel系列）在Android 11及以上才支持应用角标，部分第三方Launcher（如小米、OPPO的定制Launcher）可能需要单独开启角标权限，建议用Nova Launcher等通用Launcher测试排除兼容性问题。
• 验证Chrome版本：Web Badging API在Android Chrome 81及以上版本才支持，确保设备上的Chrome版本达标。
• 检查应用通知权限：进入Android设置→应用→你的PWA应用→通知，确认「允许通知」和「在图标上显示标记」（或类似名称的选项）已开启。

内容的提问来源于stack exchange，提问作者Adam Stroka