PWA（Progressive Web Apps）是一种新型的应用程序，它具有应用程序的特性，并通过 Web 浏览器来访问。PWA 具有以下特性：
- 可靠性：加载速度快，能在离线状态下工作；
- 体验优先：响应速度快，能够在主屏幕上安装；
- 渐进式：逐步增强，适用于所有浏览器。
如果你想要构建一个 PWA 应用程序，你需要使用 Workbox 和 Webpack 来打包和优化你的应用程序。接下来，我们将详细介绍这两种工具以及如何使用它们来构建 PWA 应用程序。
Workbox
Workbox 是一个用于构建离线化 Web 应用程序的库，它是由 Google 开发的。它包含了许多预构建的功能，可以帮助你快速构建一个 PWA 应用程序。
Workbox 提供了以下功能：
- 快速缓存第三方库和资源；
- 增强网络响应；
- 缓存 API 响应；
- 支持离线事件；
- 帮助你进行调试；
- 生成 Service Worker 脚本。
Webpack
Webpack 是一个常用的模块打包器。它将你的应用程序代码和所有的依赖打包成一个或多个文件，并且为这些文件生成一个或多个文件名。Webpack 还支持许多功能，如代码拆分、懒加载和热更新等。
通过使用 Workbox 和 Webpack，你可以轻松地构建出一个可靠、快速、优秀的 PWA 应用程序。下面，我们将介绍如何使用这些工具。
创建 PWA 应用程序
首先，你需要创建一个基本的 PWA 应用程序。你可以使用任何框架，但在这里我们将使用 React。创建一个新的 React 应用程序，并添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ----- - ------ - ----- ---------- ----------- ------ -- - ------ ------- ----展开代码
这个代码将创建一个简单的 React 应用程序，它只会渲染一个标题。
添加 Webpack 配置文件
接下来，你需要添加一个 Webpack 配置文件。你可以使用任何 Webpack 版本，但在这里我们将使用 Webpack 5。
首先，安装它：
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin
接着，创建一个名为 webpack.config.js 的文件，添加以下代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- - ------------------ - - -------------------------------- -------------- - - ------ ----------------- ------- - --------- -------------------------- ----- ----------------------- --------- -- ------- - ------ - - ----- -------- -------- --------------- ---- ----------------- -- -- -- -------- - --- ------------------- --------- ----------------------- --------------------- --- --- --------------------- -- ---------- - ------------ ----------------------- --------- -- --展开代码
这个代码将告诉 Webpack 如何打包你的应用程序。
添加 Workbox 到应用程序
现在，你需要将 Workbox 添加到你的应用程序中。安装 Workbox：
npm i -D workbox-webpack-plugin
接着，你需要在 Webpack 配置文件中添加以下代码：
-- -------------------- ---- ------- ----- - ------------- - - ---------------------------------- -------------- - - -- ----- -------- - -- ---- --- -------------------------- ------------- ----- ------------ ----- --- -- --展开代码
我们使用了 WorkboxPlugin 插件来为我们生成 Service Worker。并且，我们使用了 GenerateSW 策略来自动生成 Service Worker。
缓存资源
现在，你需要告诉 Workbox 哪些资源需要缓存。你可以使用 workbox.routing.registerRoute 方法来完成。
在 src/index.js 文件中，添加以下代码：
-- -------------------- ---- ------- -- ---------------- -- ---------- - ------------------------------- -- -- - -------------------------------------------- --- ------------------------------ --- ------------------ --- ------------------------------------------ -- ------------------------------ --- ------------------- --- ------------------------------------------ -- -展开代码
通过这个代码，我们告诉 Workbox 缓存所有 JavaScript 和 CSS 文件。
删除旧的缓存
如果你更新了应用程序，你需要删除旧的缓存。你可以使用 workbox.precaching.cleanupOutdatedCaches() 方法来做到这一点。
添加以下代码：
self.addEventListener('activate', (event) => { event.waitUntil( workbox.precaching.cleanupOutdatedCaches(), ); });
这个代码将在 Service Worker 激活时调用 cleanupOutdatedCaches() 方法。
最后
现在，你已经使用 Workbox 和 Webpack 实现了 PWA 的打包和优化。你可以运行 npm run build 命令来打包你的应用程序，并将它上传到你的 Web 服务器上。
如果你想了解更多关于 PWA 的信息，请查看Google 开发者文档。
示例代码
你可以访问我的 GitHub 仓库 查看一个完整的 PWA 应用程序的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c333ec314edc2684d05dc9
