如何使用 Service Worker 处理 index.html 文件的缓存？

Question

我目前正在使用create-react-app默认服务工作者开发渐进式 Web 应用程序。

在发布我们的一个 javascript 块的新版本时，我遇到了破坏缓存的问题。

构建时，输出 javascript 文件使用 acontenthash来确保当 JS 文件中的内容更改时，文件名也会更改。在没有 Service Worker 的情况下运行时，这成功地破坏了缓存。

但是，在使用create-react-appService Worker 时，包括我的index.html文件在内的所有静态资产都会被缓存。这意味着旧index.html的将提供给用户，其中包括<script>我的旧缓存 javascript 文件的标签，而不是带有更新的 .js 文件的新文件contenthash。

我已经弹出并修改了 webpack.config.jsWorkboxWebpackPlugin以排除我的 index.html 文件：

 new WorkboxWebpackPlugin.GenerateSW({
      clientsClaim: true,
      exclude: [/\.map$/, /asset-manifest\.json$/, /index.html/],
      importWorkboxFrom: "cdn",
      navigateFallbackBlacklist: [
          // Exclude URLs starting with /_, as they're likely an API call
             new RegExp("^/_"),
          // Exclude URLs containing a dot, as they're likely a resource in
          // public/ and not a SPA route
            new RegExp("/[^/]+\\.[^/]+$")
          ]
        }),

这似乎适当地停止了我的索引文件的缓存，允许它main.[contenthash].js在其脚本标记中包含更新。但是，现在我知道我的 PWA 不能离线工作，因为 index.html 文件不是由服务工作者提供的，也不会从离线连接提供。

处理这个问题的最佳方法是什么？完全离线访问不是必需的，但如果拥有它会很好，我想知道其他开发人员如何在不完全删除服务工作者缓存的 index.html 的情况下为他们的索引文件处理服务工作者缓存的“破坏”？有没有更实用的方法来处理 index.html 中关于带有内容哈希的标签的这种变化？

谢谢

Answer 1

Service Worker 仅在生产环境中启用，例如 npm run build 的输出。建议您不要在开发环境中启用离线优先 Service Worker，因为当使用之前缓存的资源并且不包含您在本地所做的最新更改时，这可能会导致失败。

来自 - https://create-react-app.dev/docs/making-a-progressive-web-app/