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 的构建工具可通过告知您预缓存中的项数来提供帮助 以及预缓存载荷的总大小。
从长远来看,访问您网络应用的回访者会因 预缓存,因为它提供的避开网络的能力 随着时间推移不断节省带宽