Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

Service Worker 和 Cache Storage API

Jeff Posnick

您正在为网络可靠性而苦苦挣扎。浏览器的 HTTP 缓存是您的第一道防线，但正如您所了解的，它只有在加载您之前访问过的版本化网址时才真正有效。仅靠 HTTP 缓存是不够的。

幸运的是，有两款较新的工具可以帮助您扭转局势：Service Worker 和 Cache Storage API。由于它们经常一起使用，因此值得同时了解它们。

Service Worker

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

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

对于某些请求，最佳做法可能只是允许请求继续发送到网络，就像根本没有 Service Worker 一样。

不过，对于其他请求，您可以利用比浏览器的 HTTP 缓存更灵活的机制，返回可靠、快速的响应，而无需担心网络问题。这就需要使用另一个关键部分：Cache Storage API。

Cache Storage API

Browser Support

Source

Cache Storage API 为开发者提供了对缓存内容的完全控制，从而开辟了全新的可能性。Cache Storage API 并不依赖于 HTTP 标头和浏览器内置启发式算法的组合，而是提供了一种代码驱动的缓存方法。从 Service Worker 的 JavaScript 调用 Cache Storage API 时，该 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 缓存难以或无法实现的一些常见用途包括：

对缓存内容使用“在后台刷新”方法，称为 stale-while-revalidate。
对要缓存的资源数量上限施加限制，并实施自定义过期政策，以便在达到该限制后移除内容。
比较之前缓存的网络响应和新的网络响应，看看是否有任何变化，并在数据实际更新后让用户能够更新内容（例如，通过按钮）。

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

API 基础知识

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

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

快速回顾：Promise 和 async/await

Service Worker 和 Cache Storage API 使用异步编程概念。具体而言，它们严重依赖 promise 来表示异步操作的未来结果。在深入了解之前，您应该先熟悉 promise 以及相关的 async/await 语法。

先别部署该代码

虽然它们提供了重要的基础，并且可以按原样使用，但 Service Worker 和 Cache Storage API 实际上都是较低级别的构建块，存在许多极端情况和“陷阱”。有一些更高级别的工具可以帮助您顺利完成这些 API 的难点，并提供构建可用于生产用途的 Service Worker 所需的一切。下一篇指南将介绍其中一种工具：Workbox。