什么是 PWA？
PWA（Progressive Web App）是一种新型的 Web 应用程序开发模式，它结合了 Web 和原生应用的优点，可以在桌面和移动设备上提供类似于原生应用的用户体验。PWA 具有以下特点：
- 响应式设计，可以适应不同的设备和屏幕尺寸；
- 离线访问，即使没有网络连接也可以使用；
- 快速加载，可以在几秒钟内加载并显示内容；
- 可以添加到主屏幕，像原生应用一样启动。
什么是 Workbox？
Workbox 是 Google 推出的一款 PWA 应用程序开发工具包，它提供了一系列的库和工具，可以帮助开发者更轻松地构建 PWA 应用程序。Workbox 的主要功能包括：
- 缓存管理，可以实现离线访问和快速加载；
- 路由管理，可以实现 URL 路由和页面跳转；
- 资源管理，可以实现资源预加载和懒加载；
- 后台同步，可以实现后台数据同步和离线提交。
如何使用 Workbox？
下面我们来详细介绍如何使用 Workbox 开发 PWA 应用程序。
安装 Workbox
首先需要安装 Workbox，可以通过 npm 包管理工具进行安装：
npm install workbox-cli --global
创建 Workbox 配置文件
在项目根目录下创建一个名为 workbox-config.js 的配置文件，该文件用于配置 Workbox 的相关参数：
-- -------------------- ---- -------
-------------- - -
-------------- ----------
------------- -
-------------------------------------
--
------- ---------------
------------- -----
------------ -----
--------------- -
-
----------- ------------------------------
-------- -------------
-------- -
---------- ---------
----------- -
----------- ---
-------------- -- - -- - -- - --
-
-
-
-
--上面的配置文件中，globDirectory 指定了需要缓存的文件所在的目录，globPatterns 指定了需要缓存的文件类型，swDest 指定了生成的 Service Worker 文件的路径，clientsClaim 和 skipWaiting 分别表示是否立即激活新的 Service Worker 和是否跳过等待阶段，runtimeCaching 是一个数组，用于配置运行时缓存策略。
生成 Service Worker 文件
在项目根目录下执行以下命令，即可生成 Service Worker 文件：
workbox generateSW workbox-config.js
执行该命令后，会在项目根目录下生成一个名为 sw.js 的 Service Worker 文件，该文件包含了缓存管理、路由管理、资源管理和后台同步等功能。
注册 Service Worker 文件
在应用程序的入口文件中，通过以下代码注册 Service Worker 文件：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-------------------------- ------------ ------- -- -----
---
---
-上面的代码中，navigator.serviceWorker.register() 方法用于注册 Service Worker 文件，registration.scope 属性用于获取 Service Worker 的作用域。
使用 Workbox 缓存管理
在 Service Worker 文件中，可以通过 Workbox 的缓存管理 API 实现离线访问和快速加载。
预缓存页面
在 Service Worker 文件中，通过 Workbox 的 precacheAndRoute() 方法可以实现页面的预缓存：
workbox.precaching.precacheAndRoute([
{ url: "/", revision: "1" },
{ url: "/index.html", revision: "1" },
{ url: "/about.html", revision: "1" }
]);上面的代码中，workbox.precaching.precacheAndRoute() 方法用于预缓存页面，其中的数组中包含了需要预缓存的页面的 URL 和版本号。
运行时缓存策略
在 Service Worker 文件中，通过 Workbox 的 registerRoute() 方法可以配置运行时缓存策略：
-- -------------------- ---- -------
------------------------------
------------------------------
-------------------------------
---------- ---------
-------- -
--- ---------------------------
----------- ---
-------------- -- - -- - -- - --
--
-
--
--上面的代码中，workbox.routing.registerRoute() 方法用于配置 URL 路由和缓存策略，其中的正则表达式用于匹配需要缓存的资源，workbox.strategies.cacheFirst() 方法用于指定缓存策略，workbox.expiration.Plugin() 用于配置缓存的过期时间和最大数量。
使用 Workbox 路由管理
在 Service Worker 文件中，可以通过 Workbox 的路由管理 API 实现 URL 路由和页面跳转。
URL 路由
在 Service Worker 文件中，通过 Workbox 的 registerRoute() 方法可以实现 URL 路由：
workbox.routing.registerRoute( /\/blog\/(.*)/, workbox.strategies.networkFirst() );
上面的代码中，/\/blog\/(.*)/ 匹配了所有以 /blog/ 开头的 URL，workbox.strategies.networkFirst() 方法用于指定缓存策略。
页面跳转
在 Service Worker 文件中，通过 Workbox 的 setCatchHandler() 方法可以实现页面跳转：
workbox.routing.setCatchHandler(function({ event }) {
switch (event.request.destination) {
case "document":
return caches.match("/offline.html");
}
});上面的代码中，workbox.routing.setCatchHandler() 方法用于设置全局的错误处理程序，当页面请求失败时，会跳转到 /offline.html 页面。
使用 Workbox 资源管理
在 Service Worker 文件中，可以通过 Workbox 的资源管理 API 实现资源预加载和懒加载。
资源预加载
在页面中，通过 Workbox 的 precacheAndRoute() 方法可以实现资源的预加载：
workbox.precaching.precacheAndRoute([
{ url: "/styles.css", revision: "1" },
{ url: "/main.js", revision: "1" }
]);上面的代码中，workbox.precaching.precacheAndRoute() 方法用于预加载资源，其中的数组中包含了需要预加载的资源的 URL 和版本号。
资源懒加载
在页面中，通过 Workbox 的 loadModule() 方法可以实现资源的懒加载：
-- -------------------- ---- -------
-- ----------------------- -- ------- -
----- ---------- - --------------------------------------
----- ----------------- - --- -------------------------------------- --------- -
------------------------------- -
-- ---------------------- -
----- --------- - -------------
------------- - ----------------------
-----------------------------------
---------------------------------------
-
---
---
-------------------------------------- -
-------------------------------------
---
- ---- -
----- ---------- - --------------------------------------
-------------------------------------- -
------------- - ----------------------
-----------------------------------
---
-上面的代码中，IntersectionObserver 用于判断图片是否可见，loadModule() 方法用于加载 Workbox 模块，lazyImages 是一个包含所有需要懒加载的图片的数组，lazyImageObserver 是一个 IntersectionObserver 对象，用于观察图片是否可见。当图片可见时，会将图片的 src 属性设置为 data-src 属性的值，从而实现图片的懒加载。
总结
本文介绍了如何使用 Workbox 开发 PWA 应用程序，包括如何安装 Workbox、创建配置文件、生成 Service Worker 文件、注册 Service Worker 文件、使用缓存管理、路由管理和资源管理等功能。通过使用 Workbox，可以更轻松地构建高质量的 PWA 应用程序，提升用户体验和应用程序的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65564764d2f5e1655d0cc868