Service Worker 和 Cache Storage API

Jeff Posnick

您一直在努力提高网络可靠性。浏览器的 HTTP 缓存是第一道防线，但正如您所学到的，只有在加载您之前访问过的版本化网址时，它才真正有效。仅 HTTP 缓存是不够的。

幸运的是，有两个较新的工具可以帮助您扭转局势：服务工件和 Cache Storage API。由于这两者经常搭配使用，因此值得同时了解它们。

Service Worker

服务工件内置于浏览器中，由您负责创建的一些额外 JavaScript 代码控制。您可以将此文件与构成实际 Web 应用的其他文件一起部署。

Service Worker 具有一些特殊能力。除了其他职责之外，它还会耐心等待您的 Web 应用发出出站请求，然后通过拦截该请求来立即采取行动。Service Worker 如何处理此拦截的请求取决于您。

对于某些请求，最佳做法可能只是允许请求继续发送到网络，就像根本没有任何服务工件时会发生的情况一样。

不过，对于其他请求，您可以利用比浏览器的 HTTP 缓存更灵活的工具，并返回可靠快速的响应，而无需担心网络。这需要使用另一部分拼图：Cache Storage API。

Cache Storage API

Cache Storage API 让开发者能够完全控制缓存内容，从而开辟了全新的可能性。Cache Storage API 公开了一种代码驱动的缓存方法，而不是依赖于 HTTP 标头和浏览器的内置启发词语。从服务工件的 JavaScript 调用 Cache Storage API 时，Cache Storage API 特别有用。

等等…现在还有另一个缓存需要考虑吗？

您可能在问自己诸如“我还需要配置 HTTP 标头吗？”和“我可以使用以下新缓存执行哪些 HTTP 缓存无法执行的操作？”之类的问题。别担心，这些都是正常的反应。

即使您知道自己使用的是 Cache Storage API，我们仍建议您在 Web 服务器上配置 Cache-Control 标头。通常，您只需为未设置版本的网址设置 Cache-Control: no-cache，并/或为包含版本信息（例如哈希值）的网址设置 Cache-Control: max-age=31536000 即可。

填充 Cache Storage API 缓存时，浏览器默认会检查 HTTP 缓存中是否存在现有条目，并在找到时使用这些条目。如果您要向 Cache Storage API 缓存添加版本化网址，浏览器会避免发出额外的网络请求。反之，如果您使用了配置错误的 Cache-Control 标头（例如为未版本化网址指定长效缓存生命周期），则最终可能会通过将这些过时内容添加到 Cache Storage API 来加剧问题。对 HTTP 缓存行为进行排序是有效使用 Cache Storage API 的前提条件。

至于现在可以通过这个新 API 实现哪些功能，答案是：很多。仅使用 HTTP 缓存时难以实现或无法实现的一些常见用途包括：

• 对缓存内容使用“在后台刷新”方法，也称为“在重新验证期间过时”。
• 对要缓存的资产数量施加上限，并实现自定义到期政策，以便在达到该上限时移除项。
• 比较之前缓存的网络响应和新网络响应，以了解是否有任何变化，并在数据实际更新后让用户更新内容（例如，使用按钮）。

如需了解详情，请参阅 Cache API：快速入门指南。

API 的方方面面

关于 API 的设计，请注意以下几点：

• 在读取和写入这些缓存时，Request 对象会用作唯一键。为方便起见，您可以传入网址字符串（例如 'https://example.com/index.html'）作为键，而不是实际的 Request 对象，API 会自动为您处理。
• Response 对象用作这些缓存中的值。
• 缓存数据时，系统会有效忽略给定 Response 上的 Cache-Control 标头。没有内置的自动过期或新鲜度检查，并且一旦您将项存储在缓存中，该项将保留在缓存中，直到您的代码明确移除它为止。（有库可代表您简化缓存维护。本系列后续文章将介绍这些内容。）
• 与旧版同步 API（例如 LocalStorage）不同，所有 Cache Storage API 操作都是异步的。

简要介绍：Promise 和 async/await

服务工件和 Cache Storage API 使用异步编程概念。特别是，它们非常依赖于 Promise 来表示异步操作的未来结果。在深入了解之前，您应先熟悉promise 和相关的 async/await 语法。

暂时不要部署该代码

虽然它们提供了重要的基础，并且可以按原样使用，但服务 worker 和 Cache Storage API 实际上都是较低级别的构建块，存在一些边缘情况和“陷阱”。有一些更高级的工具可以帮助您顺利解决这些 API 的难点，并提供构建可用于生产环境的服务工件的所有所需内容。下一个指南将介绍其中一种工具：Workbox。