什么是 PWA
PWA，即 Progressive Web App，是一种新兴的 Web 应用程序模型，通过在 Web 应用程序内部使用一些现代 Web 技术（如 Service Worker、Web App Manifest 等），从而达到类似于原生应用的用户体验。PWA 不仅可以实现 Web 应用程序离线缓存，还可以实现 Web 推送、添加至主屏幕、全屏显示、提供与原生应用类似的体验，以及能够运行在各种平台和设备上。
PWA 技术栈
实现 PWA 首先需要了解与 PWA 相关的技术栈，它们包括：
Service Worker：一种 Web Worker 的扩展，可在浏览器中创建一个独立的线程，拦截并缓存网络请求，实现离线访问等高级功能。
Web App Manifest：一个 JSON 配置文件，提供了应用程序图标、主题色、应用名称等元数据的描述信息。
HTTPS：为了提供更安全的通信，PWA 必须使用 HTTPS 作为访问协议，以保证 Web 应用程序的可靠性和安全性。
Webpack 打包 PWA
由于要使用一些新的 Web 技术，因此需要对 Webpack 进行相应的配置。
首先安装必要的依赖：
npm install --save-dev workbox-webpack-plugin npm install --save-dev web-app-manifest-webpack-plugin
Service Worker 配置
接下来在 Webpack 配置文件中增加代码，以创建 Service Worker：
-- -------------------- ---- -------
----- ------------- - ----------------------------------
-------------- - -
-- -----
-------- -
--- --------------------------
-- ------ -------------- ----
-- ----------- --------------
------------- -----
------------ ----
--
-
--Web App Manifest 配置
接下来在 Webpack 配置文件中增加代码，以创建 Web App Manifest 文件：
-- -------------------- ---- -------
----- ------------------ - --------------------------------
-------------- - -
-- -----
-------- -
--- --------------------
----- --- ----------- --- ----- -- ------
----------- -------- -- -----------
------------ --- ---- ----- -- --
----------------- ---------- -- ----
------------ ---------- -- ----
------------ ------------------ -- --------------- ----------------- - -----------
------ -
-- --------
-
---- --------------------------------------
------ ---- ---- ---- ---- ---- ---- -- -------
-
-
--
-
--开启 HTTPS
为了使 PWA 应用程序更加安全并获得更高的 Lighthouse 分数，我们需要通过 HTTPS 访问 PWA 应用程序。可以通过向 Webpack 配置文件中添加以下代码来启用 HTTPS：
module.exports = {
// 其它配置项
devServer: {
https: true
}
};检查
完成以上步骤后，可以运行 Webpack 进行打包，并使用 Chrome 开发者工具将应用程序设置为 Service Worker，查看资源是否被缓存，并检查 Web App Manifest 文件是否有效。
结论
通过 Webpack 的配置，我们可以轻松地打包 PWA 应用程序，并启用盘点资源缓存、Web App Manifest 文件和 HTTPS 安全，以获得更好的用户体验和更高的 Lighthouse 分数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676eaabee9a7045d0d6c4d8b