PWA 是 Progressive Web App（渐进式 Web 应用程序）的缩写，是一种新型 Web 应用的开发模式。PWA 拥有更好的性能、更好的用户体验和更高的转化率。generator-pwa-angular-core 是一个帮助开发者快速创建 PWA 应用的 npm 包，本文将介绍如何使用它进行 PWA 应用的开发。
什么是 generator-pwa-angular-core
generator-pwa-angular-core 是一个基于 Angular 和 PWA 的生成器，可以帮助开发者快速创建一个带有离线缓存、渐进增强等特性的 PWA 应用。它提供了一个基础结构和一些命令行工具，简化了开发过程。该生成器基于 Yeoman 构建，使用起来非常简单。
安装使用
首先，我们需要先安装 Node.js 和 npm。安装完成后，我们可以通过 npm 安装 generator-pwa-angular-core。
npm install -g generator-pwa-angular-core
安装完成后，我们就可以创建一个新的 PWA 应用。在命令行中输入以下命令：
yo pwa-angular-core
根据提示输入应用程序的名称、版本、描述等信息，然后等待安装和构建过程完成。一旦完成，我们就可以启动 PWA 应用程序开发服务器，运行以下命令：
npm run start
上述命令将编译和启动一个本地服务器，在默认情况下会在 http://localhost:4200 上运行您的 PWA 应用程序。打开浏览器，输入 http://localhost:4200 ，你就可以看到应用程序界面。
项目结构
下面是目录结构的说明。
-- -------------------- ---- ------- ------------- -- ---- - -- ---- - - -- ----------------- - - -- ------------------ - - -- --------------------- - - -- ---------------- - - -- ------------- - - -- -------------- - -- ------- - -- ------------- - -- ------ - -- ---------- - -- -------------------- - -- ---------------- - -- ----------------- - -- --------- - -- ---------------- -- ----------------- -- ------------- -- ---------- -- ------------- -- ------------ -- ------------------ -- --------- -- ------------- -- ----------- -- ---------
自定义配置
除了生成的基础结构，我们还可以通过配置文件进行自定义设置。在项目的根目录下，有一个名为 pwa-config.js 的文件。这个文件是一个 JavaScript 模块。使用它，我们可以添加自定义模块、服务等。
-- -------------------- ---- -------
-- -------------
-------------- - -------- -------- -
-- -------------
-- ------
-------------- - -
------- - -------- - ---- ----------------
----------
--
---------------- - -
------- - --------- - ---- -----------------
-----------
--
--PWA 缓存策略
在 PWA 应用开发中，缓存策略非常重要，因为它可以提高应用性能和用户体验。在 generator-pwa-angular-core 中，默认情况下使用了 sw-toolbox 这个库。sw-toolbox 可以快速帮助我们实现离线缓存功能。在项目的根目录下，有一个名为 ngsw-config.json 的文件。这个文件是一个 JSON 格式的配置文件，我们可以在其中设置缓存、网络、白名单等策略。
-- -------------------- ---- -------
-- ----------------
-
-------- --------------
-------------- --
------- ------
-------------- -----------
------------ -
-------- ---------------- -------------- --------- ---------
------------------------ -
-
-- -
------- ---------
-------------- -------
------------- -----------
------------ -
-------- ---------------
------- --------------------------------
-
--
-在上面的配置中，我们定义了两个缓存组，分别为 app 和 assets。缓存组名字随意取，只要符合语法规则即可。缓存组具体参数的含义可以参考 workbox 参数文档，这里不做过多介绍。需要注意的是，在 app 中，我们缓存了 favicon.ico、index.html、所有的.css 文件和所有的.js 文件。在 assets 中，我们缓存了 assets 下的所有文件，并把 Google Fonts 下载库的资源作为网络请求。
结语
到此为止，我们已经介绍了 generator-pwa-angular-core 的安装、基础结构、自定义配置和 PWA 缓存策略。通过学习此 npm 包，我们可以快速开发出一个基于 Angular 和 PWA 的应用程序。而作为前端开发者，学习使用 PWA 技术将更有利于未来的 Web 开发。是时候行动起来了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ed81e8991b448e0a11