PWA应用Safari端Service Worker加载失败但已激活的问题排查

问题背景 #

PWA已成功注册Service Worker，但部分Safari用户遇到错误提示：Script https://app.com/service-worker.js load failed，不过开发者工具中能看到SW处于激活状态，目前暂未影响体验，但担心后续出现隐患。当前SW基于Workbox开发，启用SW仅为实现Android端「添加到主屏幕」功能，不需要任何缓存逻辑。

可能原因 #

1. Safari的SW加载机制特性：Safari在页面后台唤醒、刷新时，会尝试重新校验SW脚本，若此时出现临时网络波动或缓存策略冲突，会抛出加载失败错误，但已激活的SW仍能正常工作。
2. 冗余空操作触发异常检查：代码里的precacheAndRoute(self.__WB_MANIFEST.filter(() => false))和cache.addAll([])这类无意义的空操作，可能触发Safari内部的校验逻辑，导致错误日志输出。
3. Workbox的兼容性细节：Workbox部分模块在Safari中存在非致命的加载告警，不会影响核心功能，但会输出错误提示。

解决方案 #

1. 简化Service Worker代码（推荐） #

既然仅需满足PWA「添加到主屏幕」的基础要求（只要SW存在并激活即可），可以完全移除Workbox依赖和所有缓存相关逻辑，保留最精简的SW结构：

/* eslint-disable no-restricted-globals */

self.addEventListener('install', () => {
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener('message', (event) => {
  if (event.data?.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

简化后既满足PWA的SW要求，又避免了不必要的逻辑触发Safari的错误提示。

2. 调整现有代码的冗余逻辑 #

如果不想移除Workbox，可修改现有代码中的无效操作：

• 移除precacheAndRoute(self.__WB_MANIFEST.filter(() => false))，仅保留变量声明以满足CRA的PWA要求：

  // 仅保留变量声明，不执行预缓存逻辑
  self.__WB_MANIFEST;
  

• 删除安装事件中的cache.addAll([])，空数组调用无实际意义，还可能触发Safari的异常检测：

  self.addEventListener('install', (event) => {
    self.skipWaiting();
    // 移除空缓存操作
  });
  

3. 忽略非致命错误 #

如果错误仅为日志提示且不影响功能，可暂时忽略并持续监控：Safari的这类加载失败错误大多是临时情况，不会影响SW的激活状态，也不会阻止「添加到主屏幕」功能的触发。

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