我们将引导您完成创建可以使用最新版本的Angular在移动设备上运行的渐进式Web应用程序的过程。
很长一段时间以来，我们一直注意到前端世界对渐进式Web应用程序（PWA）的浓厚兴趣。
越来越多的公司使用这个概念开发应用程序。用户创建目录（PWA统计数据），我们可以在其中找到有关用例和肯定的信息（改进转换，增加会话期间访问的子页面数或页面上花费的时间）。微软等市场巨头也通过允许开发人员将PWA应用程序添加到Windows应用商店来推广该技术。
我们前一段时间在博客上描述了这些应用程序的功能及其优缺点。有兴趣的人我参考这篇文章。
为什么我们公司也对这个话题感兴趣？我认为不是写一篇文章，而是展示2017年开展的研究图表。
智能手机用户在一个月内从商店下载多少个应用程序？
智能手机用户在大多数热门应用中花费多少时间？
通过分析上面的图表，我们可以得出以下结论：
- 安装了一些必要的应用程序后，用户就不会下载很多新的应用程序。
- 用户将超过95％的时间花在10个最受欢迎的应用程序中：Facebook，Messenger，Youtube，Google Chrome，Gmail，Instagram，WhatsApp和Spotify。我们全新的应用程序在哪里？
- 不愿意下载新应用程序可以通过两种方式理解：大多数人使用智能手机浏览Facebook或通过商店进行当前的应用程序安装过程太复杂，没有人愿意处理。就个人而言，我赞成第二种解释，这就是为什么我认为PWA是改变这些习惯的机会。
在这篇文章中，我想重点介绍使用Angular 7开发PWA应用程序的技术方面。您知道，版本7是目前最新的版本。
Angular PWA使用Angular CLI
就这样。现在，我们有一个使用PWA概念的应用程序的结构。
我们在这里做了什么？
在第一行中，我们使用npm安装了Angular CLI。
使用已安装的Angular CLI，我们为一个名为pwa-example的新应用程序开发了一个结构。在第三步中，我们移动到创建文件夹并添加了一个 @angular/pwa 捆绑包，它自动为我们解决了与配置服务工作者机制相关的一些问题（更多关于这一点）。有关更多信息，请查看Angular 文档。
添加@ angular / pwa后发生了什么。
CLI为我们所做的一切，我们也可以手动完成。因此，问题是：为什么要使用CLI？
我们不必手动完成，但毫无疑问，我们应该了解引擎盖下发生了什么，以及配置是什么样的。
发生了什么 - package.json
在 package.json文件中，依赖项已添加到必要的包中。
发生了什么 - angular.json
在 angular.json文件中，已将通知（包括服务工作者）添加到与配置相关的部分中。
发生了什么 - 服务工作者
服务工作者这个术语在文章中已被使用了几次，但是，它尚未得到解释。
服务工作者扩展了Web工作者机制，这允许我们在后台和与浏览器主线程分离的线程中启动脚本。服务工作者用作客户端和服务器端应用程序之间的“代理”。感谢服务工作者，我们可以缓存静态资源或触发特定的API调用（例如，查询保存在服务器上的购买列表的API，即使不访问Internet也可以下载最少的API）。此外，它们还支持推送通知和后台同步等机制。
服务工作者充当来自应用程序的请求的拦截器的机制。
关于服务人员的一些重要说明：
- 已经开发了服务工作者以使其完全异步，这就是不应该将同步操作和本地存储机制与它们一起使用的原因。
- 服务工作者无法直接访问DOM树。要与应用程序通信，我们应该使用专用方法。
- 我们不应该将服务工作者作为在特定事件之间拯救全球状态的地方。如果我们需要这样的机制，我们应该使用数据库，例如IndexedDB。
- 服务工作者与浏览器的标准缓存控制无关。
目前，所有最流行的浏览器都支持该机制。如果主题看起来很有趣，我建议您阅读 MDN上的 Web Workers API和Service Workers API文章。此外，值得一看的是Jake Archibald关于缓存机制和相关主题相关的文章 - 离线食谱。
发生了什么 - ngsw-config.json
ngsw-config.json是一个文件，我们可以在其中配置与缓存应用程序中的特定资源相关的行为。
我们可以从上面的配置中找到什么？
在本 assetGroups 节中，我们有两个对象。我们通过缓存index.html，JS和CSS文件来配置的第一个; 第二个与从assets 文件夹中缓存本地资源有关 。
项中设置选项的不同： installMode 一个第二updateMode。Angular官方文档解释了这些特定模式之间的区别。
对于缓存API，我们使用 dataGroups 如下面的sampe配置中所示。
发生了什么 - app.module.ts
在app.module.ts中， ServiceWorkerModule 已添加。该模块使我们有机会注入（允许我们管理应用程序的更新，例如，通知用户新版本）或 服务（与推送通知相关），并在浏览器中注册Angular Service Worker。使用该参数，我们可以在SWis应该注册时进行导航。在上面的代码中，我们的基础是文件的生产变量，它指定应用程序是否在生产环境中启动。更多信息可以在这里找到 。
发生了什么 - 总结
就这样。解释不会以两个句子结束，这就是为什么从内部熟悉自动配置很重要的原因。
如何启动Angular PWA
一个非常重要的事情， – ng serve， 是标准的命令，在开发过程中，推出角应用。但是，这并不支持服务工作者，这就是我们无法测试PWA应用程序如何工作的原因。
有一个小服务器将在其上启动应用程序。
在第一行中，我们安装了一个托管我们的应用程序的小服务器。ext命令将我们的应用程序构建为生产版本。然后我们-c-1 通过指向应用程序开发版本所在的文件夹关闭缓存（标志）后启动服务器。
如果一切顺利，我们可以输入URL地址 http：// localhost：8080，并检查服务工作者是否正确注册。就我而言，它看起来像这样：
添加到启动屏幕 - 一键安装
该应用程序工作，所以现在我们必须处理添加功能， 添加到启动屏幕。借助此功能，我们可以将PWA应用程序连接到智能手机的主屏幕。我们不能忘记该功能与移动浏览器有关。它被称为添加到启动屏幕 而不是添加到桌面并不是巧合。
添加此功能包括采取两个步骤。
将manifest.json文件添加到项目中
这就是所谓的Web App Manifest，我们可以在其中输入有关应用程序的基本信息。在这里，我不会详细介绍特定区域的配置。您可以使用我上面链接的文档深入了解。
将manifest.json文件添加到angular.json和index.html
在 angular.json文件中，我们必须将manifest.json文件添加 到assets部分。
在head部分的 index.html文件中，我们必须添加指向创建文件的链接。
我们还必须记住，此功能仅适用于通过HTTPS提供的应用程序。
通知用户关于新版本
在本机应用程序中，通过商店功能向用户通知新版本。您必须下载新版本的应用程序，同时它将在后台安装。在PWA应用程序中，为了接收新版本的应用程序，您需要做的就是刷新页面！
如果我们希望用户了解这种情况，添加一些代码行就足够了：
这导致向用户显示消息，如下所示：
示例渐进式Web应用程序
Claim Register是一个示例应用程序 - 一个注册保险索赔的应用程序的简化版本。
该代码可在GitHub上获得。
它由一个非常简单的索赔登记表和索赔清单组成。基本假设/功能：
- 该应用程序连接 免费API以下载有关汽车品牌的信息。缓存API请求以选择无需访问Internet的汽车品牌。
- 我们在注册表单字段中写的所有内容都保存在缓存中。
- 我们不会故意缓存声明列表（我的声明）以显示行动上的差异。
- 您可以添加也保存在缓存中的照片，这样我们甚至可以在不访问Internet的情况下添加照片，当我们检索它时，单击“保存”按钮，然后将所有内容发送到服务器。
- 在“注册新声明”屏幕上，可以使用“ 启用通知”和“ 发送通知”按钮，这些按钮用于测试与通知相关的功能。
- 除了客户端（claim-reporter-app）之外，在报告库中添加了claim-reporter-server- 它是一个用Node.js编写的简单后端，它允许我们将tge声明保存在内存数据库中，添加通知订阅者（将向其发送通知的人），并发送通知。
似乎应用程序已经正确地开发了“ 它绝对是一个PWA。” 它已经使用来自Google工具的Lighthouse进行了测试。
灯塔报告与样品索赔登记申请有关。
摘要
我们应该记住，PWA使用的想法和机制并不是那么新鲜。
在服务工作者之前，可以使用 Application Cache（AppCache）机制。在Mozilla的档案材料中，我们可能会找到有关 Open Web Apps标准的信息。在2012年W3C发布了Packaged Web Apps（Widgets）推荐。多年来已经存在类似的概念。
当前用户，移动设备和浏览器已准备好使用PWA。
在本文中，我们已经完成了使用Angular 7开发PWA应用程序结构的过程。该框架对该概念有很强的支持。React和Vue也可以很好地处理它。有趣的是，从很长一段时间以来，所有React应用程序都是Progressive Web Apps。
我鼓励您在GitHub上熟悉我们的存储库并开发新的应用程序作为PWA！
閱讀更多 愛碼農 的文章
