前言
随着对 Web 应用程序体验的不断追求， Progressive Web Apps（PWA）成为了前端开发中一个热门和必须知道的话题。PWA 可以为用户提供富有应用程序感的体验，同时能够在离线状态下继续工作。但是，对一些小型或无法承担高成本的项目开发者来说，PWA 开发可能过于昂贵、复杂、繁琐，因此我们需要一种能够最大限度地降低开发成本的 PWA 方案。
本文将为您介绍一种极小化成本的 PWA 开发方案，通过学习，您可以快速地将该方案应用于您的实际开发工作中。
什么是 PWA？
PWA 是由 Google 在 2015 年提出的一种 Web 应用程序开发方式。通过利用现代浏览器支持的一些技术手段，PWA 是一种能够像原生应用程序一样提供富有应用程序感的体验，并且在离线状态下工作的 Web 应用程序。
PWA 构成
PWA 主要由三个部分构成：
- Web 应用程序：基于 Web 技术开发的应用程序。这可以是基于任何 Web 技术栈开发的应用程序，包括 React、Vue、Angular、jQuery、Backbone 等。
- 渐进式增强：通过利用现代浏览器支持的一些特性，使得 Web 应用程序能够像原生应用程序一样提供富有应用程序感的体验。
- Service Worker：一种能够在 Web 应用程序之外运行的脚本，它可以拦截网络请求并且能够利用缓存技术提供对离线状态的支持。
用极小化成本的方式构建 PWA
这里介绍一种能够最大限度地降低 PWA 开发成本的方法。我们需要用到以下工具和技术：
- Workbox：由 Google 开发的一套用于创建使 Service Worker 更容易部署和管理的工具。
- Webpack：一个现代 JavaScript 应用程序的静态模块打包器。
- html-webpack-plugin：一个 Webpack 插件，用于将 HTML 文件与 Webpack 打包的输出文件关联起来。
- copy-webpack-plugin：一个 Webpack 插件，用于将静态（不需要处理）资源从应用程序源代码复制到构建输出目录中。
开始构建 PWA 应用程序
先使用 npm 安装好 Workbox，并在 package.json 的 devDependencies 位置引入 Workbox：
npm install workbox-webpack-plugin --save-dev
"devDependencies": {
"workbox-webpack-plugin": "^5.1.2"
}接着，创建一个新的文件 workbox-config.js，并将以下代码复制进去：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-------------- --------
------------- ----------------------------------------
------- -------------
------------- -----
------------ -----
--------------- -
-
----------- ------------------------------------
-------- ------------
--
-
----------- ---------------------------------
-------- ------------
-
-
--workbox-config.js 主要是告诉 Workbox 如何去处理你的代码。可以理解为一个配置文件，其中需要配置的参数如下：
globDirectory：需要被缓存的文件的根目录。globPatterns：需要被缓存的文件名（通配符匹配）。swDest：生成的 Service Worker 文件的路径。clientsClaim：设置为true，可以使得 Service Worker 立即在所有的页面中控制客户。skipWaiting：设置为true，可以使得 Service Worker 跳过等待阶段，立即激活。runtimeCaching：需要被缓存的文件配置，常见的有staleWhileRevalidate、CacheFirst、NetworkFirst、NetworkOnly。
接着，在 webpack.config.js 中添加 required libraries 和 插件：
// webpack.config.js
const WorkboxPlugin = require('workbox-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');-- -------------------- ---- -------
-- -----------------
-------- -
--- -------------------
--------- -
- ----- ------------ --
--
---
--- -------------------
--------- -----------------
------- -------
------- -
--------------- -----
------------------- -----
-
---
--- --------------------------
-------------------------------
--
-在这里，我们使用了 HtmlWebpackPlugin 将 src/index.html 和 Webpack 打包的文件关联起来。同时使用 CopyWebpackPlugin 将其他静态文件从源代码中复制到输出目录中。最后，我们将 WorkboxPlugin 插件与我们的 Workbox 配置绑定在一起，也就是配置文件 workbox-config.js。
现在，我们已经完成了极小化成本的 PWA 应用程序开发。我们需要在 Node.js 环境下运行以下命令：
npm run build
npx serve dist
当然，如果你使用的是 yarn，也可以将其中的 npm 命令直接替换成 yarn。
最后，打开浏览器访问 http://localhost:5000/，即可看到我们的 PWA 应用程序。
总结
本文针对小型或无法承担高成本的项目开发者，提出了一种极小化成本的 PWA 开发方案。我们使用了 Workbox 工具和 Webpack 打包器，实现了将现有 Web 应用程序转换为 PWA 应用程序的过程。希望这篇文章能够为你的实际开发工作带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64787163968c7c53b04b03f3