在现代 web 应用程序中，离线支持和快速加载速度是至关重要的。Progressive Web Apps（PWA）使我们能够在网络可用时动态加载资源，并在离线时使用预缓存资源。Workbox 是一个强大的库，它可以帮助我们实现离线支持、网络性能优化以及缓存策略等功能。在本文中，我们将探讨如何使用 Workbox 来处理预缓存资源。
概览
首先，我们需要安装 Workbox，支持 ES Module 的浏览器可以直接使用 import 引入，不支持的则需要使用 Script 标签引入。
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
// 或者使用 Script 标签引入
<script src="https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js"></script>接下来，我们需要定义缓存策略和预缓存资源。Workbox 提供了多个策略，我们选择 "Stale While Revalidate"（读取过期）策略，意思是在缓存可用的情况下立即返回缓存，同时发送网络请求来更新缓存。
-- -------------------- ---- ------- ----- - ---------------- - - ------------------- ------------------ - ---- ---- --------- -------- -- - ---- ------------------ --------- -------- -- - ---- ------------------- --------- -------- -- --- ------------------------------------- -------------------------------------------
上述代码表示我们预缓存了首页、样式表和 logo 图片，同时使用 "Stale While Revalidate" 策略来对缓存资源进行读取。你可以在 precacheAndRoute 数组中添加任意数量的 URL，同时可以为每个 URL 指定一个版本号（revision）。这些版本号用于更新缓存，当页面的资源发生变化时，版本号也需要相应地更新。
最后我们需要创建一个 Service Worker 并将其注册到我们的应用程序中。
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------------------------ -- -
--------------- ----------- -- --------------
-- ----- -- -
--------------- ------------ ------- -- -------
---
---
-实例演示
为了更好地了解如何使用 Workbox，我们可以创建一个简单的示例来演示其效果。我们将创建一个待办事项（Todo）应用程序，支持在离线时使用缓存资源。
首先，我们需要安装 Workbox。
npm install workbox-webpack-plugin --save-dev
然后，我们将在我们的 webpack 配置中使用 Workbox 插件。
-- -------------------- ---- -------
----- ------------- - ----------------------------------
-------------- - -
-----
-------- -
-----
--- ------------------------------
------ --------------
---
--
--此处我们使用了 Workbox 的 InjectManifest 插件，它从 sw.js 文件中生成一个 Service Worker，并将其注入到我们的应用程序中。
接下来，我们需要定义 sw.js 中的缓存资源和策略。
-- -------------------- ---- ------- ------ - ---------------- - ---- --------------------- ------ - ------------- - ---- ------------------ ------ - -------------------- - ---- --------------------- ------------------------------------- -------------- -- --- -- -- ---------- --- --------------------------------------- --- ---------------------- --
这里我们使用了 precacheAndRoute 方法，它将 Workbox 缓存添加到我们的 Service Worker 中。我们在 Service Worker 中处理了来自 https://jsonplaceholder.typicode.com 的所有请求，并使用 StaleWhileRevalidate 策略对它们进行缓存读取。
最后，我们需要编写一些前端代码来访问我们的服务端资源。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ----- -
----- ------- --------- - -------------
------------ -- -
---------------------------------------------------
-------------- -- ----------------
---------- -- ----------------
-- ----
------ -
----
--------------- -- -
--- -------------------------------
---
-----
--
-
------ ------- ----此处我们使用了 React 来构建应用程序，通过一段简单的代码来获取 https://jsonplaceholder.typicode.com/todos 上的待办事项数据。
最后，我们可以进行构建并在 localhost 上运行应用程序。
npm run build serve -s build
接下来，我们可以断开与因特网的连接并重新加载网页来测试在离线时是否正常工作。如果一切正常，我们就可以在没有网络连接的情况下访问离线保存在缓存中的数据。
结论
在本文中，我们介绍了如何使用 Workbox 在 PWA 中处理预缓存资源。我们讨论了如何安装和配置 Workbox，以及如何定义缓存策略和预缓存资源。最后，我们演示了一个示例，展示了如何在应用程序中使用 Workbox 实现离线支持。希望这篇文章对你有所帮助，也希望你能充分利用 Workbox 来提高你的 PWA 的性能和离线支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67024311d91dce0dc846f12d