如何处理与服务工作者index.html文件的缓存？

Question

我目前正在使用create-react-appdefault-service-worker开发一个渐进式web应用程序。

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

构建时，输出javascript文件使用contenthash来确保当JS文件中的内容发生变化时，文件名也会发生变化。在没有服务工作程序的情况下运行时，这会成功地关闭缓存。

但是，当使用create react appservice worker时，所有静态资产包括我的索引。html文件被缓存。这意味着旧的索引。html正在向用户提供，其中包括一个

我已弹出并修改了该网页包。配置。jsWorkboxWebpackPlugin以排除我的索引。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不会作为索引脱机工作。html文件不由服务人员提供，也不会从脱机连接提供。

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

非常感谢。




Answer 1

服务工作者仅在生产环境中启用，例如npm运行构建的输出。建议不要在开发环境中启用脱机first service worker，因为如果使用以前缓存的资产，并且不包括您在本地所做的最新更改，可能会导致失败。

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

Answer 2

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

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

Answer 3

我在一个应用程序外壳架构上工作，其中服务人员缓存应用程序外壳，并为后续请求返回它。为了破坏缓存，我还对appshell进行了版本化，比如appshell-[hash]。因此，下一次当散列更改时，服务人员将缓存并提供新的应用程序外壳，丢弃旧的应用程序外壳。