雷鋒網(搜索“雷鋒網”公眾號關注)按：本文作者黃玄，現微票兒前端工程師，前淘寶旅行前端工程師，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 主要有這兩層含義：
所有這些“使得Web更能與App匹敵”的特性都是以漸進的方式增強的，在比傳統網頁應用更好的同時也保證了降級兼容。
作者舉的一個PWA例子就是Chrome Dev Summit 2014的Web App，Slides裏的Gif描述了其從網頁被“升級”為 App 的過程：演説.io - 分享你的雲演説
我理解的PWA：
首先是一個“涵蓋性術語”：利用一系列現代Web技術的組合，以在移動設備上提供最好的體驗（隨着Web技術的發展繼續吸納）；
再者，為什麼瞄準移動端？因為目前移動仍是浪尖，而Web畢竟誕生於桌面端，歷史原因使得Web的最大短板還是在移動端。
Chrome團隊一直宣傳説 “PWA：Deliver an app-like UX” ，在我理解看來，應該説Chrome團隊現階段推進Web的主要目標是“匹敵Native app”。（如果VR真能起來，説不定Web VR又會成為Chrome 團隊的重心）
PWA到底有哪些過人之處（特性）？
看了諸多Session後，其實總結起來主要就四個：
1、Installability （可安裝性）：説白了就是可被添加自主屏與全屏運行。對於這個，我就發一張圖不説話：
2、App Shell：説白了就是第一次渲染渲個殼、等異步數據來了再填充，這我也就上個圖：
3、Offline （離線能力）：説白了就是離線和弱網環境也能秒開，但是這個就牛逼了。Hybrid架構搞了那麼久，説白了不就為的這個嗎？之前有個東西叫Application Cache，但是那貨就是個shit。
所以這次Chrome搞了個Service Worker出來，給了Web一個可以跑在後台的線程，它可以搭配非常靠譜的Cache API做緩存、可以攔截所有HTTP請求並使用Fetch API進行response，一個非常完備的Proxy就這麼誕生了。
不過當這種離線能力出現在瀏覽器層面時，意義就完全不一樣了。
4、Re-engageable：説白了，目前主要就是推送通知的能力。推送通知依賴Service Worker與HTTP Push，不過默認的支持可是GCM啊……在國內覆蓋率肯定是捉急的，不展開了。
Slides裏還提到了幾個示例和幾個推薦Session、有興趣的可以自己去看，我這裏就提兩個：
那麼技術角度上，我對PWA的看法？
缺點：
優點：
可以看出來，其實我對 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可以，這個概念是希望被用户接受的，而不止是開發者。
同樣，另一個Google大力鼓吹的印度第一電商FlipKart也很有意思，他們把自己的官網改為了PWA，命名為FlipKart Lite，然後還拍了宣傳片兼教程來公開介紹這種新體驗以及新技術。
在發現了這幾點後，我對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搖身一變“Android”得以在國內馳騁，但PWA在中國的發展則困難重重：
而再看印度，PWA簡直就是神器：
所以你看，AliExpress率先支持了PWA，但在國內，這一天不知道要等到猴年馬月了。
資料來源：雷鋒網
作者/編輯：黃玄
其實回來的兩週裏，我對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 - 分享你的雲演説
我理解的PWA：
首先是一個“涵蓋性術語”：利用一系列現代Web技術的組合，以在移動設備上提供最好的體驗（隨着Web技術的發展繼續吸納）；
再者，為什麼瞄準移動端？因為目前移動仍是浪尖，而Web畢竟誕生於桌面端，歷史原因使得Web的最大短板還是在移動端。
Chrome團隊一直宣傳説 “PWA：Deliver an app-like UX” ，在我理解看來，應該説Chrome團隊現階段推進Web的主要目標是“匹敵Native app”。（如果VR真能起來，説不定Web VR又會成為Chrome 團隊的重心）
PWA到底有哪些過人之處（特性）？
看了諸多Session後，其實總結起來主要就四個：
1、Installability （可安裝性）：説白了就是可被添加自主屏與全屏運行。對於這個，我就發一張圖不説話：
2、App Shell：説白了就是第一次渲染渲個殼、等異步數據來了再填充，這我也就上個圖：
3、Offline （離線能力）：説白了就是離線和弱網環境也能秒開，但是這個就牛逼了。Hybrid架構搞了那麼久，説白了不就為的這個嗎？之前有個東西叫Application Cache，但是那貨就是個shit。
所以這次Chrome搞了個Service Worker出來，給了Web一個可以跑在後台的線程，它可以搭配非常靠譜的Cache API做緩存、可以攔截所有HTTP請求並使用Fetch API進行response，一個非常完備的Proxy就這麼誕生了。
不過當這種離線能力出現在瀏覽器層面時，意義就完全不一樣了。
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可以，這個概念是希望被用户接受的，而不止是開發者。
同樣，另一個Google大力鼓吹的印度第一電商FlipKart也很有意思，他們把自己的官網改為了PWA，命名為FlipKart Lite，然後還拍了宣傳片兼教程來公開介紹這種新體驗以及新技術。
在發現了這幾點後，我對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搖身一變“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，但在國內，這一天不知道要等到猴年馬月了。
資料來源：雷鋒網
作者/編輯：黃玄
請按此登錄後留言。未成為會員? 立即註冊