自2018年春季以来，渐进式Web应用程序（PWA）的概念已经存在很长时间了，所有主流浏览器都支持此类应用程序，但是PWA技术尽管具有明显的``优势''，但其普及率仍然很低。
Google专家（包括Habré上的专家）非常有能力地撰写有关PWA的文章，但是他们的建议对那些已经熟悉该主题的人更有用。 本文旨在说明Progressive Web Apps并不困难，任何站点的开发人员现在都可以并且应该使用这些技术。
PWA哲学
首先，值得注意的是，PWA应用程序没有确切的定义。 您无法清楚地说出该网站是否为PWA。 这是一个冗长的规模，添加了Web应用程序清单的大二学生Petya可以在手机的主屏幕上创建主页图标； 而且与常规新闻站点在外观上没有区别，只有其中的用户才能说它出奇的快捷和方便，这是因为它内部的某个地方打动了服务人员（服务人员）的热情。
相对论PWA的名称本身就是“渐进式”。 与渐进相比，在什么程度上？ 但是这种相关性实际上非常好，因为您可以研究PWA技术并将其逐步应用到当前的项目中，而无需进行全局重构和重构。
另一方面，PWA有一个主意，这个主意非常明确和强大。 而且它展开的速度可能很好地表明了后果的严重性。
PWA架构
PWA是使用某些技术创建的Web应用程序，以实现指定的目标。
解密目标如下：
可靠-不论网络连接的状态和质量如何，都可以立即下载并显示该应用程序。
快速 （Fast）-网络上的数据交换速度很快，UI流畅且响应迅速。
吸引力 （吸引）-使用户对应用程序的体验舒适愉快，促使他想要一次又一次地体验它。
从Google的角度来看，这正是从外观和风格上将网站与本地应用程序区分开来的地方。
换句话说，为开发人员提供了工具（Service Worker，Push Notifications等）并指明了目标（站点/应用程序应快速加载，在较弱的连接上工作，而不是“滞后”，并在必要时脱机工作）。 开发人员走这条路的距离仅取决于他。
PWA和本机应用程序
PWA看起来与本机应用程序相似的事实实际上是一种美观的解决方案（尽管从心理角度看，它对用户很重要）。 但是，它们在内部是相似的（所有主要应用程序资源都可以存储在客户端上，只有变化的内容将通过网络传输），这是一个巨大的成就。
您甚至可以将其称为一场隐藏的革命。 实际上，浏览器用作存储和运行PWA应用程序的一种虚拟机。 由于Android是android应用程序的虚拟机，因此浏览器也成为PWA的虚拟机。 正如本机应用程序通过文件系统访问其资源一样，PWA也会访问其资源-尽管通过HTTP，但是存储在本地。
而且，所有这些在所有主流浏览器和所有主流平台上的工作都相同。
谷歌攻击iOS有些移动应用程序需要是本机的（您需要性能，对系统资源的访问权等），但是有些应用程序在功能上可以完全实现为PWA。 对于他们现在：
-无需为Android和iOS（和Windows）编写不同的版本
-无需在Google Play和App Store上注册并付款
-打开直接访问桌面
到目前为止，移动应用程序市场对那些可以编写有用的程序但不能/不想为其布局付费的发烧友关闭。 而且，他们不希望与Google和Apple的官僚机构联系以验证该应用程序，之后您会回想起Microsoft的垄断时期。
现在，这些障碍已被打破。 并打破了他们的谷歌。 考虑到正是她是互联网技术的旗舰，所以很可能已经深思熟虑并计算出进入iOS领域的类似情况。 它仍然在等待PWA的繁荣。
当然，PWA与本机应用程序之间存在差异-主要在对系统资源的访问权限上，但是即使在纯HTML5领域，朝着这个方向努力也行得通，对于PWA来说，附加特权将不是问题。
APK与PWA从个人经验来看，我们可以回想起在转移一个新闻网站与Service Worker一起使用后，决定放弃根据该网站的功能制作的Android应用程序的方式。 并不是因为它的支持占用了人力资源，而是因为PWA版本令人惊讶地比Java应用程序更快，更漂亮，更方便。
技术领域
简要考虑一下PWA的主要引擎。
服务人员
PWA的核心是服务人员。 这是位于浏览器中的前端和后端之间的代理层。 所有浏览器请求都会通过它。 分为两个独立的层使我们能够使常规网站到PWA的转换尽可能简单。
通过工作存储，Service Worker可以访问Cache Storage（用于Web资源）和IndexDB（用于数据）。 但是，最重要的是，完全可以自由实施业务逻辑。
例如，您可以接受来自浏览器的请求，检查网络的状态，从存储中获取数据，对它们执行操作，然后将某些结果返回给浏览器-这将认为答案来自服务器。 否则就不会-开发人员想要，他会。 两个浏览器层（客户端前端和Service Worker）使您可以编写完整的应用程序。
同时，对于大多数站点，Service Worker的缓存功能足以变成PWA。
PWA不依赖任何框架，它是纯JavaScript，尽管即使出于某些原因，即使Google的Habré专家也建议使用库代码生成器。 Service Worker是用手工精美编写的，这对于理解和控制应用程序的逻辑是必需的。
从编程的角度来看，Service Worker是页面页面的html代码中包含的一个javascript文件。 开发人员在其中定义了用于处理来自前端和其他功能的请求的逻辑。
Https
PWA要求所有站点资源都必须通过HTTPS协议进行传输。 您可以免费获得SSL证书；某些托管服务商会为您这样做。 但是至关重要的是，该站点没有指向不安全资源的链接-在这种情况下，某些浏览器根本不会显示该站点。
在这种情况下遇到的主要问题是图片。 通常，编辑者或评论员会在资料中放置指向Internet图片的链接，有时它们会自动到达（在资料中）。 必须将图像保存到您自己或通过HTTPS访问的服务中。
应用程序外壳
App Shell只是图形界面，模板的骨架。 例如，以一个带有标题，两列及更多内容的普通站点为例。 粗略地说，我们从当前页面中切出内容以及所有动态信息，剩下的静态内容是应用程序外壳。
最重要的是，应用程序外壳程序存储在客户端上，并在应用程序启动时加载，然后从网络将动态信息加载到客户端中。 并且在加载时，应用程序外壳看起来应该很漂亮（地面上的“加载器”等）。
该站点的体系结构-通过ajax调用下载内容和其他动态信息-可以预先考虑并在该站点上实现，然后过渡到PWA将非常简单。
应用程序外壳就像本机程序外壳一样。 将您的PWA视为本地程序，将会变得更加容易。
网络应用清单
声明性定义浏览器应用程序名称的JSON文件，PWA（全屏，独立等）的图标以及其他一些参数。 允许您将PWA作为单独的应用程序“安装”在智能手机的主屏幕上。
推送通知
如果您使用Chrome DevTools浏览Internet，请在“应用程序”选项卡上打开，可以看到很少有站点使用PWA技术。 并且90％的使用者仅出于推送通知而这样做。
到目前为止，这是最流行和使用最广泛的PWA技术-在过去的几个月中，您第一次访问并使用鼠标查找“阻止”按钮以获取最新新闻的网站的数量有所增加，这种感觉已经增加了很多倍，并且强烈要求自己实施推送就像垃圾邮件。
但是，如果用户已经很显然不在现场，则还可以订阅该用户的第二次或第三次访问。
Google PWA清单推送通知必须及时，准确且相关
从站点启用推送通知，并确保其使用推送通知的用例是：
及时-及时通知是在用户需要时以及对他们而言重要的时候出现的通知。
精确-精确的通知是具有可以立即采取行动的特定信息的通知。
相关-相关消息是有关用户关心的人或主题的消息。
请参阅我们的指南，以创建强大的推送通知以获取建议。 如果您的内容不及时且与该用户无关，请考虑使用电子邮件。