白癜风学术峰会 https://m.39.net/news/a_5333177.html我们将引导您完成创建可以使用最新版本的Angular在移动设备上运行的渐进式Web应用程序的过程。
很长一段时间以来，我们一直注意到前端世界对渐进式Web应用程序（PWA）的浓厚兴趣。
越来越多的公司使用这个概念开发应用程序。用户创建目录（PWA统计数据），我们可以在其中找到有关用例和肯定的信息（改进转换，增加会话期间访问的子页面数或页面上花费的时间）。微软等市场巨头也通过允许开发人员将PWA应用程序添加到Windows应用商店来推广该技术。
我们前一段时间在博客上描述了这些应用程序的功能及其优缺点。有兴趣的人我参考这篇文章。
为什么我们公司也对这个话题感兴趣？我认为不是写一篇文章，而是展示年开展的研究图表。
智能手机用户在一个月内从商店下载多少个应用程序？
智能手机用户在大多数热门应用中花费多少时间？
通过分析上面的图表，我们可以得出以下结论：
安装了一些必要的应用程序后，用户就不会下载很多新的应用程序。用户将超过95％的时间花在10个最受欢迎的应用程序中：Facebook，Messenger，Youtube，GoogleChrome，Gmail，Instagram，WhatsApp和Spotify。我们全新的应用程序在哪里？不愿意下载新应用程序可以通过两种方式理解：大多数人使用智能手机浏览Facebook或通过商店进行当前的应用程序安装过程太复杂，没有人愿意处理。就个人而言，我赞成第二种解释，这就是为什么我认为PWA是改变这些习惯的机会。在这篇文章中，我想重点介绍使用Angular7开发PWA应用程序的技术方面。您知道，版本7是目前最新的版本。
AngularPWA使用AngularCLI
就这样。现在，我们有一个使用PWA概念的应用程序的结构。
我们在这里做了什么？
在第一行中，我们使用npm安装了AngularCLI。
使用已安装的AngularCLI，我们为一个名为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上的WebWorkersAPI和ServiceWorkersAPI文章。此外，值得一看的是JakeArchibald关于缓存机制和相关主题相关的文章-离线食谱。
发生了什么-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已添加。该模块使我们有机会注入（允许我们管理应用程序的更新，例如，通知用户新版本）或服务（与推送通知相关），并在浏览器中注册AngularServiceWorker。使用该参数，我们可以在SWis应该注册时进行导航。在上面的代码中，我们的基础是文件的生产变量，它指定应用程序是否在生产环境中启动。更多信息可以在这里找到。
发生了什么-总结
就这样。解释不会以两个句子结束，这就是为什么从内部熟悉自动配置很重要的原因。
如何启动AngularPWA
一个非常重要的事情，–ngserve，是标准的命令，在开发过程中，推出角应用。但是，这并不支持服务工作者，这就是我们无法测试PWA应用程序如何工作的原因。
有一个小服务器将在其上启动应用程序。
在第一行中，我们安装了一个托管我们的应用程序的小服务器。ext命令将我们的应用程序构建为生产版本。然后我们-c-1通过指向应用程序开发版本所在的文件夹关闭缓存（标志）后启动服务器。
如果一切顺利，我们可以输入URL地址
