SPA项目中Workbox预缓存index.html未更新，能否改用NetworkFirst策略？

好问题！先直接给你结论：直接给预缓存的index.html改用NetworkFirst策略不是最优解，甚至会破坏PWA的离线可用性，不过你遇到的「更新后客户端仍加载旧index.html」的问题，有更合适的解决思路。

问题根源 #

你目前手动指定了workbox.precaching.precache([ '/index.html' ])，而Workbox的预缓存机制默认是CacheFirst策略，且预缓存资源的更新完全绑定到service worker文件本身：只有当service worker的内容发生变化时，浏览器才会触发预缓存资源的更新检查。

但你手动添加的/index.html没有哈希标识，Workbox无法自动检测到它的内容变化（比如引用了新的app.yyyyyyyy.js）。所以即使你更新了应用并重新构建，旧的service worker依然会返回缓存里的旧index.html，导致页面加载旧脚本。

为什么NetworkFirst不是好选择？ #

如果给index.html强制使用NetworkFirst策略，每次用户访问页面都要先发起网络请求获取最新的index.html——这直接违背了PWA离线可用的核心优势，一旦用户处于离线状态，页面就无法加载。

正确的解决方案 #

方案1：让Workbox自动生成预缓存清单（推荐） #

对于Vue+Webpack的项目，最省心的方式是使用workbox-webpack-plugin的InjectManifest或GenerateSW插件，它会自动扫描所有构建产物（包括带哈希的js、css，以及index.html），生成包含资源哈希的预缓存清单并注入到service worker中。

这样做的好处是：

• 当index.html内容更新（比如引用了新的脚本），预缓存清单里的哈希值会变化，触发service worker文件内容改变
• 浏览器检测到service worker更新后，会自动下载新的预缓存资源（包括最新的index.html），下次页面加载时激活新的service worker，用户就能拿到最新内容

你只需要移除手动的workbox.precaching.precache([ '/index.html' ])，让插件自动处理预缓存即可。

方案2：给导航路由使用StaleWhileRevalidate策略 #

如果你需要手动控制导航路由的缓存策略，可以移除手动预缓存index.html的代码，改用StaleWhileRevalidate策略处理导航请求：

// 移除原来的 workbox.precaching.precache([ '/index.html' ])
workbox.routing.registerNavigationRoute(
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'html-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 1, // 只保留最新的一个index.html版本
      }),
    ],
  }),
  {
    blacklist: [
      /.*\.css/,
      /.*\.(?:png|jpg|jpeg|svg|gif)/,
      /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/
    ]
  }
);

这个策略会优先返回缓存里的index.html保证快速响应，同时在后台请求最新版本并更新缓存，用户下次访问时就能拿到新内容，同时兼顾了离线可用性和更新及时性。

额外注意点 #

确保你的service worker更新机制正常工作：浏览器会在页面加载时检查service worker的变化，但有时可能需要手动触发更新（比如在应用内添加「检查更新」按钮，调用navigator.serviceWorker.register().then(reg => reg.update())）。

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