被微信小程序山寨的PWA到底是什么鬼?

你好2017。在码这篇博文之前我曾经和江湖上诨名“微信营销の女神”的严老师有过切磋,想选一个好一点的Clickbait。备选的标题还有《微信小程序的鼻祖在这里》、《张小龙不会告诉你:微信小程序的爸爸在这里》以及《微信小程序的爸爸是张小龙,那爷爷是谁?》。之所以选了这个原版标题是因为PWA称不上微信的鼻祖,它的技术内涵要远远高于微信小程序;微信小程序的爸爸也不是PWA,PWA和微信小程序没有血缘关系。微信小程序充其量只是PWA的一种模仿,就好像你不能说Foxmail的爸爸是Outlook Express,也不能说微信的爸爸是Whatsapp。本质上是不同的,连改良都称不上,只能说是一种客户化的演化。

下一代Web标准Progressive Web Apps

下一代Web标准Progressive Web Apps

2016年底的朋友圈被微信小程序刷屏了,各路看官和吃瓜群众都High了。那为什么极诣却冷眼看待微信小程序?因为它仅仅是PWA这种下一代APP在微信平台中的一种演化而已。

PWA是什么鬼?

PWA是Progressive Web Apps的首字母缩写。它是2015年6月14日由设计师Frances Berriman和Chrome工程师Alex Russell在一顿晚餐中一拍即合提出的概念。它远早于微信小程序,可以说是我们每一个互联网人应该牢记的时刻。PWA的提出标志着移动互联网进入了下一世代。为什么这么说?因为PWA将解决现有的App无法解决的问题,那就是它让App都具有了一个URL。如果一个对象它没有一个URL那么它就不在Web上,所有它所包含的信息与整个互联网生态是隔绝的。你无法发现它所包含的信息;搜索引擎无法索引它所包含的信息;为了发布它品牌需要付出高昂的成本在应用市场中;它的用户无法轻易地分享它的内容;为了安装它们智能设备需要预留大量的空间。这些问题让App变成了互联网外的一个异类,它与整个Web精神相悖。

大约在2005年,整个Web在一些新技术如.NET,PHP,AJAX的推动下由静态向动态过渡。2007年原生App开始兴起。在2010年中,HTML5,CSS3,和JavaScript技术开始推动Web向更好的用户体验迈进,其中Responsive Web Design也就是我们俗称的响应式设计开始挑战原生的App。但是,RWD失败了,它甚至在某些情况下还不如AWD(Adaptive Web Design)。究其原因是RWD在用户体验上仍然和原生的App那样预载入大量的框架界面的方案有很大差距。期间阵亡的还有许多其他的解决方案,比如Adobe AIR Applications,Chrome Packaged Applications等。品牌为了占据用户智能设备上的一个144×144的空间费尽了力气。

这些受人诟病的问题最终被PWA解决了。PWA解决得非常彻底。在我们进一步了解PWA之前我们可以先移步去看一下一个PWA长什么样。打开你的手机浏览器,在地址栏输入app.ft.com。你可以体验到飞一样的感觉,可以体验到犹如App那样平滑的操作体验,更重要的是你不需要额外下载40M来享受这种体验。

PWA的优秀特性

PWA能够笑傲下一代Web生态系统是因为它有如下秒杀其他解决方案的特性。

  • Progressive:这是最重要的特点。PWA是渐进增强(Progressive Enhancement)的。越是先进的浏览器上你可以体验的效果越优秀。
  • Responsive:不管是什么浏览器分辨率,不管是在桌面上、平板电脑上还是手机上,PWA都可以达到最佳浏览效果。
  • Connectivity independent:连接性独立。即便是网络情况糟糕的环境下依然可以流畅运行。依托于Service Workers技术你甚至可以在离线环境中使用PWA。
  • App-like:PWA的用户体验无限接近于原生App。绝大部分情况下App不再有任何优势。嗯,是的PWA可以全屏玩。
  • Fresh:PWA不需要你每周再去下载一个更新版本。我们知道每次App让你下载一个新版本无非是多几个广告。0.0
  • Safe:安全性。你不需要再担心你的数据被劫持,不需要担心你下载安装恶意挂码的App来威胁你的个人隐私。
  • Discoverable:可发现性。PWA应用的所有内容都可以被搜索引擎轻易地发现并索引。App中的海量数据可以各自连通到Web中,你不需要再为了一篇文章下载几十M的App。
  • Re-engageable:PWA可以请求用户允许接受Push Notification,就像一般App推入消息那样,PWA也可以做到系统级的提醒。
  • Installable:本质上PWA是一个RWD的网站,这就意味着你不需要安装它。但是你如果担心用户用后即扔就多余了,PWA可以请求用户在他们的桌面上放置一个小图标由此再次进入PWA反复使用。用户并不需要去任何一个App Store进行PWA的安装,品牌分发PWA也不需要支付应用市场任何费用,完全独立运营。
  • Linkable:PWA可以有自己的链接。PWA的每一块内容都能够有独立的链接。这区别于App Link调起已经安装的App你可以无缝地从搜索引擎或其他网站开启PWA。

你由此可以想象PWA的到来会是怎样颠覆性的变革。如果你的网页速度大于3秒,53%的访客将抛弃你。PWA依托了谷歌的各大CDN,可以让一些关键的内容瞬间下载到你的设备。重要的是,你在墙内依然可以享受到这样的速度。因为那些资源并没有被墙。

腾讯的野心

在2016年,从规模上来看,BAT中的Baidu显然已经掉队了。但是在数字营销中为什么百度还如此重要?因为百度作为搜索引擎它的导流作用远高于其他自娱自乐的腾讯生态圈和阿里生态圈。花一样的钱你永远会从百度拿到最多流量。而PWA的诞生会是百度的救命稻草。因为百度将会成为一个超级应用市场,你只要做好传统的SEM或者SEO就可以将用户带到你的PWA。这显然是腾讯不愿意看到的。

腾讯曾经想要依托微信作为一个平台(操作系统)中的平台,奈何技术条件上这种“国中国”的概念不但相当复杂而且几乎无法维护。在另一边PWA已经磨刀霍霍,时间已经不容许腾讯有丝毫迟疑。

如果腾讯再不变革,那将会面临一个大逆转。连接到一个PWA仅仅需要的是一个URL。这对腾讯来说仅仅是一个二维码。就拿刚刚我们给的例子来说,你可以尝试用微信扫一下下面这个码。

PWA版的Financial Times

PWA版的Financial Times

明白了吗?腾讯想要的是抓住互联网用户的入口,从百度嘴里抠一点出来。因为PWA已经明确成为百度2017年的重要部署了。笔者在看到疯狂刷屏微信小程序的时候脑海里只有两个字“无知”。无知的媒体蛊惑无知的受众,或许用“皇帝的新装”来形容更加贴切。“不需要下载安装即可使用的应用”,那是有多神奇?嗯,那不仅仅是PWA,还加载了微信的API呢!或许这就是唯一的自High点吧。是的,你看不到腾讯野心背后的狼狈。

在文章的最后,极诣提供一个更多PWA的DEMO地址:https://pwa.rocks。你也可以扫一下下面的二维码浏览。

更多PWA应用的Demo

更多PWA应用的Demo

感谢阅读,感谢关注极诣。