iOS 17更新后Angular PWA在Safari中崩溃问题求助

问题现象 #

Angular PWA在iOS 17更新后频繁崩溃，清除Safari缓存后仅能正常运行数分钟，关闭Safari后PWA快捷方式无法使用，偶发报错：

FetchEvent.respondWith received an error: TypeError: Internal error

修复步骤 #

• 调整Service Worker缓存策略
  iOS 17对Service Worker的缓存校验更严格，需避免激进的缓存规则。检查ngsw-config.json中的缓存组配置，确保maxAge和maxSize设置合理，不要无限缓存资源；同时保证缓存的资源返回有效的HTTP状态码（如200、304），避免无效响应触发内部错误。

• 升级Angular PWA相关依赖
  Angular团队针对iOS 17兼容性问题发布了补丁，将@angular/pwa和@angular/service-worker升级至16.2.0及以上的稳定版本：

  npm install @angular/pwa@latest @angular/service-worker@latest
  

  升级完成后重新构建生产包：

  ng build --prod
  

• 修复Fetch事件的错误处理逻辑
  在Service Worker的Fetch事件处理中添加异常捕获，避免未处理的错误导致崩溃。示例代码：

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          return response || fetch(event.request).catch(() => caches.match('/offline.html'));
        })
        .catch(error => {
          console.error('Fetch 异常:', error);
          return caches.match('/offline.html');
        })
    );
  });
  

  确保即使出现内部错误，也能返回有效的兜底响应，防止Service Worker终止。

• 校验Web Manifest配置
  检查manifest.webmanifest中的start_url和scope配置，确保路径正确且无解析问题，推荐配置：

  {
    "start_url": "/",
    "scope": "/",
    "display": "standalone"
  }
  

• 强制更新Service Worker
  修改ngsw-config.json中的appData版本号，触发Service Worker的强制更新，确保iOS设备加载最新的Service Worker：

  {
    "appData": {
      "version": "1.0.1"
    }
  }
  

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