4
| 本文作者： 黃玄 | 2016-06-09 09:42 |
雷鋒網(wǎng)按：本文作者黃玄，現(xiàn)微票兒前端工程師，前淘寶旅行前端工程師，GDG字幕組成員，前端外刊評(píng)論成員。
其實(shí)回來的兩周里，我對(duì)Progressive Web App（以下簡(jiǎn)稱 PWA）的理解也在不斷更新，現(xiàn)在是思考更為全面的時(shí)候。
6月5日，我在I/O Redux上分享了“Progressive Web App - in my points of view”(PWA之我見) ，簡(jiǎn)單介紹了PWA，也聊了聊我的看法。
官網(wǎng)上對(duì)PWA的宣傳是這四個(gè)關(guān)鍵字：可靠、快速、Engaging、安全；再點(diǎn)進(jìn)去PWA的主頁，會(huì)發(fā)現(xiàn)還有Instant Loading、添加自主屏、通知推送、響應(yīng)式，而官方教程就更棒了，一次性給了10個(gè)關(guān)鍵字！包括Progressive, App-like, Fresh, Installable……
如果搜索下PWA的歷史就會(huì)發(fā)現(xiàn)、它第一次出現(xiàn)于Googler Alex Russell的博客文章《Progressive Web Apps: Escaping Tabs Without Losing Our Soul》中，其主要觀點(diǎn)是：Web的發(fā)展方向應(yīng)該是“在保留靈魂的基礎(chǔ)上漸進(jìn)增強(qiáng)”，而非現(xiàn)在大行其道的Hybrid App方向。
我總結(jié)文章里的 Progressive 主要有這兩層含義：
如果用戶需要，網(wǎng)頁可以漸進(jìn)式地變成App，比如被添加到主屏幕、全屏方式運(yùn)行、離線工作、推送通知消息等。但它仍是Web而非放到App Store里。
所有這些“使得Web更能與App匹敵”的特性都是以漸進(jìn)的方式增強(qiáng)的，在比傳統(tǒng)網(wǎng)頁應(yīng)用更好的同時(shí)也保證了降級(jí)兼容。
作者舉的一個(gè)PWA例子就是Chrome Dev Summit 2014的Web App，Slides里的Gif描述了其從網(wǎng)頁被“升級(jí)”為 App 的過程：演說.io - 分享你的云演說
我理解的PWA：
首先是一個(gè)“涵蓋性術(shù)語”：利用一系列現(xiàn)代Web技術(shù)的組合，以在移動(dòng)設(shè)備上提供最好的體驗(yàn)（隨著Web技術(shù)的發(fā)展繼續(xù)吸納）；
再者，為什么瞄準(zhǔn)移動(dòng)端？因?yàn)槟壳耙苿?dòng)仍是浪尖，而Web畢竟誕生于桌面端，歷史原因使得Web的最大短板還是在移動(dòng)端。
Chrome團(tuán)隊(duì)一直宣傳說 “PWA：Deliver an app-like UX” ，在我理解看來，應(yīng)該說Chrome團(tuán)隊(duì)現(xiàn)階段推進(jìn)Web的主要目標(biāo)是“匹敵Native app”。（如果VR真能起來，說不定Web VR又會(huì)成為Chrome 團(tuán)隊(duì)的重心）
看了諸多Session后，其實(shí)總結(jié)起來主要就四個(gè)：
1、Installability （可安裝性）：說白了就是可被添加自主屏與全屏運(yùn)行。對(duì)于這個(gè)，我就發(fā)一張圖不說話：
2、App Shell：說白了就是第一次渲染渲個(gè)殼、等異步數(shù)據(jù)來了再填充，這我也就上個(gè)圖：
3、Offline （離線能力）：說白了就是離線和弱網(wǎng)環(huán)境也能秒開，但是這個(gè)就牛逼了。Hybrid架構(gòu)搞了那么久，說白了不就為的這個(gè)嗎？之前有個(gè)東西叫Application Cache，但是那貨就是個(gè)shit。
所以這次Chrome搞了個(gè)Service Worker出來，給了Web一個(gè)可以跑在后臺(tái)的線程，它可以搭配非常靠譜的Cache API做緩存、可以攔截所有HTTP請(qǐng)求并使用Fetch API進(jìn)行response，一個(gè)非常完備的Proxy就這么誕生了。
不過當(dāng)這種離線能力出現(xiàn)在瀏覽器層面時(shí)，意義就完全不一樣了。
4、Re-engageable：說白了，目前主要就是推送通知的能力。推送通知依賴Service Worker與HTTP Push，不過默認(rèn)的支持可是GCM啊……在國(guó)內(nèi)覆蓋率肯定是捉急的，不展開了。
Slides里還提到了幾個(gè)示例和幾個(gè)推薦Session、有興趣的可以自己去看，我這里就提兩個(gè)：
PWA當(dāng)然不是Polymer only，只能說Polymer都幫你封裝好了。PWA目前用到的幾個(gè)特性都是Framework-agnostic的。
AliExpress作為Keynote里唯一展出的PWA還是值得小自豪一下的；并且，它好像是唯一不搭梯子就可以體驗(yàn)到的……
缺點(diǎn)：
門檻不低（要求 HTTPS；Service Worker也需要學(xué)習(xí)）；
瀏覽器支持（主要是Safari不愿意支持，只是在5年計(jì)劃里提了一嘴）；
用戶習(xí)慣（讓用戶習(xí)慣于網(wǎng)頁可以離線工作真不是短期可以達(dá)到的）。
優(yōu)點(diǎn)：
剛才提到的，所有這些現(xiàn)代 Web 特性；
由于這些都是“優(yōu)雅降級(jí)、漸進(jìn)增強(qiáng)” 的，給支持的設(shè)備更好的體驗(yàn)，不支持的設(shè)備也不會(huì)更差。
可以看出來，其實(shí)我對(duì) PWA 的評(píng)價(jià)也并不是那么積極的：
除了Service Worker帶來的諸多可能性外，其他幾個(gè)都不算是什么新鮮事；而就連Service Worker，還面臨著瀏覽器支持這個(gè)Web發(fā)展的千古難題。
那么，為什么我們還要擁護(hù)并 stick on Web 呢？
我特別同意《The Mobile Web: State of the Union》這個(gè)Session里Chrome產(chǎn)品團(tuán)隊(duì)Leader Rahul所說到的：Dicoverable、Linkable、Low Friction、Broad Reach等等，這些都不是Web最大的優(yōu)點(diǎn)，Web最重要的意義在于Open（開放）與Decentralized （去中心化），這才是萬維網(wǎng)（WWW）的初衷。
是啊，縱使強(qiáng)如Chrome都不能對(duì)Web一手遮天，這才是Web真正與眾不同的地方。這也是Web背后開放與分享的力量。
PWA看上去并不是那么breakthrough，但這可能只是站在開發(fā)者的角度之上的。
大家都很熟悉 “Ajax” 這個(gè)說法，它出現(xiàn)于2005年，用于描述Gmail (2004) 或者Google Maps (2005) 這樣的網(wǎng)頁應(yīng)用，這個(gè)詞不但宣告了Web客戶端技術(shù)的全面復(fù)興與流行，也成為了Web 2.0的最大技術(shù)推動(dòng)。然而事實(shí)是，早在“Ajax”這個(gè)詞出現(xiàn)的5年前，IE5已經(jīng)廣泛支持了XML HTTP Request并實(shí)現(xiàn)了Outlook Web App (2000) 。
技術(shù)并不是不需要包裝。如果沒有“H5”這樣易于傳播的爛詞， Mobile Web乃至前端工程師在所有中國(guó)群眾、新手開發(fā)者、產(chǎn)品經(jīng)理、創(chuàng)業(yè)者中也不會(huì)得到如此重視。
身為開發(fā)者我們知道，Web這幾年發(fā)展迅猛，我們能做的事情越來越多。但是在大量群眾的心里可能并不是這樣，如果你做出一個(gè)體驗(yàn)足夠優(yōu)秀的Web產(chǎn)品，可能大家的第一反應(yīng)是：“這肯定是一個(gè)App”。
而這正是“PWA”希望解決的問題，Chrome團(tuán)隊(duì)希望用一個(gè)新的buzzword（流行詞）來影響、改變用戶的期待。作為開發(fā)者我們知道，PWA歸根結(jié)底還是個(gè)網(wǎng)頁，當(dāng)然，是個(gè)更好的網(wǎng)頁。但是Chrome希望讓用戶感受到不一樣：“哦這是個(gè)普通網(wǎng)頁；哦這個(gè)Chrome告訴我可以添加到主屏幕上，告訴我可以離線、可以推送、這是個(gè)PWA”
這也是為什么Rahul 一直在強(qiáng)調(diào)Mobile Web已經(jīng)Business ready，并積極與企業(yè)合作去推出PWA的原因，Chrome團(tuán)隊(duì)希望用實(shí)際的產(chǎn)品要告訴用戶，PWA就是那個(gè)體驗(yàn)跟App一樣好但是都不用你安裝的網(wǎng)頁應(yīng)用。”
看看華盛頓郵報(bào)的這個(gè)新版就可以發(fā)現(xiàn)，“PWA” 這個(gè)名詞是對(duì)用戶的。沒有哪個(gè)產(chǎn)品會(huì)對(duì)所有用戶開屏提醒，嘿我這個(gè)是Isomorphic JavaScript App！但是PWA可以，這個(gè)概念是希望被用戶接受的，而不止是開發(fā)者。
同樣，另一個(gè)Google大力鼓吹的印度第一電商FlipKart也很有意思，他們把自己的官網(wǎng)改為了PWA，命名為FlipKart Lite，然后還拍了宣傳片兼教程來公開介紹這種新體驗(yàn)以及新技術(shù)。
在發(fā)現(xiàn)了這幾點(diǎn)后，我對(duì)PWA的理解才終于到了一個(gè)新的維度。
推動(dòng)一個(gè)技術(shù)的發(fā)展其實(shí)是很多維度的，你要吸引的不止是開發(fā)者、還有用戶和公司（讓它們使用這個(gè)技術(shù)）、最終才能讓整個(gè)生態(tài)建立起來。所以無論App Store還是Google Play總是要說我們幫助了多少公司/開發(fā)者獲得了成功，就是這個(gè)道理。
從這個(gè)角度來說，“PWA” 可能比單純的技術(shù)突破對(duì)Mobile Web整個(gè)生態(tài)的影響要更大。開發(fā)者之間希望說服對(duì)方一個(gè)技術(shù)比另一個(gè)技術(shù)更好都是一件很難的事情，更不要說說服用戶了。我們不能說 “PWA” 完全是個(gè)營(yíng)銷詞匯，但我真心希望這輪對(duì)用戶的營(yíng)銷能夠成功，讓用戶對(duì)Mobile Web有所改觀，這才能真正解決我上面提到的“用戶習(xí)慣難以養(yǎng)成”的問題。
Web的開發(fā)與去中心化在商業(yè)角度經(jīng)常陷入“沒爹又沒媽”的窘境，Rahul在臺(tái)上大聲對(duì)下面喊 “Google Love the Web！”，然后觀眾席響起了稀稀拉拉的掌聲，看得我很是心酸。
上一輪有著類似可能性的Web App推動(dòng)來自咒死Flash的Steve Jobs，老喬在2008年的WWDC上對(duì)著世界說：即將發(fā)售的iPhone沒有SDK，但是iOS 1.0有Safari，你們可以用Ajax+Web2.0創(chuàng)造媲美原生應(yīng)用的web app，下面連掌聲都沒有，后來被罵到打臉，不了了之。
一個(gè)很有意思的現(xiàn)象是：“Apple親中，Google親印”。這可不止是管理層的組成問題，而是對(duì)市場(chǎng)環(huán)境的優(yōu)勝劣汰。
全世界都知道中國(guó)人土豪、有錢、能買、愛慕虛榮，剛好和iPhone的土豪打法臭味相投；雖然天朝網(wǎng)絡(luò)條件現(xiàn)在相當(dāng)可以，但偏偏Google再遇上個(gè)不能描述的問題，兩者地位一下子天上地下。
再看印度，整體還處于“第三世界”，網(wǎng)絡(luò)條件差，沒錢買Apple，但也沒有中國(guó)的特色問題；于是Google一直在打低價(jià)、低硬件環(huán)境牌，在印度做的風(fēng)生水起。
Google的技術(shù)在國(guó)內(nèi)推進(jìn)本身就是很痛苦的，Android搖身一變“安卓”得以在國(guó)內(nèi)馳騁，但PWA在中國(guó)的發(fā)展則困難重重：
國(guó)內(nèi)iPhone居多，首先就不支持 PWA。
各路Android ROM中的瀏覽器早都已經(jīng)被改的沒有人形了，大家在支持PWA這件事情上肯定毫無興趣 ——什么添加主屏，與我的利益毫不相關(guān)啊。
原生Chrome雖然在國(guó)內(nèi)桌面端的市占率還不錯(cuò)，但是移動(dòng)端應(yīng)該差到不行。
依賴GCM的通知推送，直接再見。
國(guó)內(nèi)的Web環(huán)境非常復(fù)雜、首先是各種Webview，然后才輪得到瀏覽器。
國(guó)內(nèi)的互聯(lián)網(wǎng)公司大都“技術(shù)深厚”，各種黑科技大行其道，哪里輪得到PWA。
而再看印度，PWA簡(jiǎn)直就是神器：
由于都是Google服務(wù)健全的Android設(shè)備，標(biāo)配Chrome，PWA 一推，用戶到達(dá)率簡(jiǎn)直直逼100%。
印度網(wǎng)差，下載一個(gè)App痛苦，一個(gè)可以“流式下載”的PWA在用戶初次訪問上就可以完爆Native App。
互聯(lián)網(wǎng)環(huán)境還比較原始，大都直接親Google，公司支持率也會(huì)非常高。
所以你看，AliExpress率先支持了PWA，但在國(guó)內(nèi)，這一天不知道要等到猴年馬月了。
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。
