🔪 🚵🏼 😎 渐进式Web应用程序。行动指南 🏐 🎓 🌥️

哈Ha！我们正在探索出版有关PWA（渐进式Web应用程序）的书的可能性。目前已经有很多关于这个主题的哈布雷的出版物中，材料从RUVDS公司的博客是特别感兴趣，从中我们将引用PWA的定义：

...是已从Web应用程序下载的移动应用程序。而且，如您所见，安装此类应用程序无需与Play Market进行交互。结果，此类应用程序的安装尽可能简单。但是，这远非最有趣。通过启动此类程序，即使没有Internet连接，您也有机会使用它们显示的数据。它们使您可以离线与网页进行交互。

有时会出现问题：渐进式Web应用程序与本机Web应用程序如何相关？如果您已经拥有本机，那么开发PWA是否值得？首先，Jason Grigsby在“ A List Apart”站点上的文章回答了这个问题以及其他许多问题，我们今天为您翻译了该问题。本文摘自2018年的书。请不要忘记投票。

为了确定您的组织是否明智地开发自己的渐进式Web应用程序（PWA），请问自己两个问题：

您的组织有网站吗？如果是这样，那么逐步的Web应用程序可能会派上用场。听起来很老套，但是：建议将几乎所有网站都转换为渐进式Web应用程序，因为它们包含Web的最佳实践。
您的组织是否通过网站通过电子销售，广告或其他方式获利？如果是这样，那么您肯定需要一个渐进式Web应用程序，因为它可以显着增加收入。

这并不意味着该站点需要实现渐进式Web应用程序的所有现有功能。您可能不需要提供脱机功能，推送通知，甚至不需要在用户设备的主屏幕上设置站点的功能。绝对最小值可能足以满足需要：安全的站点，加快工作速度的服务工作者，清单文件-这些事情在任何站点上都将派上用场。

当然，您可以确定自己的个人网站或辅助项目不是值得开发渐进式Web应用程序的资源，因此需要花费更多的时间和精力。这是可以理解的，并且从长远来看，当将对这些功能的支持添加到基于这些功能的内容管理系统中时，即使个人站点也将逐渐具有渐进式Web应用程序的功能。例如，在撰写本文时，Magento和WordPress已经宣布了向其平台添加高级Web应用程序功能的计划。预计其他人也会效仿。

但是，如果您经营的网站以任何方式为您的组织带来收益，则应将其转变为渐进式Web应用程序，并计划现在的操作方式。部署了高级Web应用程序的公司获得了更多的转换，用户参与度，增加的销售和广告收入。例如，由于引入了PWA，Pinterest的主要受众增加了60％，用户生成的广告收入增长了44％。西榆树用户开始在该网站上花费大约15倍的时间，一次访问带来的收入增长了9％。

画画：Google的Eddie Osmani撰写了有关Pinterest渐进式Web应用程序的案例研究，并将其与旧的移动网站和其本地应用程序进行了比较。

与渐进式Web应用程序相关的成功案例如此之多，以至于我的公司Cloud Four推出了一个名为PWA Stats的网站来跟踪这些案例。可能会出现与您的组织类似的组织，并且通过此示例，您可以使同事相信渐进式Web应用程序对您公司的适用性。

图片：PWAstats.com包含统计数据和故事，可证明渐进式Web应用程序的有效性。

这种说服力的工作可能是必要的。尽管渐进式Web应用程序具有明显的优势，但许多企业尚未为其进行重组，这通常是因为管理层根本不了解PWA。（因此，当您现在开始创建PWA时，您可能会花费时间！）

但是，对于高级Web应用程序的功能，用途以及它们与本机Web的关系，也存在严重的困惑。应用程序。这种混乱会引起恐惧，不确定性，怀疑，并且所有这些都会减慢渐进式Web应用程序的实施速度。

如果您主张在组织中实施PWA，则有些人可能不了解您，甚至可能遇到阻力。因此，让我们讨论一些论点，这些论点将帮助您巩固自己的地位，并在说服同事时派上用场。

本机应用程序和PWA可以共存

如果您的组织已经有本机应用程序，那么利益相关者可能会反对他们除了不需要任何PWA之外-尤其是因为PWA的主要优点是引入了本机应用程序固有的特性和功能。
诱人的是，假定渐进式Web应用程序与本机Web应用程序竞争-通常，就此而言，它们是在媒体中编写的。但是实际上，无论公司是否已经具有本机应用程序，渐进式Web应用程序都可以工作。

摆脱“本地应用程序与网络应用程序”之争，专注于用户与您的组织在Internet上的网站进行交互的细节。建议仅使用高级Web应用程序是因为其自身的优势：它们可帮助您扩展用户群体，保护网站，获利，与用户进行更可靠的交互并通知他们更新-所有这些都将补充本机应用程序的功能。

自定义受众群体扩展

并非所有当前用户都安装了本机应用程序-而潜在用户根本没有安装本机应用程序。可能大多数应用程序甚至都没有安装该应用程序，但是仍然安装了该应用程序的用户可以从PC上安装该应用程序。

提高与网站的交互质量，可以增加当前和将来的用户阅读您的内容或购买您的产品（甚至下载您的本机应用程序！）的机会。您可以使用渐进式Web应用程序来提高使用该网站的质量。

尽管技术博客向您保证，但移动Web的增长速度快于本机应用程序。 comScore网站将排名前1000的移动应用程序与排名最高的1000的网站进行了比较，得出的结论是：移动网络的受众人数几乎是移动应用程序的三倍，并且增长速度是移动应用程序的两倍。”

尽管人们在自己喜欢的移动应用程序上花费的时间确实比在网络上花费的时间多，但请记住，有时很难说服人们在您的设备上安装您的应用程序。通常，美国大约有一半的智能手机用户每月甚至不安装一个应用程序。

如果您的本机应用程序在应用程序商店中，则不能保证人们会安装它。推广应用程序并鼓励用户安装它的工作非常昂贵。根据移动应用营销公司Liftoff的说法，如果您希望有人在您的应用程序中创建一个帐户，则一个用户安装该应用程序所需的平均费用为4.12美元，并且每位用户的最高费用会飙升至$ 8.21。

如果您足够幸运，并且有人开始安装您的应用程序，则会出现以下障碍：您需要说服人们不要退出使用该应用程序。当专家安德鲁·陈（Andrew Chen）分析了有关1.25亿部手机材料的用户保留数据时，他发现，平均应用程序在安装3天后损失了77％的DAU（每日活跃用户）。在30天内，有90％的DAU丢失。在90天内，超过95％的DAU丢失。

画画：移动用户的忠诚度仍然很短。普通应用程序在90天内失去了95％的活动用户。

渐进式Web应用程序不会面临此类挑战。对于一个人来说，了解渐进式Web应用程序并不比在您的网站上困难，因为这是您的网站。渐进式Web应用程序的所有功能也立即可用。您不必执行中间步骤：首先转到应用程序商店，然后从那里下载应用程序。安装速度很快：当您首次访问该网站时，它会在后台进行，实际上是在主屏幕上添加图标。

正如亚历克斯·罗素（Alex Russell）在其2017年的《中型》文章中写道：

安装PWA时的滑移率要低得多。我们的内部Google指标显示，在PWA标语和本机应用程序标语的数量相当的情况下（该比较几乎与Apple和Apple相同），PWA标语的转化频率提高了5-6倍。在浏览此类标语时决定安装本机应用程序的用户中，有超过一半的用户未完成安装过程，而PWA安装几乎立即发生。

简而言之，您的用户中有很大且还在不断增长的用户通过网络与您交流。渐进式Web应用程序可以增加收入，增加用户参与度及其数量。

保护您的网站

如果您收集信用卡信息或其他专有信息，则只需要为用户提供一个受到良好保护的网站。但是，即使未在您的站点上处理机密数据，使用HTTPS协议并为用户提供与站点的安全交互仍然有意义。看似无害的网络流量可能包含简化用户标识和潜在黑客入侵其数据的信号。对于可能的状态监视，我们可以说些什么。

以前，安全服务器的操作昂贵，复杂，并且（似乎）运行速度比平常慢。今天，一切都变了。 SSL / TLS证书曾经花费数百美元，但今天让我们加密提供商免费送给他们。许多托管提供程序与证书提供程序一起使用，因此您可以一键配置HTTPS。此外，事实证明HTTPS的速度不像以前那样慢。

HTTPS站点还可以升级到称为HTTP / 2的HTTP新版本。 HTTP / 2的主要优点是它比HTTP / 1显着更快。许多托管服务提供商和内容交付网络（CDN）都提供了当您切换到HTTPS时，您将连接到HTTP / 2而无需您进行任何其他操作。

即使这样的激励措施不足以切换到HTTPS，浏览器制造商也会使用“强硬”方法来推动网站进行更改。作为“鞭子”Chrome开始警告用户，他们正在不具备HTTPS的网站上输入数据。其他浏览器可能也会效仿，并会标记无需加密即可工作的站点，以便用户意识到可以拦截其数据。

作为HTTPS姜饼浏览器，浏览器开始强制要求站点提供HTTPS功能。如果您想使用最新最好的Web技术，那么没有HTTPS不能做。实际上，现在认为某些可用于不安全HTTP的功能会影响敏感数据。例如，这就是地理位置。在HTTPS中，它们是受限制的。经过一番思考，看来这也有些鞭策。姜饼鞭？

考虑到所有这些，建议为您的用户提供一个安全的网站。因此，可怕的毫无意义的警告将被立即排除。您可以访问新的浏览器功能。获得HTTP / 2提供的速度提升。并且：为渐进式Web应用程序奠定基础。
为了使用服务工作者（与渐进式Web应用程序有关的一项关键技术），您需要在站点上配备HTTPS。因此，如果您想一次享受PWA的所有好处，首先需要做一些认真的准备工作。

增加利润

有大量研究表明，网站的速度与人们愿意花多少时间和金钱之间存在关联。根据DoubleClick的说法，“ 如果下载页面的时间超过3秒，则53％的移动网站访问中断会由用户启动。”沃尔玛公司发现，优化页面加载速度每100毫秒将下降至额外收入的1％。

最终，高级软件与站点交互的速度非常重要，不幸的是，通过3G连接时加载移动站点页面的平均持续时间为19秒，这也是渐进式Web应用程序可以帮助解决的问题。

通过使用服务人员，PWA提供了难以置信的快速交互。使用服务人员，开发人员可以明确指示浏览器应将哪些文件存储在本地缓存中，以及在什么情况下应检查缓存文件的更新。与从网络检索到的文件相比，可以更快地访问存储在本地缓存中的文件。

在渐进式Web应用程序中请求新页面时，用户已经在设备的本地缓存中拥有显示此页面所需的大多数文件。因此，该页面几乎可以立即加载，因为浏览器仅需要在该页面上下载其他信息。

在许多方面，正是这些因素使本机应用程序实现了高速工作。通过安装本机应用程序，用户可以预下载运行该应用程序所需的文件。之后，本机应用程序仅需从网络检索新数据。与Web交互时，服务人员可以执行类似的操作。

渐进式Web应用程序可以对性能产生巨大影响。例如，Tinder通过开发一个渐进式Web应用程序设法将页面加载时间从11.91秒减少到4.69秒，此外，它比其本机Android应用程序紧凑90％。 Treebo连锁酒店启动了自己的渐进式Web应用程序，并在一年中将其转化率提高了四倍。; 回访用户的转化率提高了三倍，与移动网站的用户互动时间中位数降至1.5秒。

确保网络可靠性

移动网络无法正常运行。您刚刚建立了高速LTE连接，现在您已经以2G的速度爬行，或者通常处于离线状态。我们都发现自己处于这种情况。但是，大多数站点仍在期望与它们一起工作将在可靠的网络上进行。

PWA方法允许您创建一个可以继续离线使用的应用程序。实际上，为了确保脱机使用应用程序并加快与网页的交互，使用了相同的技术：服务工作者。
如您所知，服务人员可以让您明确告知浏览器要在本地缓存哪些数据。可以扩展此类文件：不仅仅将其作为下载应用程序所需的资源，还应作为网页的内容，以使用户即使在脱机时也不会中断其查看。

图片：渐进的housing.com Web应用程序中的标题栏在脱机时从紫色（左）变为灰色（右）。用户先前查看或添加到收藏夹中的内容可以脱机使用（在右侧），这是合理的，因为housing.com应用程序针对印度市场，并且在印度，网络连接速度慢且不可靠。

使用服务工作者，您甚至可以通过“在幕后”来预先缓存应用程序外壳。因此，当访问者首次使用渐进式Web应用程序时，他将能够下载整个应用程序并将其保存在缓存中-就是如此，您可以脱机使用它，而无需用户采取任何其他措施。

不要放开用户

推送通知也许是吸引用户使用应用程序的最佳方法。推送通知引诱一个人，鼓励他返回应用程序以获取美味信息-从紧急新闻到聊天消息。

那么，为什么只对已安装本机应用程序的用户实施推送通知呢？例如，如果您有Messenger应用程序，或者它是设计用于社交网络的，那么将新消息通知用户将非常有帮助。

图：一个名为Twitter Lite的渐进式Twitter应用程序发送与本机应用程序相同的通知（左）。选择此类通知时，您立即转到Twitter Lite，转到它所指向的推文（右）。

渐进式Web应用程序，尤其是我们喜欢的服务工作者，使我们可以在任何站点上使用推送通知。通知不是渐进式Web应用程序中必需的功能，但是它们通常可以有效地改善用户的重新参与度和收入增长。

无论您是否具有本机应用程序，渐进式Web应用程序都不会打扰您。开发此类应用程序的每个步骤都是朝着改进网站迈出的一步。网站必须安全。一定要快。如果它们可以脱机使用，并且在必要时可以向用户发送通知，那将是很好的。
那些没有您的本机应用程序（或未使用本机应用程序）的用户会喜欢这样的事实，即使用您的网站变得更加方便。整个业务的一大优势。很简单。