您正在使用IE低版浏览器,为了您的雷锋网账号安全和更好的产品体验,强烈建议使用更快更安全的浏览器
专栏 正文
发私信给黄玄
发送

4

我们真的需要网页版App吗?Google PWA的困局

本文作者:黄玄 2016-06-09 09:42
导语:如果用户需要,网页可以渐进式地变成App,比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。但它仍是Web而非放到App Store里。

雷锋网(公众号:雷锋网)按:本文作者黄玄,现微票儿前端工程师,前淘宝旅行前端工程师,GDG字幕组成员,前端外刊评论成员。

其实回来的两周里,我对Progressive Web App(以下简称 PWA)的理解也在不断更新,现在是思考更为全面的时候。

一、先从技术角度聊聊我的观点

6月5日,我在I/O Redux上分享了“Progressive Web App - in my points of view”(PWA之我见) ,简单介绍了PWA,也聊了聊我的看法。

首先,什么是PWA?

官网上对PWA的宣传是这四个关键字:可靠、快速、Engaging、安全;再点进去PWA的主页,会发现还有Instant Loading、添加自主屏、通知推送、响应式,而官方教程就更棒了,一次性给了10个关键字!包括Progressive, App-like, Fresh, Installable……

如果搜索下PWA的历史就会发现、它第一次出现于Googler Alex Russell的博客文章《Progressive Web Apps: Escaping Tabs Without Losing Our Soul》中,其主要观点是:Web的发展方向应该是“在保留灵魂的基础上渐进增强”,而非现在大行其道的Hybrid App方向。

我总结文章里的 Progressive 主要有这两层含义:

如果用户需要,网页可以渐进式地变成App,比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。但它仍是Web而非放到App Store里。

所有这些“使得Web更能与App匹敌”的特性都是以渐进的方式增强的,在比传统网页应用更好的同时也保证了降级兼容。

作者举的一个PWA例子就是Chrome Dev Summit 2014的Web App,Slides里的Gif描述了其从网页被“升级”为 App 的过程:演说.io - 分享你的云演说

我们真的需要网页版App吗?Google PWA的困局

我理解的PWA:

首先是一个“涵盖性术语”:利用一系列现代Web技术的组合,以在移动设备上提供最好的体验(随着Web技术的发展继续吸纳);

再者,为什么瞄准移动端?因为目前移动仍是浪尖,而Web毕竟诞生于桌面端,历史原因使得Web的最大短板还是在移动端。

Chrome团队一直宣传说 “PWA:Deliver an app-like UX” ,在我理解看来,应该说Chrome团队现阶段推进Web的主要目标是“匹敌Native app”。(如果VR真能起来,说不定Web VR又会成为Chrome 团队的重心)

PWA到底有哪些过人之处(特性)?

看了诸多Session后,其实总结起来主要就四个:

1、Installability (可安装性):说白了就是可被添加自主屏与全屏运行。对于这个,我就发一张图不说话:

我们真的需要网页版App吗?Google PWA的困局

2、App Shell:说白了就是第一次渲染渲个壳、等异步数据来了再填充,这我也就上个图:

我们真的需要网页版App吗?Google PWA的困局

3、Offline (离线能力):说白了就是离线和弱网环境也能秒开,但是这个就牛逼了。Hybrid架构搞了那么久,说白了不就为的这个吗?之前有个东西叫Application Cache,但是那货就是个shit。

所以这次Chrome搞了个Service Worker出来,给了Web一个可以跑在后台的线程,它可以搭配非常靠谱的Cache API做缓存、可以拦截所有HTTP请求并使用Fetch API进行response,一个非常完备的Proxy就这么诞生了。

不过当这种离线能力出现在浏览器层面时,意义就完全不一样了。

我们真的需要网页版App吗?Google PWA的困局

4、Re-engageable:说白了,目前主要就是推送通知的能力。推送通知依赖Service Worker与HTTP Push,不过默认的支持可是GCM啊……在国内覆盖率肯定是捉急的,不展开了。

Slides里还提到了几个示例和几个推荐Session、有兴趣的可以自己去看,我这里就提两个:

PWA当然不是Polymer only,只能说Polymer都帮你封装好了。PWA目前用到的几个特性都是Framework-agnostic的。

AliExpress作为Keynote里唯一展出的PWA还是值得小自豪一下的;并且,它好像是唯一不搭梯子就可以体验到的……

那么技术角度上,我对PWA的看法?

缺点:

门槛不低(要求 HTTPS;Service Worker也需要学习);

浏览器支持(主要是Safari不愿意支持,只是在5年计划里提了一嘴);

用户习惯(让用户习惯于网页可以离线工作真不是短期可以达到的)。

优点:

刚才提到的,所有这些现代 Web 特性;

由于这些都是“优雅降级、渐进增强” 的,给支持的设备更好的体验,不支持的设备也不会更差。

可以看出来,其实我对 PWA 的评价也并不是那么积极的:

除了Service Worker带来的诸多可能性外,其他几个都不算是什么新鲜事;而就连Service Worker,还面临着浏览器支持这个Web发展的千古难题。

那么,为什么我们还要拥护并 stick on Web 呢?

我特别同意《The Mobile Web: State of the Union》这个Session里Chrome产品团队Leader Rahul所说到的:Dicoverable、Linkable、Low Friction、Broad Reach等等,这些都不是Web最大的优点,Web最重要的意义在于Open(开放)与Decentralized (去中心化),这才是万维网(WWW)的初衷。

是啊,纵使强如Chrome都不能对Web一手遮天,这才是Web真正与众不同的地方。这也是Web背后开放与分享的力量。

二、再说PWA的意义,技术与技术之外的

PWA看上去并不是那么breakthrough,但这可能只是站在开发者的角度之上的。

大家都很熟悉 “Ajax” 这个说法,它出现于2005年,用于描述Gmail (2004) 或者Google Maps (2005) 这样的网页应用,这个词不但宣告了Web客户端技术的全面复兴与流行,也成为了Web 2.0的最大技术推动。然而事实是,早在“Ajax”这个词出现的5年前,IE5已经广泛支持了XML HTTP Request并实现了Outlook Web App (2000) 。

技术并不是不需要包装。如果没有“H5”这样易于传播的烂词, Mobile Web乃至前端工程师在所有中国群众、新手开发者、产品经理、创业者中也不会得到如此重视。

身为开发者我们知道,Web这几年发展迅猛,我们能做的事情越来越多。但是在大量群众的心里可能并不是这样,如果你做出一个体验足够优秀的Web产品,可能大家的第一反应是:“这肯定是一个App”。

而这正是“PWA”希望解决的问题,Chrome团队希望用一个新的buzzword(流行词)来影响、改变用户的期待。作为开发者我们知道,PWA归根结底还是个网页,当然,是个更好的网页。但是Chrome希望让用户感受到不一样:“哦这是个普通网页;哦这个Chrome告诉我可以添加到主屏幕上,告诉我可以离线、可以推送、这是个PWA”

这也是为什么Rahul 一直在强调Mobile Web已经Business ready,并积极与企业合作去推出PWA的原因,Chrome团队希望用实际的产品要告诉用户,PWA就是那个体验跟App一样好但是都不用你安装的网页应用。”

看看华盛顿邮报的这个新版就可以发现,“PWA” 这个名词是对用户的。没有哪个产品会对所有用户开屏提醒,嘿我这个是Isomorphic JavaScript App!但是PWA可以,这个概念是希望被用户接受的,而不止是开发者。

我们真的需要网页版App吗?Google PWA的困局

同样,另一个Google大力鼓吹的印度第一电商FlipKart也很有意思,他们把自己的官网改为了PWA,命名为FlipKart Lite,然后还拍了宣传片兼教程来公开介绍这种新体验以及新技术。

我们真的需要网页版App吗?Google PWA的困局

在发现了这几点后,我对PWA的理解才终于到了一个新的维度。

推动一个技术的发展其实是很多维度的,你要吸引的不止是开发者、还有用户和公司(让它们使用这个技术)、最终才能让整个生态建立起来。所以无论App Store还是Google Play总是要说我们帮助了多少公司/开发者获得了成功,就是这个道理。

从这个角度来说,“PWA” 可能比单纯的技术突破对Mobile Web整个生态的影响要更大。开发者之间希望说服对方一个技术比另一个技术更好都是一件很难的事情,更不要说说服用户了。我们不能说 “PWA” 完全是个营销词汇,但我真心希望这轮对用户的营销能够成功,让用户对Mobile Web有所改观,这才能真正解决我上面提到的“用户习惯难以养成”的问题。

Web的开发与去中心化在商业角度经常陷入“没爹又没妈”的窘境,Rahul在台上大声对下面喊 “Google Love the Web!”,然后观众席响起了稀稀拉拉的掌声,看得我很是心酸。

上一轮有着类似可能性的Web App推动来自咒死Flash的Steve Jobs,老乔在2008年的WWDC上对着世界说:即将发售的iPhone没有SDK,但是iOS 1.0有Safari,你们可以用Ajax+Web2.0创造媲美原生应用的web app,下面连掌声都没有,后来被骂到打脸,不了了之。

三、最后说说PWA的地域性

一个很有意思的现象是:“Apple亲中,Google亲印”。这可不止是管理层的组成问题,而是对市场环境的优胜劣汰。

全世界都知道中国人土豪、有钱、能买、爱慕虚荣,刚好和iPhone的土豪打法臭味相投;虽然天朝网络条件现在相当可以,但偏偏Google再遇上个不能描述的问题,两者地位一下子天上地下。

再看印度,整体还处于“第三世界”,网络条件差,没钱买Apple,但也没有中国的特色问题;于是Google一直在打低价、低硬件环境牌,在印度做的风生水起。

Google的技术在国内推进本身就是很痛苦的,Android摇身一变“安卓”得以在国内驰骋,但PWA在中国的发展则困难重重:

国内iPhone居多,首先就不支持 PWA。

各路Android ROM中的浏览器早都已经被改的没有人形了,大家在支持PWA这件事情上肯定毫无兴趣 ——什么添加主屏,与我的利益毫不相关啊。

原生Chrome虽然在国内桌面端的市占率还不错,但是移动端应该差到不行。

依赖GCM的通知推送,直接再见。

国内的Web环境非常复杂、首先是各种Webview,然后才轮得到浏览器。

国内的互联网公司大都“技术深厚”,各种黑科技大行其道,哪里轮得到PWA。

而再看印度,PWA简直就是神器:

由于都是Google服务健全的Android设备,标配Chrome,PWA 一推,用户到达率简直直逼100%。

印度网差,下载一个App痛苦,一个可以“流式下载”的PWA在用户初次访问上就可以完爆Native App。

互联网环境还比较原始,大都直接亲Google,公司支持率也会非常高。

所以你看,AliExpress率先支持了PWA,但在国内,这一天不知道要等到猴年马月了。


雷锋网原创文章,未经授权禁止转载。详情见转载须知

分享:
相关文章

文章点评:

表情

专栏作者

现微票儿前端工程师,前淘宝旅行前端工程师,GDG 字幕组成员,前端外刊评论成员。
当月热门文章
最新文章
为了您的账户安全,请验证邮箱
您的邮箱还未验证,完成可获20积分哟!
请验证您的邮箱
立即验证
完善账号信息
您的账号已经绑定,现在您可以设置密码以方便用邮箱登录
立即设置 以后再说
请填写申请人资料
姓名
电话
邮箱
微信号
作品链接
个人简介