生产环境使用web-push实现推送通知异常，Chrome仅展示默认后台更新消息

我之前也碰到过完全一样的问题！本地测试一切正常，一上生产Chrome就只弹那个默认的后台更新提示，折腾了好几天才把坑都踩完，给你分享几个最可能的原因和解决办法：

• Payload解析失败导致Handler终止
  你的代码里用了event.data.json()，但如果推送服务器发送的Payload不是有效的JSON，或者没有设置正确的Content-Type: application/json，这里就会抛出错误，直接导致整个Push handler中断，Chrome就会 fallback 到默认的后台更新通知。
  建议给代码加上try-catch捕获错误，同时检查推送请求的Payload格式：

  self.addEventListener("push", (event) => {
    try {
      if (!event.data) return;
      const payload = event.data.json();
      const title = payload.title || "New Notification";
      event.waitUntil(
        self.registration.showNotification(title, { body: payload.body })
      );
    } catch (err) {
      console.error('Push处理出错:', err);
      // 可选：自定义错误情况下的通知
      event.waitUntil(
        self.registration.showNotification("系统通知", { body: "有新的更新内容" })
      );
    }
  });
  

  同时去检查你的推送服务端代码，确保发送请求时设置了正确的Content-Type，并且Payload没有JSON语法错误（比如多余的逗号、未闭合的引号）。

• 旧版Service Worker未更新
  生产环境浏览器可能会缓存旧的Service Worker文件，导致你新写的Push handler根本没生效。可以试试这几个办法：

  • 修改sw.js的内容（比如加个注释版本号// v2），让浏览器识别到文件更新；
  • 注册Service Worker时加上updateViaCache: 'none'参数，避免浏览器缓存旧文件：

    navigator.serviceWorker.register("/sw.js", { updateViaCache: 'none' });
    

  • 在Chrome DevTools的Application -> Service Workers面板里，手动点击“Update”按钮强制更新，同时勾选“Update on reload”方便调试。

• HTTPS环境问题
  Chrome要求生产环境必须是有效的HTTPS（不能是自签名证书）才能正常运行Service Worker和接收推送。可以确认下生产环境的证书是否有效，有没有浏览器安全提示。

• Payload大小超出限制
  Chrome对Push消息的Payload大小有限制（大概4KB左右），如果你的Payload太大，event.data可能无法正常解析，甚至直接为null，导致handler提前return。可以把Payload精简一下，或者把大内容放到API里，通知里只带个链接让用户点击查看。

内容来源于stack exchange