Service Worker 的一个功能是能够在安装 Service Worker 时将文件保存到缓存。这称为“预缓存”。通过预缓存，无需连接到网络即可向浏览器提供缓存的文件。对网站离线时所需的关键资源（主页面、样式、后备图片和基本脚本）使用预缓存。
为什么应使用 Workbox？
使用 Workbox 进行预缓存是可选操作。您可以编写自己的代码，以在 Service Worker 安装时预缓存关键资产。使用 Workbox 的主要优势在于其开箱即用的版本控制功能。与自行管理这些文件的版本控制和更新相比，使用 Workbox 更新预缓存资源时遇到的问题要少得多。
预缓存清单
预缓存由网址列表和每个网址的相关版本控制信息驱动。综上所述，这些信息称为预缓存清单。该清单是要在给定 Web 应用的预缓存中的所有内容状态的“可信来源”。预缓存清单（采用 Workbox 所用的格式）如下所示：
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
安装 Service Worker 后，系统会在 Cache Storage 中为列出的三个网址分别创建三个缓存条目。第一个资源的网址中已包含版本控制信息（app 是实际文件名，.abcd1234 包含版本控制信息，位于文件扩展名 .js 前面）。Workbox 的构建工具可以检测到此信息并排除修订版本字段。另外两个资源的网址中不包含任何版本控制信息，因此 Workbox 的构建工具会创建一个单独的 revision 字段，其中包含本地文件内容的哈希值。
提供预缓存资源
将资源添加到缓存只是预缓存过程的一部分 - 资源缓存后，它们需要响应传出请求。这需要您的 Service Worker 中使用 fetch 事件监听器，以便检查哪些网址已预缓存，并可靠地返回这些缓存的响应，从而绕过进程中的网络。由于 Service Worker 在缓存中检查响应（并在网络之前使用响应），因此称为缓存优先策略。
高效更新
预缓存清单准确表示预期缓存状态；如果清单中的网址/修订版本组合发生更改，Service Worker 便会知道之前的缓存条目不再有效，因此需要更新。它只需要一个网络请求（由浏览器在 Service Worker 更新检查过程中自动发出）来确定需要刷新哪些预缓存的网址。
对预缓存资源的更新
随着时间推移发布 Web 应用的新版本时，您需要使之前预缓存的网址保持最新状态、预缓存新资源并删除过时的条目。只要您在每次重新构建网站时都继续生成完整的预缓存清单，该清单在任何时间点都会成为预缓存状态的“可信来源”。
如果现有网址包含新的修订版本字段，或者清单中添加或移除了任何网址，则表明您的 Service Worker 需要作为 install 和 activate 事件处理脚本的一部分执行更新。例如，如果您对网站进行了一些更改并重新构建，则最新的预缓存清单可能发生了以下更改：
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
每项更改都会告知 Service Worker，需要发出新请求以更新先前缓存的条目（'offline.svg' 和 'index.html'）并缓存新网址 ('app.ffaa4455.js')，以及删除不再使用的网址 ('app.abcd1234.js')。
真正的“应用商店”安装体验
预缓存的另一个好处是，您可以为用户提供通过“应用商店”安装难以实现的体验。用户首次访问您的 Web 应用中的任何页面时，您可以提前预缓存显示 Web 应用的任何视图所需的所有网址，而无需等到他们访问各个视图。
用户安装应用后，会希望应用的每个部分都能快速显示，而不仅仅是他们过去浏览过的视图。预缓存会为 Web 应用带来相同的体验。
您的哪些资产应预缓存？
请回顾识别正在加载的内容指南，充分了解预缓存哪些网址最为合理。一般规则是预缓存任何过早加载的 HTML、JavaScript 或 CSS，它们对于显示给定网页的基本结构至关重要。
最好避免预缓存媒体或稍后加载的其他资源（除非对 Web 应用的功能至关重要）。请改为使用运行时缓存策略，确保这些资源会即时缓存。
请始终谨记，预缓存涉及使用用户设备上的网络带宽和存储空间（就像从应用商店安装应用一样）。作为开发者，您需要明智地进行预缓存，并避免使预缓存清单变得过于庞大。
Workbox 的构建工具可以通过告知您预缓存清单中的项目数量以及预缓存载荷的总大小来提供帮助。
从预缓存的前期成本中长期来看，回访您 Web 应用的访问者会受益，因为它提供了避免网络的功能，随着时间的推移，以节省的带宽为自己付费。