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

Photo of author
Written By CMO

你好2017。在碼這篇博文之前我曾經和江湖上諢名“微信行銷の女神”的嚴老師有過切磋,想選一個好一點的Clickbait。備選的標題還有《微信小程序的鼻祖在這裡》、《張小龍不會告訴你:微信小程序的爸爸在這裡》以及《微信小程序的爸爸是張小龍,那爺爺是誰? 》。之所以選了這個原版標題是因為PWA稱不上微信的鼻祖,它的技術內涵要遠遠高於微信小程序;微信小程序的爸爸也不是PWA,PWA和微信小程序沒有血緣關係。微信小程序充其量只是PWA的一種模仿,就好像你不能說Foxmail的爸爸是Outlook Express,也不能說微信的爸爸是Whatsapp。本質上是不同的,連改良都稱不上,只能說是一種客戶化的演化。

下一代Web標準Progressive Web Apps
下一代Web標準Progressive Web Apps

2016年底的朋友圈被微信小程序刷屏了,各路看官和吃瓜群眾都High了。那為什麼HubSpot One卻冷眼看待微信小程序?因為它僅僅是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顯然已經掉隊了。但是在數字行銷中為什麼Google還如此重要?因為Google作為搜索引擎它的導流作用遠高於其他自娛自樂的騰訊生態圈和阿里生態圈。花一樣的錢你永遠會從Google拿到最多流量。而PWA的誕生會是Google的救命稻草。因為Google將會成為一個超級應用市場,你只要做好傳統的SEM或者SEO就可以將用戶帶到你的PWA。這顯然是騰訊不願意看到的。

騰訊曾經想要依托微信作為一個平台(操作系統)中的平台,奈何技術條件上這種“國台灣”的概念不但相當複雜而且幾乎無法維護。在另一邊PWA已經磨刀霍霍,時間已經不容許騰訊有絲毫遲疑。

如果騰訊再不變革,那將會面臨一個大逆轉。連接到一個PWA僅僅需要的是一個URL。這對騰訊來說僅僅是一個二維碼。就拿剛剛我們給的例子來說,你可以嘗試用微信掃一下下面這個碼。

PWA版的Financial Times
PWA版的Financial Times

明白了嗎?騰訊想要的是抓住互聯網用戶的入口,從Google嘴裡摳一點出來。因為PWA已經明確成為Google2017年的重要部署了。筆者在看到瘋狂刷屏微信小程序的時候腦海裡只有兩個字“無知”。無知的媒體蠱惑無知的受眾,或許用“皇帝的新裝”來形容更加貼切。 “不需要下載安裝即可使用的應用”,那是有多神奇?嗯,那不僅僅是PWA,還加載了微信的API呢!或許這就是唯一的自High點吧。是的,你看不到騰訊野心背後的狼狽。

在文章的最後,HubSpot One提供一個更多PWA的DEMO地址:https://pwa.rocks。你也可以掃一下下面的二維碼瀏覽。

更多PWA應用的Demo
更多PWA應用的Demo

感謝閱讀,感謝關注HubSpot One。