如何使用 workbox-cli 实现“先缓存后网络”策略？答案

【问题标题】：How to implement the "cache then network" strategy with workbox-cli?如何使用 workbox-cli 实现“先缓存后网络”策略？
【发布时间】：2021-10-10 06:46:41
【问题描述】：

workbox-cli如何实现“cache then network”策略？

我需要最新的内容，而无需离开网站并再次访问它（这是“重新验证时过时”策略的行为，如果我理解得很好，这是在 workbox-cli 中使用的策略）。

我需要 workbox-cli，因为它不仅处理 service worker 文件的写入，而且最重要的是它负责在每次构建后重命名缓存，手动重命名会很麻烦。

【问题讨论】：

标签： workbox

【解决方案1】：

有几种不同的方式使用workbox-cli，具体取决于您的配置。

其中一部分归结为预缓存和运行时缓存之间的差异。 this blog post 中有一些关于这种区别的背景。

如果您使用workbox-cli 预缓存您的所有内容，并且您希望在检测到任何预缓存内容有更新时自动重新加载您的网络应用程序，您可以按照此“Offer a page reload for users”中的示例进行操作" recipe，但无条件调用window.location.reload()，而不是等待用户确认他们要更新。

【讨论】：

谢谢杰夫！没有重新加载就没有办法更新页面吗？我看到一些使用 Workbox 的应用程序，更新只是页面的细微闪烁，就像没有重新加载（例如：excalidraw.com）：也许是一些 React/SPA 魔术而不是原生 JS 重新加载？
一旦新的预缓存资产可用，基于 waiting 服务工作者的存在，您可以重新运行您拥有的任何客户端渲染逻辑，它将获取新资产 (假设它们具有相同的 URL）。这些实施细节会因您的客户端框架等因素而有很大差异。