如何使用服务人员处理 index.html 文件的缓存？

Question

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

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

在构建时，输出的 javascript 文件使用contenthash 来确保当 JS 文件中的内容发生变化时，文件名也会发生变化。在没有 service worker 的情况下运行时，这会成功破坏缓存。

但是，当使用create-react-app service worker 时，包括我的index.html 文件在内的所有静态资产都会被缓存。这意味着旧的index.html 正在提供给用户，其中包含一个<script> 标记到我的旧缓存javascript 文件中，而不是带有更新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 将无法脱机工作，因为 service worker 不提供 index.html 文件，并且不会通过脱机连接提供服务。

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

谢谢

Answer 1

我在一个应用程序外壳架构上工作，其中服务工作者缓存应用程序外壳并将其返回给后续请求。对于 Cache busting，我还对 app shell 进行了版本化，比如 appshell-[hash].html，所以下次当 hash 发生变化时，service worker 将缓存并提供新的 app shell 并丢弃旧的。

Answer 2

使其工作的一种方法是使用“回退到缓存”缓存策略。本质上，当请求文档（例如index.html 文件）时，您首先尝试通过转发获取请求从网络加载它。但是，如果获取请求失败（网络不可用），您将从缓存中提供请求。当然，您还需要更新您的 index.html 的缓存副本，以保留到新副本。

这样，如果网络可用，您将始终获得index.html 的最新版本，否则，将从缓存中提供最新的已知版本。

Answer 3

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

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