简介
PWA 是指渐进式 Web 应用，它可以通过多种方式提供类似原生应用的功能和用户体验。PWA 可以离线运行、在主屏幕上展现，具有推送通知等功能。Workbox 是谷歌开发的用于 PWA 开发的 JavaScript 库，它提供了对常见功能的实现，并且可以帮助开发者缓存数据并优化 Web 应用的性能。
Workbox 的使用指导
安装
Workbox 可以通过 npm 安装：
npm install workbox-cli --global
生成 Service Worker
Workbox 生成的 Service Worker 包含了默认情况下的缓存和路由逻辑。Workbox CLI 可以使您的 Service Worker 生成过程变得非常简单：
workbox wizard
这将通过一系列提示来设置您的 Service Worker，并在 sw.js 中生成基本代码。
路由和缓存手动配置
虽然 Workbox 生成的 Service Worker 中包含了默认的路由和缓存逻辑，但是在实际开发中，它们可能并不足够。开发者可以手动配置缓存的路径或者路由匹配规则。
例如，我们可以使用 workbox.routing.registerRoute 方法手动注册一个路由：
workbox.routing.registerRoute( /\/api\/.*\/*.json/, workbox.strategies.networkFirst() );
这个路由匹配以 “/api/” 开头的 URL，之后跟任意字符，之后以 “.json” 结尾，然后缓存来自网络的响应。如果请求失败，将从缓存中返回响应，直到网络可用。
预缓存
Workbox 可以在生成 Service Worker 后预缓存文件。使用 workbox-cli，可以简单地为静态资源创建一个配置文件，然后使用 Workbox CLI 来生成预缓存 Service Worker：
workbox generate:sw src/sw-config.js
运行测试
为了确保 Service Worker 正确并且有效，可以使用 workbox-cli 的 dev 命令来运行本地测试服务器：
workbox serve dist
这将启动一个本地服务器并使用您的 Service Worker 来响应请求。此时，您可以确保 Service Worker 正确缓存请求并使用正确的策略。
示例代码
下面是一个使用 Workbox 的示例代码，它缓存了静态文件和数据 API：
-- -------------------- ---- -------
-----------------------------------------------------------------------------------------
-- --------- -
-- -------- --- --
-------------------------------------
-
---- ----
--------- --------
--
-
---- -------------------
--------- --------
--
-
---- -------------------
--------- --------
--
-
---- -----------------
--------- --------
-
---
-- --- ------
------------------------------
--------------------
-------------------------------
---------- ------------
-------- -
--- ---------------------------------------------------
--------- --- ---- ----
---
--- -------------------------------------
----------- ----
-------------- -- - -- - -- - ---
------------------ ----
--
-
--
--
-- ----------
------------------------------
-------------------------------------------
-------------------------------
---------- ---------------
-------- -
--- -------------------------------------
----------- ----
-------------- -- - -- - -- - ---
------------------ ----
--
-
--
--
- ---- -
---------------------- ------ -- --------
-结论
Workbox 是一个非常实用的 JavaScript 库，可以帮助开发者快速、简便地搭建 PWA 应用，提高 Web 应用的性能和用户体验。本文介绍了 Workbox 的一些常见用法和示例代码，希望能够帮助到开发者进行 Workbox 的开发和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67302e9aeedcc8a97c91471e