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 时，系统会在缓存存储中为列出的三个网址创建三个缓存条目。第一个资源的网址中已包含版本信息（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 应用的重复访问者将受益于预先缓存的前期成本，因为随着时间推移，它提供的避开网络的能力足以让它自身节省带宽。