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 在缓存中检查响应
（并使用在网络之前使用），这称为
缓存优先策略。
高效更新
预缓存清单提供了预期缓存的确切表示形式 state;如果清单中的网址/修订版本组合发生变化，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 应用。
您的哪些资产应预缓存？
请参阅了解 获取指南 了解预缓存最有意义的网址。一般而言， 预缓存在初期加载且对缓存数据至关重要的任何 HTML、JavaScript 或 CSS 用于显示指定网页的基本结构。
最好避免预缓存稍后加载的媒体或其他素材资源 （除非对你的 Web 应用的功能至关重要）。请改用运行时 缓存策略 资源随时缓存。
请始终记住，预缓存涉及使用网络带宽和存储空间 （就像从应用商店安装应用一样）。 作为开发者，您应谨慎地预缓存，并避免膨胀 预缓存清单。
Workbox 的构建工具可通过告知您预缓存中的项数来提供帮助 以及预缓存载荷的总大小。
从长远来看，访问您网络应用的回访者会因 预缓存，因为它提供的避开网络的能力 随着时间推移不断节省带宽