progressive-web-apps - PWA 是否必须使用 Workbox 进行预缓存？

Question

我加了几个workbox.routing.registerRoute使用 staleWhileRevalidate到我的应用程序，到目前为止它已经通过了 PWA 下的大多数灯塔测试。我目前根本没有使用预缓存。我的问题是，这是强制性的吗？如果没有预缓存，我会错过什么？ workbox.routing.registerRoute已经缓存了我需要的一切。谢谢!

Answer 1

没有什么是强制性的。 :-)

对所有 Assets 以及 HTML 使用 stale-while-revalidate 绝对是一种合法的方法。这意味着您不必在构建过程中做任何特殊的事情，例如，这在某些情况下可能会很好。

每当您使用从缓存中读取的策略时，无论是通过预缓存还是 stale-while-revalidate，都会有某种重新验证步骤，以确保您最终不会无限期地提供过时的响应。

如果您使用 Workbox 的预缓存，重新验证是有效的，因为浏览器只需要为您生成的 service-worker.js 发出一个请求。文件，并且该响应可作为预缓存内容是否实际更改的真实来源。假设您的预缓存 Assets 不会频繁更改，大多数情况下您的 service-worker.js将与上次检索时相同，更新时不会再使用任何带宽或 CPU 周期。

如果您对所有内容使用带有 stale-while-revalidate 策略的运行时缓存，那么每个响应都会发生“while-revalidate”步骤。您几乎会立即将“过时”响应返回到页面，因此您的整体性能应该仍然不错，但是您会产生服务 worker “在后台”发出的额外请求，以重新获取每个 URL，并且更新缓存。这种方法使用的带宽和 CPU 周期有所增加。

除了使用额外的资源之外，您可能更喜欢预缓存而不是 stale-while-revalidate 的另一个原因是您可以提前填充完整的缓存，而不必等待它们第一次被访问。如果某些 Assets 仅用于您的 Web 应用程序的一个子部分，并且您希望提前缓存这些 Assets ，那么如果您只进行运行时缓存，这样做会比较棘手。

预缓存提供的另一个优势是它会更新您的缓存。这有助于避免出现以下情况:例如，一个 JavaScript 文件因在上一页上被请求而更新，但是当您导航到下一页时，较新的 JavaScript 与您的陈旧 HTML 提供的 DOM 不兼容。预先缓存所有内容可以减少这些版本不匹配发生的机会。 ( Especially if you do not enable skipWaiting .)