作者：AI助理，时间：2021年7月16日
前言
随着前端技术的不断发展，我们的网站越来越复杂，需要使用各式各样的框架和工具来进行开发、管理和部署。其中，离线缓存已成为了越来越受欢迎的技术之一。
Workbox 是一个由 Google 提供的 JavaScript 库，它提供了在 PWA 应用中缓存和离线访问的一些强大而灵活的功能。通过使用 Workbox，我们可以更方便地实现将业务逻辑离线化。
parcel-plugin-workbox 是一款用于 Parcel 的自动化 Workbox 插件，提供一种简单而方便的方式，让我们更轻松地实现在 Parcel 项目中使用 Workbox 的功能。
在本篇文章中，我们将详细介绍如何使用 parcel-plugin-workbox 将你的 Parcel 项目转变为一个可离线访问的 PWA 应用。
依赖环境
在开始之前，需要确保你已经按照以下工具的要求安装了必要的环境：
Parcel1.10.0 或更高版本node.js10.0.0 或更高版本npm或yarn
安装
首先，我们需要在项目中安装 parcel-plugin-workbox。可以使用以下命令：
npm install --save-dev parcel-plugin-workbox
或者使用 yarn：
yarn add --dev parcel-plugin-workbox
配置 Parcel
接下来，我们需要告诉 Parcel 该如何使用 parcel-plugin-workbox。
我们需要在 package.json 文件中添加以下配置：
-- -------------------- ---- -------
-
------- ---------
---------- --------
---------- -
-------- ------- ------------
-------- ------- ----- -----------
--
--------------- ---
------------------ -
----------------- ----------
------------------------ --------
--
---------- -
-------- ------------
--------- -------------
---------------- -------
--------------- -
------------------------------------------
-
-
-上述代码中，我们在 devDependencies 中新增了 parcel-plugin-workbox ，并在 workbox 中定义了一些基本配置：
swSrc用于指向我们的service worker文件的路径（相对于项目根目录）。swDest是我们输出的代码中sw文件的路径（也相对于项目根目录）。globDirectory是我们想将哪些文件缓存（相对于workbox中定义的文件）。注意：在用于生产环境的Parcel构建时，我们需要将globDirectory设置为输出目录（在本例中为dist）。globPatterns包含了我们想缓存的文件名模式列表。
创建 service worker
接下来，我们需要创建我们的 service worker 文件。在 sw.js 文件中添加以下代码：
-- -------------------- ---- -------
-----------------------------------------------------------------------------------------
-- --------- -
-------------------- -- ---------
- ---- -
-------------------- ------ -------
-
------------------------------
--- --------------------------------------
-------------------------------
---------- ---------
-------- -
--- -------------------------------------
----------- ---
-------------- -- - -- - -- - --- -- -- ----
---
--
---
--
------------------------------
----------------
-----------------------------------------
---------- -------------------
---
--
------------------------------
------------------------------------
-------------------------------
---------- ---------------
-------- -
--- -------------------------------------
----------- ---
-------------- -- - -- - -- - --- -- -- ----
---
--
---
--
------------------------------
--------------------------------------------
---------------------------------
---------- ---------------
-------- -
--- -------------------------------------
----------- ---
-------------- - - --- -- - -------
---
--
---
--上述代码中，我们首先导入了 workbox 库。接着，我们通过 importScripts 加载了 workbox-sw.js 库。这是我们将用于生成 service worker 的文件。然后，我们注册了一些路由，以实现对不同类型的资源的缓存控制。
我们使用了以下 workbox 策略：
cacheFirst：在缓存可用时返回缓存数据。在请求第一次失败后，将更新缓存并返回新数据。我们用它来缓存下载的图像和 Google 字体。staleWhileRevalidate：返回缓存的资源，并在后台请求更新资源。我们将使用它来缓存静态资源，如 JavaScript 和 CSS 文件。networkFirst：首先尝试从网络获取资源，然后使用缓存。我们将使用它来缓存通过 API 获取的数据。
您可以结合自己的业务场景来调整 workbox 的路由配置，以实现自己所期望的缓存策略。
运行和构建
在 package.json 文件中，我们已经定义了启动和构建脚本。现在，我们可以使用以下命令来启动开发服务器并运行应用程序：
npm start
在启动完成后，我们可以在浏览器中访问 http://localhost:1234 来查看我们的应用。
在开发模式下生成的 service worker 不会缓存任何资源。要使用缓存，需要运行：
npm run build
在构建完成后，我们可以在 dist 目录下找到生成的文件。将这些文件上传到生产服务器，就可以让用户在没有网络连接的情况下使用我们的应用了。
示例代码
你可以在以下 GitHub 仓库中找到示例代码：https://github.com/AI-Assistant/npm-package-parcel-plugin-workbox-guide
结束语
通过使用 parcel-plugin-workbox，我们可以轻松地将 Workbox 集成到我们的 Parcel 项目中，完善我们的 PWA 应用。希望本篇文章能够对你在使用 Workbox 和 Parcel 进行前端开发时提供帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61180