您浏览过任何网站时，是否曾经看到Android智能手机屏幕上出现的“添加到主屏幕”按钮？ 如果单击此按钮，则会在后台在手机上安装某个应用程序，用于启动的图标将进入主屏幕。 现在，可以像以前一样启动此应用程序并在该站点上工作，但只能在常规电话界面中使用。
我们正在谈论的是从Web应用程序下载的移动应用程序。 而且，如您所见，安装此类应用程序无需与Play Market进行交互。 结果，此类应用程序的安装尽可能简单。 但是，这远非最有趣。 通过启动此类程序，即使没有Internet连接，您也有机会使用它们显示的数据。 它们使您可以离线与网页进行交互。 好吧，那不是很棒吗？
我们今天发布的材料的作者将讨论此类应用程序，为何需要它们以及如何创建它们。
您可能已经了解到，我们只是在谈论所谓的渐进式Web应用程序（PWA）。 这样的应用程序可以直接从浏览器窗口安装，启动它的图标看起来像普通移动应用程序的图标，并且它像许多移动应用程序一样，允许您在没有互联网连接的情况下使用它。
添加到主屏幕按钮现在让我们谈谈在应用于Web应用程序时什么是“渐进性”。 我建议更好地了解它们，找出它们与常规Web应用程序的区别，此外，我想告诉您为什么我相信PWA比传统的移动应用程序更好。
什么是渐进式Web应用程序？
术语“渐进式Web应用程序”是Alex Russell和Frances Berriman创造的。 据Alex称，渐进式Web应用程序只是采用了正确维生素的网站。 PWA的核心不能被称为新框架或新技术。 实际上，这是一组高级开发方法，使您可以使Web应用程序的行为与经典台式机或移动应用程序的行为非常相似。
主屏幕上的PWA图标PWA通过逐步的应用程序增强为用户提供了新的可用性。 通常，这意味着PWA在不同世代的移动设备上将大致相同。 当然，普通电话应用程序的某些功能可能不可用，但是这些应用程序通常以它们应为它们工作的方式在不同的设备上工作。
为什么需要高级Web应用程序？
在弄清楚为什么根本需要PWA之前，让我们先谈一下在设计Web应用程序和常规移动应用程序时遇到的问题。
- 互联网连接速度慢。 也许，在您居住的地方，借助快速的互联网，一切都井井有条，因此，此问题不会影响您。 但是，世界上仍有60％的人口使用2G互联网。 即使在美国，某些用户也只能获得速度，这与使用简单电话线的普通调制解调器的速度不相上下。
- 网站加载缓慢。 如果网站加载非常缓慢，您是否知道用户等待多长时间才能单击关闭窗口按钮？ 三秒钟！ 53％的用户离开网站的速度太慢。
- 安装应用程序的复杂性。 用户不希望安装常规的移动应用程序。 平均用户每月安装0个应用程序。
- 让用户参与使用应用程序。 用户将大部分时间都花在普通的移动应用程序上，但移动网络应用程序的覆盖范围大约是其三倍。 结果，大多数用户没有特别积极地参与应用程序的工作，尽管这些用户80％的时间都花在了他们最常使用的三个移动应用程序中。
渐进式Web应用程序有助于解决这些问题。
行动中的PWA使用PWA的原因很多，在这里我想强调一下它们提供的主要功能。 如果用一个词来描述这些功能，则FIRE代表快速，集成，可靠，参与，也就是说，渐进式Web应用程序应该快速，集成到设备的工作环境中，可靠，并具有吸引用户参与其中的手段。
- 如果我们谈论速度，那么PWA在用户与他们互动的所有阶段都将迅速发挥作用。 它们可以快速安装，快速启动，快速工作。 由于PWA允许您缓存数据，因此即使不访问网络资源，重新启动此类应用程序的速度也非常快。
- PWA在设备环境中的集成表现为这样的应用程序的行为类似于常规应用程序。 用于启动它们的图标在主屏幕上，它们可以使用推送通知，它们可以使用与常规应用程序相同的设备功能。 结果，当使用渐进式Web应用程序时，用户不会感到自己正在离开熟悉的环境。
- 集成Web应用程序的可靠性基于以下事实：由于可以使用服务工作者缓存数据，因此即使不连接网络也可以正常工作。
- PWA与用户互动的能力基于他们可以向用户发送通知的事实。 这使您可以使用户了解与该应用程序有关的有趣事件，并吸引他使用该应用程序。
如何创建渐进式Web应用程序？
Google已发布了用于开发高级Web应用程序的
清单 。 考虑一个应用程序的最低要求，遵循该要求可以将其称为PWA。
▍1。 申请清单
PWA清单是带有以下内容的
manifest.json文件：
{ "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }
我们面前有一个常规的JSON文件，其中包含有关Web应用程序的元信息。 这里有关于应用程序图标的数据（用户在安装应用程序后在主屏幕上看到的一个图标），应用程序的背景色，其全名和缩写名，等等。 您可以自己编写此清单，也可以使用自动创建此类文件的特殊
工具 。
一个使创建manifest.json文件更容易的网站▍2。 服务人员
服务工作者是事件驱动的工作者，他们在应用程序的后台运行，并充当应用程序和网络资源之间的中介。 他们可以拦截网络请求并缓存应用程序的信息。 它们可用于下载计划用来确保应用程序脱机工作的数据。 服务工作者是JavaScript程序，它们拦截某些事件的处理并执行某些任务。
这是一个示例
serviceworker.js文件。
self.addEventListener('fetch', event => { // const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request); }
▍3。 徽章
图标用于启动安装在PWA设备上的图标。 前面提到的有助于创建清单文件的站点，使您可以基于上载到该站点的512x512像素大小的单个图像文件自动生成一组应用程序图标。 生成的文件以
.png格式保存。
▍4。 安全性
为了将某些应用程序称为PWA，它必须支持使用HTTPS通过安全通信通道进行的数据交换。 使用Cloudflare和LetsEncrypt等服务的功能很容易获得用于组织这种连接的SSL证书。 如今，应用程序保护不仅是绝对必要的，而且还是向用户证明应用程序的可靠性并与用户建立信任关系的一种方式。
总结
在本文中，我们讨论了渐进式Web应用程序，讨论了为什么需要它们，它们解决了什么问题，向它们提出了什么要求。 在这里，我们还谈到了它们的开发主题，尤其是，我们讨论了PWA清单，服务工作者，应用程序图标，以及它们需要使用HTTPS保护的问题。 PWA技术通常被视为与Android智能手机完全相关的东西，直到最近，这种观点才具有生命权。 但是，考虑到今年发生的
事件 ，可以说PWA在许多平台上都有非常有趣的未来。 实际上，PWA的主题还远远没有被所有这些用尽。 因此，我们很有可能会返回到它。
亲爱的读者们！ 您对渐进式Web应用程序有何看法？