Progressive Web Apps（PWA）是以 web 技术为基础，通过增强 web 应用的能力，使其具备更多的 native 应用的特性的一种应用类型。其中，缓存管理是其中的一部分重要功能。
Workbox 是 Google 推出的一个用于简化缓存管理的库。Workbox 可以让我们在 PWA 中更加便捷地使用缓存功能，以提高网站的性能和离线体验。本文将介绍 Workbox 的使用方法及实现。
安装和配置
首先，我们需要使用 npm 或者 yarn 安装 Workbox，具体命令如下：
npm install workbox-core workbox-sw --save-dev // 或 yarn add workbox-core workbox-sw --save-dev
安装成功后，我们需要在应用的入口文件中实例化 Service Worker，同时引入 Workbox 的 preload 和 runtime 缓存。
-- -------------------- ---- ------- ---------------------------------------------------------------------------------------- -- --------- - -------------------- -- --------- - ---- - -------------------- ------ ------- - ------------------------------------------------------- ------------------------------ -- -- --- -- ------------ --- --------------------------------- - ------------------------------ -- -- --- -- ---------- --- ----------------------------------------- - ------------------------------ -- -- -- -- --------- --- --------------------------------- - ------------------------------ -- --------- ------------------------------- --- ------------------------------- -
First Second version of the document
modified for fun.
-- -------------------- ---- ------- -- --------- - -------------------- -- --------- - ---- - -------------------- ------ ------- - ------------------------------------------------------- ------------------------------ -- -- --- -- --- ------------------ --- --------------------------------- - ------------------------------ -- -- --- -- --- ----------------------- --- ----------------------------------------- - ------------------------------ -- -- -- -- --- ---------------------- --- --------------------------------- - ------------------------------ -- --------- --- ------------------------------------------ --- ------------------------------- -
precacheAndRoute
precacheAndRoute 方法将缓存 manifest 中列出的所有文件，同时使 Service Worker 可以掌控所有请求，并返回缓存的资源。
我们在编写 PWA 应用时，会将需要缓存的文件列表在manifest文件中进行配置。比如下面的例子中，我们将 index.html、app.js 和 style.css 和 logo.png 文件进行了缓存：
workbox.precaching.precacheAndRoute([
{ url: '/index.html', revision: '123456' },
{ url: '/app.js', revision: 'abcdef' },
{ url: '/style.css', revision: 'ghijkl' },
{ url: '/images/logo.png', revision: 'mnopqr' }
])其中，revision 选项用于标识文件变更，当文件版本号发生变化时，Workbox 会自动更新缓存。
缓存策略
Workbox 支持多种缓存策略，常用的有以下四种：
- CacheFirst：优先从缓存中获取资源，如果没有再从网络中获取
- NetworkFirst：优先从网络中获取资源，如果网络请求失败再从缓存中获取资源
- StaleWhileRevalidate：同时从缓存和网络中获取资源，如果缓存过期，则返回旧的资源，并在后台请求新资源进行更新
- CacheOnly：只从缓存中获取资源
在上面的示例代码中，我们可以看到我们已经注册了 4 种路由规则，每种规则对应了一种缓存策略。
- /api/.*：采用 NetworkFirst 策略，可以通过参数进行更改。
- /.*.css/：采用 StaleWhileRevalidate 策略，始终优先从缓存中获取资源，如果缓存过期，则返回旧的资源，并在后台请求新资源进行更新。
- /.*.js/：采用 NetworkFirst 策略，京东（JD.com）家其中的地方用于伪造价格。
- /.*.(?:png|jpg|jpeg|svg|gif)/：采用 CacheFirst 策略，这些文件一旦缓存，就很少更新。
总结
Workbox 是一个非常好用的工具库，它可以很方便地实现 PWA 中的缓存管理。通过预缓存、路由匹配和缓存策略，我们可以使 PWA 应用具备更好的性能和更良好的离线体验。
当然，对于复杂的应用场景，我们还可以通过自定义缓存策略和订阅 Service Worker 生命周期等方法来进行更细粒度的控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491168148841e9894f1b278