NuxtJS PWA离线状态下无法正常加载iframe的问题求助

根因说明 #

你目前遇到的离线状态iframe加载失败，核心原因是@nuxtjs/pwa模块默认的Workbox缓存匹配规则会将完整URL（包括查询参数）作为缓存key，你iframe加载的/3d/index.html每次都带不同的ref查询参数，即使/3d目录下的静态文件已经存在于workbox-runtime缓存中，也会因为参数不匹配导致缓存命中失败，最终抛出页面无法访问的错误。

修复步骤 #

1. 修改nuxt.config.js的Workbox配置 #

在pwa模块配置项中新增/3d路径的缓存规则，开启忽略查询参数的匹配模式：

export default {
  // 其他现有配置保留
  pwa: {
    workbox: {
      runtimeCaching: [
        {
          urlPattern: /^\/3d\/.*/i,
          handler: 'CacheFirst',
          options: {
            cacheName: '3d-static-cache',
            ignoreSearch: true, // 关键配置：匹配时忽略所有查询参数
            cacheableResponse: {
              statuses: [200]
            }
          }
        }
      ]
    }
  }
}

如果你的3d目录下的所有静态资源都是打包时就已经存在的固定文件，还可以将其加入预缓存列表，避免首次访问才触发缓存的问题：

workbox: {
  precache: ['/3d/index.html', '/3d/**/*.js', '/3d/**/*.css'], // 可根据你的实际文件类型调整匹配规则
  // 上面的runtimeCaching配置可同时保留
}

2. 清理旧缓存测试 #

修改配置重新部署后，按以下步骤验证效果：

• 打开浏览器开发者工具，进入「应用」标签页，清空站点所有缓存和已注册的Service Worker
• 在线访问站点，等待Service Worker注册完成、所有静态资源缓存完毕
• 切换到离线模式，打开产品详情页即可正常加载iframe中的3d静态页面

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