什么是 PWA？
PWA 全称是 Progressive Web App，是一种 Web 应用的开发方式，它可以在离线状态下保持良好的使用体验，支持按需缓存和离线使用资源，并且天然具有移动端应用的安装使用方式。PWA 可以被理解成一种新兴的 Web 应用开发模式，也被视为 Web 应用向移动应用的桥梁。
PWA 开发中与 Webpack 的关系
我们知道，Webpack 是一款流行的前端构建工具，它可以帮助我们优化打包代码并管理模块依赖关系。在 PWA 开发中，我们也需要使用 Webpack 来进行构建，同时还需要对 Webpack 进行一些特别的配置，以满足 PWA 的需求。接下来，我们就来探讨一下关于如何在 Webpack 下配置 PWA 开发环境。
PWA 开发需求及配置
PWA 的特点是可以离线访问，所以我们需要在应用中适配 Service Worker，将静态资源缓存在本地，保证在断网情况下也能正确展示，同时还要通过 manifest 文件定义应用的相关信息（如应用名、图标等），以便安装到设备中使用。接下来，我们就来具体了解一下如何在 Webpack 下进行 PWA 开发环境的配置。
一、安装必要的依赖
在创建项目后，我们首先需要安装必要的依赖：
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin workbox-webpack-plugin
webpack和webpack-cli是 Webpack 的核心依赖webpack-dev-server可以为我们提供本地开发环境html-webpack-plugin可以帮助我们自动生成 HTML 文件并将打包好的资源引入到 HTML 中clean-webpack-plugin可以帮助我们在每次构建时清理旧的打包文件workbox-webpack-plugin可以帮助我们生成 Service Worker 和缓存策略等相关代码
二、配置 Webpack
接下来我们需要根据项目需求配置 Webpack，具体配置如下：
-- -------------------- ---- -------
-- -----------------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- - ------------------ - - -------------------------------
----- ------------- - ---------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- --------------------------
----- ----------------------- --------
----------- ---
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
-
--------------------
-
------------ --------
------- -
-
-
-
-
-
-
-
--
-------- -
--- -------------------
--------- ----------------------
--------- ------------
---
--- ---------------------
--- --------------------------
------------- -----
------------ -----
--
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
----- -----
---- ----
-
-- 配置文件中的各个字段的含义可参考 Webpack 文档
- 配置中使用了
babel-loader将 ES6 代码转为兼容性更好的 ES5 代码 - 配置
WorkboxPlugin.GenerateSW可以帮助我们生成 Service Worker 文件
三、编写 Service Worker
在上面的配置中，我们使用了 WorkboxPlugin.GenerateSW 插件帮助我们编写 Service Worker，实际上，这个插件会根据我们的配置帮助我们生成一个由 Workbox 可以管理的 service-worker.js 文件，我们可以在这个文件中编写我们 Service Worker 的相关逻辑。在这里，我们简单列举一下 Service Worker 中可以用到的一些 API：
workbox.precaching.precacheAndRoute([])：可以预缓存指定的静态资源workbox.routing.registerRoute(/\.js$/, new workbox.CacheFirst())：可以配置路由匹配规则，并缓存匹配到的请求workbox.strategies.NetworkFirst()：可以共同使用 withNetworkFallback 和 withCacheFallback，实现网络请求优先、网络失败后请求缓存，缓存失效后重新请求的逻辑
如果读者对 Service Worker 还不熟悉，也可以在 Service Worker 官网上浏览 API 的详细文档。
四、编写 Manifest 文件
在上述配置中，我们的第一个插件是 HtmlWebpackPlugin，它会自动生成 HTML 文件，并引入打包好的文件。但是我们在开始时提到了，PWA 还需要通过 manifest 文件定义应用的相关信息，如应用名、图标等，那么这个 manifest 文件应该如何编写呢？
我们只需要在项目的 public 目录下创建一个 manifest.json 文件即可，文件中的字段根据应用需求编写，以下是一个示例：
-- -------------------- ---- -------
-
------- ---- ------
------------- ---- ------
-------- -
-
------ ------------------------
------- ------------
-------- -------
--
-
------ ------------------------
------- ------------
-------- -------
--
-
------ --------------------------
------- ------------
-------- ---------
--
-
------ --------------------------
------- ------------
-------- ---------
--
-
------ --------------------------
------- ------------
-------- ---------
--
-
------ --------------------------
------- ------------
-------- ---------
--
-
------ --------------------------
------- ------------
-------- ---------
--
-
------ --------------------------
------- ------------
-------- ---------
-
--
------------ --------------
---------- -------------
------------------- -------
-------------- ------
-总结
至此，我们已经一步步完成了 PWA 开发环境的配置，在开发过程中，要特别注意 PWA 的最佳实践，例如合理使用 Service Worker，按需缓存资源，以及使用指南中提供的方法构建你的离线优化策略。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646eabe7968c7c53b0d039a8