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

时间 2019-11-16

标签 pwa 渐进 web 应用须要知道一切栏目 HTML 繁體版

原文原文链接

做者：Ronak Patel
翻译：疯狂的技术宅前端

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

未经容许严禁转载程序员

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

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

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

人们不只浏览社交媒体网站，还浏览服务和产品。因此针对移动进行优化是全部业务战略的核心。segmentfault

可是，因为预算或其余缘由而没有开发原生应用的小公司立刻就要笑了，由于本机应用很快就会被 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 十、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？

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

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

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

更多文章...