iOS Safari下Next.js PWA偶发请求无响应问题求助

问题详情 #

• 涉及环境：iPhone XS（iOS 14.4）Safari浏览器，基于Next.js开发的PWA应用，使用next-pwa插件，对应Workbox依赖版本：

  "workbox-webpack-plugin": "^6.5.4",
  "workbox-window": "^6.5.4"
  

• 偶发现象：应用无法从服务器获取数据，报错信息如下：

  FetchEvent.respondWith received an error: no-response: no-response
  Fetch API cannot load
  no internet connection

• 附加情况：刷新页面后即可正常获取数据；仅Safari出现该问题，Chrome及Windows设备运行正常；暂无法定位是后端CORS设置还是Safari本身导致。
• 错误截图：
  
  

排查与解决方案方向 #

1. 适配Workbox缓存策略的Safari特性 #

iOS Safari的Service Worker在网络波动或后台闲置后，缓存策略执行可能出现异常。针对no-response错误，可手动为Workbox的NetworkFirst或StaleWhileRevalidate策略设置networkTimeoutSeconds参数，避免短暂网络波动被误判为无连接。

2. 检查CORS配置与Safari兼容性 #

Safari在Service Worker环境下对跨域请求有特殊限制：

• 确保后端CORS响应头包含Access-Control-Allow-Origin（若请求带Credentials，不能用通配符*）、Access-Control-Allow-Methods；
• 确认OPTIONS预请求能正常返回200状态，无超时或权限问题。

3. 修正Service Worker生命周期逻辑 #

iOS Safari会在应用后台闲置时终止Service Worker，重新激活时易出现缓存与网络同步冲突：

• 在Service Worker的activate事件中添加旧缓存清理逻辑，避免过期缓存干扰新请求；
• 确保同一请求仅调用一次respondWith，避免重复处理导致的异常。

4. 优化网络状态检测逻辑 #

Safari的navigator.onLine状态判断可能存在延迟或误报，Workbox默认的离线判断可能依赖此API。可自定义网络检测逻辑，结合请求实际响应状态（如HTTP状态码）而非仅依赖onLine标识，避免误触发离线缓存流程。

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