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

Question

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

发布新的JavaScript块之一时，我在清除缓存时遇到问题。

[构建时，输出的javascript文件使用contenthash来确保JS文件中的内容更改时，文件名也更改。在没有服务工作者的情况下运行时，这可以成功清除缓存。

但是，当使用create-react-app服务工作者时，包括我的index.html文件的所有静态资产都被缓存。这意味着向用户提供了旧的index.html，其中包括我的旧缓存javascript文件的<script>标记，而不是更新后的contenthash的新标记。

我已经弹出并修改了webpack.config.js WorkboxWebpackPlugin以排除我的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文件，也不能从脱机连接中提供它。

处理此问题的最佳方法是什么？完全脱机访问不是essential，但很高兴，我想知道其他开发人员如何在不完全删除index.html从其缓存中删除index.html的情况下为其索引文件处理服务工作者缓存的“破坏”。服务人员？在包含内容散列的index.html重新标记中，它们是否具有更实用的功能来处理此更改？

谢谢

Answer 1

仅在生产环境中启用服务工作者，例如npm run build的输出。建议您不要在开发环境中启用脱机优先服务工作者，因为当使用先前缓存的资产并且不包括您在本地进行的最新更改时，这会导致失败。

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