移动端浏览器Service Worker JavaScript推送通知功能失效问题求助

兼容性问题修复 #

• 你当前使用的Notification.requestPermission回调式写法属于已废弃的旧规范，移动端Chrome 94已优先适配Promise式调用逻辑，旧回调写法在Android Go系统上存在兼容bug，替换为如下写法：

// 先确保Service Worker已完成注册
if ('serviceWorker' in navigator && 'Notification' in window) {
  window.addEventListener('load', async () => {
    try {
      // 注册Service Worker，注意scope要匹配你的站点路径
      const registration = await navigator.serviceWorker.register('/test/sw.js', {
        scope: '/test/'
      });
      // 用Promise方式申请通知权限
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        // 等待SW激活完成再触发通知
        await navigator.serviceWorker.ready;
        registration.showNotification('Notification with ServiceWorker');
      }
    } catch (err) {
      // 捕获错误便于排查，可通过Chrome远程调试查看移动端报错
      console.error('通知初始化失败:', err);
    }
  });
}

必查项排查 #

• 系统权限校验：先确认Android系统设置中，已给Chrome开启通知权限，同时关闭Chrome的电池优化、后台活动限制，Android Go系统默认会限制非常用APP的后台唤醒，会导致Service Worker无法正常触发通知。
• Service Worker状态校验：通过Chrome远程调试功能连接移动端，进入Application面板查看Service Worker的注册、激活状态，确认SW的scope覆盖/test/路径，没有出现注册失败、冗余SW实例的问题。
• 触发时机校验：你当前的逻辑是刷新页面后立即触发通知，移动端资源加载速度慢于桌面端，很可能出现触发通知时Service Worker还未完成激活的情况，建议将通知触发逻辑放在SW的activated事件回调中执行，避免时序问题。
• 权限状态校验：调用权限申请接口后，打印Notification.permission的值，确认实际返回的是granted，部分移动端浏览器会在用户未主动操作时静默拒绝权限申请，确保权限申请逻辑是绑定在Set notification按钮的点击事件中触发，不要在页面加载时自动申请。

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