vite-plugin-pwa无法缓存Fetch请求，iOS离线无法获取数据

数据老陈

2026-7-13

问题排查与解决方案

1. 确认在线时已成功缓存目标资源

NetworkFirst策略的核心前提是在线状态下已经成功请求过该接口，Service Worker才会把响应存入缓存。如果离线前从未加载过这个接口，缓存池是空的，自然无法读取到数据。

验证方式：在线状态下打开浏览器DevTools（Chrome/Firefox的「Application > Cache Storage」），查看mypwa-cache-v3中是否存在https://jsonplaceholder.typicode.com/todos的缓存条目。

2. 补充`cacheableResponse`过滤有效响应

默认情况下，Workbox的NetworkFirst会缓存所有响应（包括错误状态码），如果在线时请求失败过，错误响应会被存入缓存，离线时就会返回错误结果。需要添加配置只缓存成功响应：

workbox: {
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/jsonplaceholder\.typicode\.com\/todos/i,
      handler: "NetworkFirst",
      options: {
        cacheName: "mypwa-cache-v3",
        cacheableResponse: {
          statuses: [200] // 仅缓存HTTP状态码为200的响应
        }
      },
    },
  ],
}

3. 适配iOS的Service Worker限制

iOS WebKit对PWA的Service Worker有特殊限制：

开发环境限制：开启devOptions.enabled: true时，iOS可能不会持久化缓存，建议构建生产版本（yarn build）后部署到HTTPS服务器测试，或用工具将本地生产构建目录暴露为HTTPS地址测试。
必须添加到主屏幕：iOS上只有添加到主屏幕的PWA才会完全启用Service Worker的离线功能，浏览器内直接打开的PWA可能不触发离线缓存逻辑。

4. 确保请求URL与正则完全匹配

检查实际发起的Fetch请求URL是否和urlPattern正则完全匹配：

如果请求带参数（比如https://jsonplaceholder.typicode.com/todos?userId=1），当前正则/^https:\/\/jsonplaceholder\.typicode\.com\/todos/i无法匹配，需要调整为/^https:\/\/jsonplaceholder\.typicode\.com\/todos(\?.*)?/i以兼容带参数的情况。