还在学习微信小程序?Google说PWA是未来!

by admin on 2020年4月28日

近日,微软Edge团队发表了一篇博文,介绍Web应用在微软的发展过程。本文将择要介绍Web应用如何从一个“大型的文档空间(a
large universe of
documents)”演化成了如今的通用应用程序平台。

昨天,我们的团队收到Google团队发来的一封邮件,说到Chrome浏览器应用程序目前计划在2018年第一季度停止在Windows,Mac和Linux上工作,因为Chrome将继续专注于开放网络。Chrome团队现在正致力于在桌面上安装渐进式Web应用程序(PWA)。

IT之家6月19日消息渐进式web应用已经存在了大约四年。微软非常喜欢PWA,Windows
10中的PWA能够像常规应用程序一样运行,因为它们支持Cortana集成、实时磁贴、通知等。

在Windows上,最早的Web应用形态可能是IE9引入的“钉选网站(Pinned
Sites)”。所谓的钉选网站是指站点可以固定到Windows
7任务栏,并且可以使用自定义的图标。后来,该特性提供了一个类似清单文件的东西,告诉平台该站点可以“像一个应用”那样运行,并提供了如何集成到主屏幕/开始菜单的详细信息。而且,当W3C推出了相应的清单文件标准时,他们欣然采用了新的标准。

图片 1

由新款Edge或甚至Chrome浏览器生成的PWA可能很快就会在Windows
10上更加原生的运行。根据外媒报道,微软正在测试将PWA集成到控制面板或设置应用程序中的新选项,以便你可以像本机一样卸载PWA应用程序。

Web应用的真正出现是在Windows 8上。有段时间,Windows
8去掉了开始菜单,其初衷是为了让Web成为Windows上的一等公民,让Web真正可以在浏览器之外运行,而且不需要原生代码。从技术上讲,浏览器进程甚至都没有参与Web应用在Windows上的运行,减少了内存/CPU的工作负载,每个Web应用都有自己的缓存。Web应用完全整合进了Windows的应用模型,让用户可以管理通知,离线或在后台运行应用,甚至像原生应用那样卸载它们。开发人员可以更深入地集成平台,使用一些Web平台原本不具备的原生功能。微软创建了类似chrome.* namespace的Windows
Runtime JS APIs。自此,WinRT孕育了Pointer
Events、Web
Notifications、Push
API、Web
Payments等API,使Web应用可以更快地用上原生功能。

那么,PWA是否能带来新一轮大前端技术洗牌?

目前,Chromium浏览器生成的Progressive Web Apps无法像常规Windows
10应用程序一样卸载。

为了将Web应用打包,创建离线优先的用户体验,让其直接与原生应用进行竞争,Windows
10提供了“托管Web应用(HWA)”。它提供了一个简单的清单文件,指向Web应用的URL。HWA应用可以像打包的应用那样独立于浏览器运行,但实时从服务器加载,让用户可以免于冗长的应用商店提交过程。

**PWA 的优势在哪?**

要卸载Chrome
PWA,你需要单击应用程序窗口顶部的汉堡菜单按钮,然后单击卸载。如下面的屏幕截图所示,无法从“开始”菜单,“设置”或“控制面板”中卸载Chrome生成的PWA,因为Windows无法识别它们。

Progressive Web
App(PWA)是HWA的一个自然扩展。本质上,PWA是HWA加上如下已经在开发的标准:

社长酱从用户角度,来列举一下和传统网页应用相比的优势。

▲Chrome版目前不可以在系统中卸载

  • Fetch(以预览构建版形式提供)

  • Service
    Worker(开发中)

  • Cache
    API(开发中)

  • Push
    API(开发中)

消息推送。用户只要允许,即使网页关闭后仍然可以在系统通知栏收到推送消息。(自从知道
Facebook 应用为了消息的即时性强制阻止安卓系统进入节电模式后,就卸载了
Facebook 原生应用改用他们的网页推送了)

微软现在开发了一项新的更改,允许从“设置”或“控制面板”中卸载Windows
10上的PWA应用。微软已经在新Edge浏览器上实施了这一变革,并且微软决心在所有Chromium浏览器中实现相同的体验。

在许多方面,现有的PWA实现(Android上的Chrome/Opera/Samsung)仍然把Web应用作为二等公民。它们有主屏幕快捷方式,但不会出现在应用列表中,也不会报告存储/数据/电池的使用情况,无法配置、管理、卸载等。微软的目标更进一步,他们希望解决这些问题,提供全功能的应用。

后台加载。往常的网页应用只要关闭了网页他的生命就结束了,现在引入了一个
Service Worker 的概念,即使网页关闭,PWA
仍然可以在后台运行获取数据更新(当然有限制)。

▲Edge版可以在系统中卸载

目前,正在进行的工作有以下两项:

离线使用。PWA
打开后会缓存一些内容,之后再次访问即使没有网络也可以浏览之前的页面(如同IE时代的离线浏览)。

根据微软在Chromium
Gerrit上发布的提交,该功能被标记为“有效”,并且很快就会发布到其他Chromium浏览器上。

  1. 实现上述标准;

  2. 在Windows应用商店中构建对W3C
    Web应用清单的支持。

原生应用界面。在某些情况下 PWA
应用可以隐藏浏览器本身的所有视觉成分,光从UI和UX上看,很容易认为这就是一个原生界面,如下图其实都是PWA而不是原生应用。

微软Edge工程师Sunggook
Chue写道:“这一变化允许从‘卸载或更改程序’控制面板中卸载Windows上已安装的Web应用程序。”

第一项工作让PWA可以通过Chrome/Opera运行在Android平台上,或者通过EdgeHTML运行在Windows平台上。第二项工作让PWA可以出现在应用商店的列表中,并在浏览器页签之外运行。如何在应用商店中列出PWA,用户如何在Windows上安装PWA,这是微软正在努力解决的两个实际问题。感兴趣的读者可以关注Edge开发的官方Twitter。

桌面图标。PWA只要配上一个图标,再放快捷方式在桌面上(比如一定时间内第二次访问PWA会自动询问是否添加快捷方式到桌面),就真的和原生系统无异了,打开的速度也很快(当然功能不能很庞大)。

“在快捷方式创建操作后,我们在Windows注册表中添加‘Uninstall
Registry’条目。注册表项是众所周知的,系统会读取条目以填充添加删除程序,”Chue补充道。

出处:InfoQ
 作者 谢丽

另一方面,和原生应用比,PWA 又不需要用户安装,只需要浏览器支持 PWA
就可以了。

**PWA 的发展

这个概念在行业内发展的挺快,在本文的这个时间点上,基于 Chromium 的浏览器
Chrome 和 Opera 已经完全支持 PWA 了,Firefox 和微软的 Edge
正在开发中,水果公司的 Safari 最近刚刚表达了可能会支持
PWA。从长久的角度看,只要 Google 不断推动一些网站往 PWA
转型,其他的浏览器或者竞争对手也就会自然跟风上船。

网上已经可以找到大把的 PWA
例子了,这里有不少: The Washington
Post,Flip Board,AliExpress,Wikipedia,Gmail,Booking 这样的大头。

里面有个 Air Honer
很有意思,大家可以玩一下(小心有声音别在开会的时候打开。。),The Air
Horner,从点开到使用只需要点击一次屏幕(不需要安装),使用体验又非常接近原生应用(UI/UX设计,桌面图标)。

图片 2

图片 3

图片 4

图片 5

放眼未来:PWA 将带来前端技术洗牌?

  1. 业界厂商纷纷支持,包括苹果

各家浏览器厂商在 2017 年开始大力支持 PWA,下图统计了主流浏览器对 PWA
的支持程度,可以看到,大部分浏览器对 PWA 已经支持得很好了。

图片 6

图片来源于 ispwaready

UC 浏览器开发的 U2 内核已经支持 Push API 了,也是国内第一个支持 Push API
的浏览器。现在浏览器厂商唯恐自己没跟上标准,而被淘汰。

不仅国内浏览器厂商的态度发生转变,连苹果都已经在几个月前悄悄的进行了
Service Worker 的开发了,相信在不远的将来,iOS 也将支持 PWA。

  1. PWA 开发门槛也在降低

为了降低 PWA 的开发门槛,业界也推出了相应的工具。

例如,百度推出的 Lavas 就是一个开源的命令行工具,可以通过它来快速创建
PWA 项目。它提供了多种常用的 APP Shell
给用户选择,降低了开发成本,也简化了工作流程,让 PWA 项目变得易于管理。

  1. 各大站点纷纷实践,用 PWA 已成趋势?

PWA 刚推出时,就获得了很多大型站点的支持,比如印度最大的电商网站
Flipcart,它是第一个大规模应用 PWA
的站点,也取得了非常好的收益,用户停留时长增长了 3 倍。除 Flipcart
之外,还有很多不错的案例。下面我们来看看国内外的两个站点的实践案例。

案例 1:Twitter Lite PWA

首先,国外的 Twitter 在 2017 年上线了 Twitter Lite PWA, Google
开发者网站上有 Twitter PWA 的案例分析。Twitter Lite PWA 同样收益惊人:

平均用户停留时长增长 65%

Web 站点发推的数量增长 75% (Amazing)

跳出率降低 20%

Twitter Lite 能取得这样的成绩,归功于 PWA
的新技术和用户体验至上的设计原则:它通过 Service Worker
缓存文件,让页面可以离线,同时降低网络消耗;通过 Web Push
接受服务器推送的消息;采用 App Shell 的设计模型,配合 Service Worker
能让页面瞬间展现。

案例 2:ele.me PWA

Google 开发者网站上也对 ele.me 的案例进行了
分析。从这个案例分析中,我们可以看到 ele.me PWA 改造的收益如下:

预缓存的页面平均加载时间减少 11.6%

所有页面的平均加载时间减少 6.35%

在 3G 网络并且是第一次加载时,从页面加载到用户可操作的时间下降到 4.93s

可见,ele.me 同样取得了很不错的收益。不同于 Twitter Lite,ele.me 是 MPA
站点,这会让站点变的更复杂,并且体验不如 SPA 那么顺畅,但是 ele.me
充分利用了 PWA 的各种新技术和设计模式,将 MPA 的影响降到最小,比如使用了
PRPL 模式,最大程度的降低页面的首屏时间,还采用了 App Skeleton
的设计方式让用户对正在加载的页面内容有心里预期。

Twitter 和 ele.me 只是 PWA
站点中两个效果比较显著的案例,同样还有很多其他的案例,可以访问 Google
的案例分析页面合集:

实际收益明显,再加上 Google 的强力支持,使得 PWA
的增长非常迅速,越来越多的互联网大站跟进。下面这张图列出了一些站点,从最开始的
Flipcart,到目前的 Instangram、Uber、Twitter、Starbucks
等,不仅数量在增加,站点等级和质量也在不断地提升。放眼国内,百度、饿了么、阿里都已经有部分站点支持
PWA 了,滴滴也表示有兴趣,可见,PWA
不仅在国外非常受重视,在国内同样受到各大互联网企业的重视。

图片 7

按照当前的发展趋势,PWA 将会带来 Web App
的大量需求,新一轮大前端技术洗牌很可能近在眼前了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图