前端 - PWA – 渐进式Web应用：你需要知道的一切 - 疯狂的技术宅

作者：Ronak Patel
翻译：疯狂的技术宅

原文：https://aglowiditsolutions.co...

未经允许严禁转载

你是否正处于选择 App 开发技术的两难境地？如今，渐进式 Web 应用程序需求旺盛。知道这是为什么吗？

下面让我们来详细的梳理一下。

移动电话用户的增长促使在线企业重新考虑对移动应用的优化。手机端占用了超过 60％的互联网流量。

人们不仅浏览社交媒体网站，还浏览服务和产品。所以针对移动进行优化是所有业务战略的核心。

但是，由于预算或其他原因而没有开发原生应用的小公司马上就要笑了，因为本机应用很快就会被 PWA（Progressive Web Apps）所取代。

不过这并不意味着它现在就会发生，而且 PWA 和原生应用程序的大概率也会并存。

PWA就像原生应用一样，能干为用户提供更快、更顺畅和可扩展的服务。

让我们了解一下 PWA 在营销领域的其他方面。

根据 Akamai 的统计显示“网站加载时间延迟100毫秒可能会使转化率减少7％的影响”。

这意味着内容加载的速度具有相当大的意义。从这个角度来看，PWA 可以成为吸引客户的最佳选择，因为它提供了快速的服务和引人注目的性能。

毫无疑问，PWA 比原生应用程序更快更流畅，而离线功能增加了它的上限。

PWA的历史

PWA 的想法是由 Google 工程师 Alex Russell 在 2015 年提出的。但是它需要一些时间来获得科技行业的认可。由于技术不分国界，可以随时向任何地方流动，为了达到其目标受众，PWA 现在受到了商业组织的高度关注。

什么是 Progressive Web Apps？

在深入探讨之前，让我们先来了解PWA（Progressive Web Apps）是什么，以及它将如何成为移动应用的未来（在某种程度上）。

简单来说，Progressive Web Application 不是一个真正的应用程序，但它使用现代 Web 功能，它为用户提供类似应用程序的体验。

当你在浏览器中打开一个网站时，你可能会看到一个“添加到主屏幕”的弹出窗口。

如果你允许，将获得在桌面或移动设备上创建的“Lite”版应用程序，该版本提供原生应用般的体验。

此外，你还可以获得离线功能。但是对于 PWA 应用的离线功能有一些不同的看法。例如并非所有 PWA 都脱机运行，Instagram 就是这样的例子。

当你把 Instagram 添加为 PWA 时，可以在联机时使用它，但在脱机时它不起作用。不过其原生应用是可以离线使用的（但只有4到5个功能可用）。

为什么选择PWA？

PWA 对用户和服务提供商都很有帮助。正如我们前面提到的那样，有些没有原生应用的企业可以通过定位移动用户的大量受众来获得 PWA 的最大优势。

此外，由于存储容量和 RAM 较少而不想安装原生应用的用户也可以从中受益。

PWA 的优点

在未来几年内，PWA 将会取代原生应用。全球研究和咨询公司 Gartner 的这种猜测令人难以置信。

其报告中认为：“WPA 将影响你的移动应用策略”，它表示由于“应用疲劳”，原生应用的下载量将会减少。用户对于大量容易混淆的应用程序感到不知所措，不知道该下载哪个。

此外，手机中的应用数量会影响其内存和存储空间，因此很所用户都无法下载原生应用。

Gartner报告还预测，到 2020 年，50％的“通用的、面向消费者”的原生应用将被 PWA** 所取代。

PWA 占用的空间更少
不需要太大的网络带宽，甚至可以在 2G 网络上工作
可以脱机工作
不需要对应用进行更新
降低开发成本
更好的性能
更好的体验

PWA 的平台支持

PWA 支持所有浏览器和平台，但由于其处于开发过程中，可能不适用于所有移动设备。

Microsoft Edge

支持 PWA 的新版 Windows 10 于 2018 年 4月发布。在此之前 Microsof t已允许用户通过 Microsoft Edge 列出 PWA。

Microsoft Store

所有 PWA 应用都可以在 Microsoft Store 中找到。开发人员可以在商店中创建启用 PWA 的应用和列表，而 Microsoft 也支持用 Bing 查找流行的 PWA 应用程序。

Chrome

截至目前，Google Chrome 还不支持将这种技术用于桌面，但它正在开发之中。

Google 已宣布正在开发支持 PWA 的浏览器，该浏览器将很快发布。从现在开始，你可以随时在浏览器中查看此类内容。

Android

它对 Android 的 Google Chrome 支持的非常好。

你只需在移动浏览器中打开支持 PWA 的网站，就会立即在你的手机中列出该应用。此外 Chrome 正在研究 PWA 的许多可能性，例如将 PWA 添加到 play store。

此外，这家科技巨头也正在考虑建立一个名为 WebAPK 的技术，这有助于将 PWA 变成 APK 文件。这将允许将 PWA 像其他原生应用一样安装在设备中。

iOS

没有完全实现其功能，但科技巨头苹果公司考虑到其在用户中的重要性和受欢迎程度，在去年 3 月 30 日正式发布的 iOS 11.3 中默默地添加了该功能。但是该功能还处于测试版模式，并且尚未添加 PWA 的所有功能。不过它很快就会启用。

Trivago —— 领先的酒店预订和优惠服务 App 之一，他们已经在大多数平台上发布了 PWA，现在 Trivago 已经在 Windows 10、Android、Chrome for web等平台上实现。

添加到主屏幕的用户的参与度增加了150％，从旧移动网站用户平均只有 0.8 次重复访问，到 PWA 用户的两次访问。（来源：Trivago PWA统计数据）

事实上，Trivago 并不是唯一一个实现这一目标的人，还有很多人尝到了 PWA 的甜头。

让我们来看一下......

PWA 示例及其统计信息

PWA 有许多案例，因为许多公司都使用 PWA 获得了显着的好处。其中有 Twitter、Flipboard、AliExpress等等。让我们举几个顶级公司的例子，以及他们用 PWA 获得的好处。

1) AliExpress

AliExpress （阿里全球速卖通）是最好的电子商务网站，拥有来自世界各地的大量客户。在添加 PWA 之后，该策略使 iOS 转换率提高了82％，同时页面访问量翻了一番。

2) Make My Trip

PWA 战略帮助最大的旅游网站 “Make my trip” 的数据使用量减少了 70％，同时减少了 75％的推文减少了。

3) Twitter

Twitter 是采用 PWA 后最大的受益者之一。它每天得到 250,000 个独立访客。

4) Flipkart

在将 PWA 纳入其营销策略后，顶级电子商务网站 Flipkart 的转换率提高了 70％。此外，该网站记录到了 40％的新访客。

5) 福布斯

福布斯是关于信息、新闻和故事的热门网站之一。在启用 PWA 后，其网站的使用率增加了100％，公司声称其加载页面只需 0.8 秒（与之前的 3 -12 秒相比）。

Similarly, various websites are there which turned into Progressive Web Applications and achieved its goal in a very short period. You can check more stats here.
同样，各种网站都变成了渐进式Web应用程序，并在很短的时间内实现了目标。你可以查看更多统计数据[这里]（https://www.pwastats.com/）。

PWA 框架与工具

可以使用各种框架，库和工具构建 PWA 应用。所有这些都是提供可靠支持的。以下是你可以用来构建 PWA 网站的技术列表。

1) Angular

Angular 在前端开发界非常流行，可帮助开发人员创建响应迅速的 PWA 应用。使用 Angular 5 创建PWA网站变得非常简单，因为你获得了内置的 PWA 支持，这使你可以轻松工作。

2) Polymer

Google 开发的 Polymer 包含大量的 Web 组件、工具和模板，使你的 PWA 开发变得非常简单。聚合物包含纯HTML/CSS/JS，使其成为完全独立的框架。这就是它适用于 PWA 的原因。

3) Ionic

Ionic 是开发人员创建 PWA 网站的最佳选择。它具有单代码库功能，可帮助 Web 应用根据设备优化自身。 Ionic Progressive Web App 还有丰富的内置 UI，这使得 PWA 可以通过浏览器和移动设备更快地运行。

4) React

React 无疑是创建响应式 Web 应用的最佳技术平台，同时也可以编写 PWA 网站。大量的库支持可帮助开发人员创建最佳 React PWA。

除此之外，还有其他框架和库，可以帮助你开发 PWA。

阅读我们的文章： 在 2019 年最吸睛的十大移动应用程序框架

PWA 的功能

PWA 几乎和原生应用一样，但存在一些差异。 PWA 的功能少于原生功能。但是在可用性方面，它都设置为跨越本机应用程序。 PWA 对于小型企业至关重要，因为这可以帮助他们定位大型移动用户。所以，让我们来谈谈它的未来以及它将如何帮助商业用户获得最大的用户关注。

响应性

PWA 具有响应性，可以适应任何屏幕尺寸，无论是在移动设备、tab、fab还是桌面，PWA 能适合所有屏幕尺寸。

连通性

它可以离线工作，即使你没有稳定的互联网连接，它也可以顺利运行。

先进

PWA 可以用于所有的浏览器，但必须是现代浏览器并合乎 PWA 的规则。

原生体验

PWA 不是应用程序，你无法在 Play Store 中找到所有的 PWA，但它能够提供原生应用般的体验。

永远保持最新

无需更新下载原生应用，它会更新你的 PWA 页面，这会在你上线时自动进行。

可分享

你可以使用此功能与其他用户共享你的内容或该应用。

安全

PWA 通过 HTTPS 提供，因此用起来非常安全，就像使用 Web 浏览器和原生应用一样。

可发现

PWA 是搜索引擎友好的，它可以很容易地被探索和发现，也可以直接打开。

推送通知

PWA 支持推送通知，以便营销人员可以向用户直接发送通知并共享更新和提醒信息。

离线支持

离线支持使 PWA 完全与众不同，甚至让它变得可爱。PWA 提供顺畅的访问体验，即使网络连接不良也是如此。

可安装

“添加到主屏幕”允许你随时安装并使用“精简版” 的 PWA 网站。

快速加载

PWA 以即时加载而闻名。你请求的内容很快就会出现在屏幕上。

PWA 高效且经济

的确。一方面你必须花费大量资金来构建原生应用，而创建支持 PWA 的网站几乎不需要任何额外的费用。

你只需花一点小钱甚至一分钱也不需要支付。就可用性而言，与原生应用相比它将非常高效。

它需要更少的空间（几乎没有空间），不需要强大的网络连接，并且能够比原生程序更快地获取信息。你还需要什么？

PWA – 移动应用的未来

技术趋势可以左右任何有利可图的方向，前提是它具有有用的功能、出色的可用性和最佳的用户界面。

PWA 拥有一切有利于最新技术需求的东西。所以我们不能忽视它。但是它需要一些时间来颠覆原生应用。

随着它的发展可以预期，到2020年我们将看到现代 Web 技术的新时代。

PWA 是否存在限制？

PWA 是轻量级但功能丰富的应用程序，任何人都可以将其用作原生应用。事实上离线功能增加了用户群，并且还在不断增长。最重要的是，你不需要通过应用商店来下载它，这意味着即使你的智能手机没有 Play Store，也可以使用 PWA 应用。特别是支持 Google Chrome 和 Mozilla 等现代浏览器的手机。

然而，由于一切事务都有利弊，PWA 也不例外。不过限制也可能不会引起多少麻烦，你可能仍然喜欢使用它。那么为什么不在使用之前检查一下这些限制呢？

1) 需要更多时间才能启用网站 PWA

首先，它不会被视为真正的限制，因为每个网站都需要通过开发过程来添加 PWA 功能。但是它需要额外的时间来进行构建。例如当你尝试构建 MVP 时，它可能会占用开发时间。

2) Web和硬件之间的冲突

与原生应用一样，Web 浏览器无法访问设备的硬件。因此它可能无法提供出色的用户体验。你可以每次只进行一个操作。

3) 只有现代 Web 浏览器支持PWA

PWA 只能通过现代 Web 浏览器访问，传统浏览器无法访问它。这可能会给仍在使用旧版软件的公司带来问题。

4) 并不是与所有操作系统都完全兼容

由于该技术是新的，到目前为止 PWA 功能尚未被整体采用。但是考虑到它的重要性，所有操作系统现在都将这些功能添加到了他们的系统中。iOS 在 11.3 中添加了此功能。但是它仍处于测试阶段。这意味着 Apple 正在考虑在其操作系统中添加稳定的 PWA 功能。

5) 最大电池使用使用寿命

PWA 不适合你的设备电池。它在你打开 PWA 应用时会使用你的设备资源。这就是它影响电池寿命的原因。

结论

PWA 对于必须构建原生应用的企业非常重要。如果人们倾向于使用 PWA，那么他们将为此增加收益。所以为什么不立即启用你的网站 PWA？

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...

PWA – 渐进式Web应用：你需要知道的一切