Service Worker无法订阅PushManager：标签页关闭后推送失效问题

你遇到的这个情况太常见了——标签页活跃时推送正常，一关就失效，而且Service Worker里的PushManager订阅还出问题，我帮你梳理几个关键排查点和解决办法：

1. 先把VAPID密钥转换的坑填上 #

你代码里用的convertDataURIToBinary(appKey)很容易出问题，PushManager要求的是标准Uint8Array格式的公钥，给你一个经过验证的转换函数，替换掉原来的试试：

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

很多时候订阅失败，就是因为密钥转换不标准，浏览器不认。

2. 确保Service Worker的注册路径和作用域正确 #

• 如果你的Service Worker文件（fileSw）不是放在网站根目录，注册时一定要明确指定作用域为根路径，不然它管不到全局的推送事件：

navigator.serviceWorker.register(fileSw, { scope: '/' })

• 另外别忘了，除了localhost调试，Service Worker和Push API必须在HTTPS环境下运行，浏览器会直接阻止非HTTPS环境的订阅请求。

3. 必须在Service Worker里监听push事件 #

就算订阅成功了，要是Service Worker里没处理push事件，标签页关闭后还是收不到通知。赶紧在你的Service Worker文件里加上这段核心代码：

self.addEventListener('push', function(event) {
  const payload = event.data ? event.data.json() : { title: '新通知' };
  event.waitUntil(
    self.registration.showNotification(payload.title, {
      body: payload.body,
      icon: '/your-icon.png',
      // 可以加更多通知选项，比如点击跳转的url
      data: { url: '/' }
    })
  );
});

这个事件是后台推送的入口，没有它，Service Worker收到推送也不知道怎么展示给用户。

4. 给订阅流程加上错误捕获，排查具体问题 #

你现在的代码没有错误处理，订阅失败了也不知道为啥。加上try/catch打日志，能快速定位问题：

navigator.serviceWorker.register(fileSw, { scope: '/' })
  .then(async function(registration) {
    try {
      // 先检查通知权限
      const permission = await Notification.requestPermission();
      if (permission !== 'granted') {
        throw new Error('用户拒绝了通知权限');
      }

      const appKey = '{!! env('APP_KEY') !!}';
      const convertedVapidKey = urlBase64ToUint8Array(appKey);
      const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: convertedVapidKey
      });
      // 这里记得把订阅信息发给后端保存，后续推送要用
      console.log('订阅成功:', subscription);
    } catch (error) {
      console.error('订阅失败原因:', error);
      // 常见错误：用户拒权、密钥无效、非HTTPS环境
    }
  })
  .catch(error => console.error('Service Worker注册失败:', error));

5. 确认通知权限是granted状态 #

订阅前一定要确保用户已经授权通知权限，没有granted权限的话，PushManager根本不会完成订阅流程，上面的代码已经加了权限检查，你可以重点看看这部分的日志。

总结一下：你现在的问题大概率是VAPID密钥转换错误、Service Worker作用域不对，或者没监听push事件。按照上面的步骤逐一排查，应该就能解决标签页关闭后收不到推送的问题了。

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