如何在Nuxt PWA Workbox中预缓存未访问页面和缓存运行时GET API请求

预缓存所有页面结构的解决方案 #

@nuxtjs/pwa 的 Workbox 模块默认仅缓存用户已访问过的页面资源，要实现全量页面预缓存，需手动配置preCaching参数：

• 静态路由场景，直接在nuxt.config.js的pwa配置项中声明所有需要预缓存的页面路径：

// nuxt.config.js
export default {
  pwa: {
    workbox: {
      preCaching: [
        '/',
        '/about',
        '/product/list'
        // 把所有需要预缓存的页面路径依次补充在这里
      ]
    }
  }
}

• 动态生成路由场景，如果你已经通过generate.routes配置了全量静态路由，可以直接复用该路由数组赋值给preCaching，无需手动逐个录入。

运行时API GET请求缓存不生效的解决方案 #

你当前的配置缺少两个必填参数：handler缓存策略声明，以及urlPattern需要传入正则类型而非字符串。修改后的配置如下：

runtimeCaching: [
  {
    // 改为正则表达式类型
    urlPattern: new RegExp(`${WEBSITE.URL}/api/.*`),
    // 声明缓存策略：数据更新频率低选CacheFirst，更新频率高选NetworkFirst
    handler: 'CacheFirst',
    strategyOptions: {
      // 单独指定缓存名称方便后续调试排查
      cacheName: 'api-response-cache',
      cacheableResponse: { statuses: [0, 200] },
    },
  },
]

额外排查注意项：

• 开发环境默认不开启Workbox缓存，要测试需额外配置workbox.dev = true，测试完成后建议关闭避免开发阶段缓存干扰。
• 跨域API需要响应头携带正确的CORS允许规则，否则无法读取响应状态，会导致缓存失败。

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