随着移动设备的普及和 Web 技术的不断优化，PWA（Progressive Web App）成为了一个越来越热门的技术。通过使用 PWA，Web 应用可以具备类似原生应用的体验，如离线缓存、推送通知等。但在实际开发中，将一个 Web 应用转换为 PWA 并不是一件简单的事情。因此，本文要介绍的是 npm 包 pwa-convert，该包可以帮助我们将原有的 Web 应用快速转换为 PWA 。
安装与使用
pwa-convert 是一个 npm 包，因此我们可以直接通过 npm 安装它：
npm install pwa-convert
安装完成之后，我们需要在项目的根目录下创建一个 pwa.config.js 文件，并对其进行配置。pwa-convert 提供了以下配置项：
- name：应用名称，用于在添加到主屏幕时展示的名称，在配置文件中可以通过设置 name 字段或在开发构建脚本中动态生成。
- short_name：应用简称，用于在应用启动器、任务管理器等处展示的名称，在配置文件中可以通过设置 shortName 字段或在开发构建脚本中动态生成。
- description：应用描述，在添加到主屏幕时展示的描述，在配置文件中可以通过设置 description 字段或在开发构建脚本中动态生成。
- background_color：应用启动画面的背景色，在配置文件中可以通过设置 backgroundColor 字段或在开发构建脚本中动态生成。
- theme_color：应用主题色，在添加到主屏幕时的颜色，可以影响主屏幕图标的颜色，在配置文件中可以通过设置 themeColor 字段或在开发构建脚本中动态生成。
- start_url：应用的起始 URL，在添加到主屏幕时启动的页面，在配置文件中可以通过设置 startUrl 字段或在开发构建脚本中动态生成。
- scope：应用的范围，用于确定在那些 URL 范围内展示应用，可以通过设置 scope 字段或在开发构建脚本中动态生成。
- icons：应用的图标，必须为一个数组，每个元素为一个对象，包含 src、sizes 和 type 三个属性，分别表示图标的路径、尺寸和 MIME 类型，在配置文件中可以通过设置 icons 字段或在开发构建脚本中动态生成。
-- -------------------- ---- -------
-------------- - -
----- --- -----
---------- ------
------------ --- ----------- --- -----
---------------- ----------
----------- ----------
--------- ----
------ ----
------ -
-
------ -----------------------
-------- --------
------- -----------
--
-
------ -----------------------
-------- --------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
-
-
-配置完成后，我们需要在项目中引入 pwa-convert，并调用它提供的 convert 方法，该方法接收一个参数——配置文件的路径。
const pwaConvert = require('pwa-convert');
const configPath = './pwa.config.js';
pwaConvert.convert(configPath);默认情况下，pwa-convert 会将生成的 PWA 文件输出到 public 目录下。我们也可以通过修改配置文件中的 outputDir 字段来指定输出目录。
module.exports = {
// ...其他配置项
outputDir: 'dist' // 指定输出目录
}转换完成后，我们就可以在 public 目录中看到多个文件和文件夹，其中最重要的就是 manifest.json、service-worker.js 和一些图标文件了。
使用示例
下面是一个使用 pwa-convert 的完整示例。
首先，我们需要安装 pwa-convert 和一个简单的静态 Web 服务器——http-server。
npm install pwa-convert http-server
然后，我们在项目的根目录中创建一个 index.html 文件。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --- ----------- ------- ------ ---------- ----------- ------- -------
接着，我们创建一个 pwa.config.js 文件，并对其进行配置。
-- -------------------- ---- -------
-------------- - -
----- --- -----
---------- ------
------------ --- ----------- --- -----
---------------- ----------
----------- ----------
--------- ----
------ ----
------ -
-
------ -----------------------
-------- --------
------- -----------
--
-
------ -----------------------
-------- --------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
-
-
-最后，我们在命令行中执行以下两个命令启动静态 Web 服务器和 pwa-convert，就可以将我们的 Web 应用快速转换为 PWA 了。
http-server . pwa-convert ./pwa.config.js
现在，我们在浏览器中输入 http://localhost:8080/ 并手动添加到主屏幕上，就可以看到我们的 Web 应用已经成为了一个完整的 PWA。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671f81e8991b448e3897