昨天，我們的團隊收到Google團隊發(fā)來的一封郵件，說到Chrome瀏覽器應(yīng)用程序目前計劃在2018年第一季度停止在Windows，Mac和Linux上工作，因為Chrome將繼續(xù)專注于開放網(wǎng)絡(luò)。Chrome團隊現(xiàn)在正致力于在桌面上安裝漸進式Web應(yīng)用程序（PWA）。
那么，PWA是否能帶來新一輪大前端技術(shù)洗牌？
PWA 的優(yōu)勢在哪？
社長醬從用戶角度，來列舉一下和傳統(tǒng)網(wǎng)頁應(yīng)用相比的優(yōu)勢。
消息推送。用戶只要允許，即使網(wǎng)頁關(guān)閉后仍然可以在系統(tǒng)通知欄收到推送消息。（自從知道 Facebook 應(yīng)用為了消息的即時性強制阻止安卓系統(tǒng)進入節(jié)電模式后，就卸載了 Facebook 原生應(yīng)用改用他們的網(wǎng)頁推送了）
后臺加載。往常的網(wǎng)頁應(yīng)用只要關(guān)閉了網(wǎng)頁他的生命就結(jié)束了，現(xiàn)在引入了一個 Service Worker 的概念，即使網(wǎng)頁關(guān)閉，PWA 仍然可以在后臺運行獲取數(shù)據(jù)更新（當(dāng)然有限制）。
離線使用。PWA 打開后會緩存一些內(nèi)容，之后再次訪問即使沒有網(wǎng)絡(luò)也可以瀏覽之前的頁面（如同IE時代的離線瀏覽）。
原生應(yīng)用界面。在某些情況下 PWA 應(yīng)用可以隱藏瀏覽器本身的所有視覺成分，光從UI和UX上看，很容易認為這就是一個原生界面，如下圖其實都是PWA而不是原生應(yīng)用。
桌面圖標(biāo)。PWA只要配上一個圖標(biāo)，再放快捷方式在桌面上（比如一定時間內(nèi)第二次訪問PWA會自動詢問是否添加快捷方式到桌面），就真的和原生系統(tǒng)無異了，打開的速度也很快（當(dāng)然功能不能很龐大）。
另一方面，和原生應(yīng)用比，PWA 又不需要用戶安裝，只需要瀏覽器支持 PWA 就可以了。
PWA 的發(fā)展
這個概念在行業(yè)內(nèi)發(fā)展的挺快，在本文的這個時間點上，基于 Chromium 的瀏覽器 Chrome 和 Opera 已經(jīng)完全支持 PWA 了，F(xiàn)irefox 和微軟的 Edge 正在開發(fā)中，水果公司的 Safari 最近剛剛表達了可能會支持 PWA。從長久的角度看，只要 Google 不斷推動一些網(wǎng)站往 PWA 轉(zhuǎn)型，其他的瀏覽器或者競爭對手也就會自然跟風(fēng)上船。
網(wǎng)上已經(jīng)可以找到大把的 PWA 例子了，這里有不少：https://pwa.rocks/，其中不乏 The Washington Post，F(xiàn)lip Board，AliExpress，Wikipedia，Gmail，Booking 這樣的大頭。
里面有個 Air Honer 很有意思，大家可以玩一下（小心有聲音別在開會的時候打開。。），The Air Horner，從點開到使用只需要點擊一次屏幕（不需要安裝），使用體驗又非常接近原生應(yīng)用（UI/UX設(shè)計，桌面圖標(biāo)）。
放眼未來：PWA 將帶來前端技術(shù)洗牌？
1. 業(yè)界廠商紛紛支持，包括蘋果
各家瀏覽器廠商在 2017 年開始大力支持 PWA，下圖統(tǒng)計了主流瀏覽器對 PWA 的支持程度，可以看到，大部分瀏覽器對 PWA 已經(jīng)支持得很好了。
圖片來源于 ispwaready
UC 瀏覽器開發(fā)的 U2 內(nèi)核已經(jīng)支持 Push API 了，也是國內(nèi)第一個支持 Push API 的瀏覽器?，F(xiàn)在瀏覽器廠商唯恐自己沒跟上標(biāo)準(zhǔn)，而被淘汰。
不僅國內(nèi)瀏覽器廠商的態(tài)度發(fā)生轉(zhuǎn)變，連蘋果都已經(jīng)在幾個月前悄悄的進行了 Service Worker 的開發(fā)了，相信在不遠的將來，iOS 也將支持 PWA。
2. PWA 開發(fā)門檻也在降低
為了降低 PWA 的開發(fā)門檻，業(yè)界也推出了相應(yīng)的工具。
例如，百度推出的 Lavas 就是一個開源的命令行工具，可以通過它來快速創(chuàng)建 PWA 項目。它提供了多種常用的 APP Shell 給用戶選擇，降低了開發(fā)成本，也簡化了工作流程，讓 PWA 項目變得易于管理。
3. 各大站點紛紛實踐，用 PWA 已成趨勢？
PWA 剛推出時，就獲得了很多大型站點的支持，比如印度最大的電商網(wǎng)站 Flipcart，它是第一個大規(guī)模應(yīng)用 PWA 的站點，也取得了非常好的收益，用戶停留時長增長了 3 倍。除 Flipcart 之外，還有很多不錯的案例。下面我們來看看國內(nèi)外的兩個站點的實踐案例。
案例 1：Twitter Lite PWA
首先，國外的 Twitter 在 2017 年上線了 Twitter Lite PWA， Google 開發(fā)者網(wǎng)站上有 Twitter PWA 的案例分析。Twitter Lite PWA 同樣收益驚人：
平均用戶停留時長增長 65%
Web 站點發(fā)推的數(shù)量增長 75% (Amazing)
跳出率降低 20%
Twitter Lite 能取得這樣的成績，歸功于 PWA 的新技術(shù)和用戶體驗至上的設(shè)計原則：它通過 Service Worker 緩存文件，讓頁面可以離線，同時降低網(wǎng)絡(luò)消耗；通過 Web Push 接受服務(wù)器推送的消息；采用 App Shell 的設(shè)計模型，配合 Service Worker 能讓頁面瞬間展現(xiàn)。
案例 2：ele.me PWA
Google 開發(fā)者網(wǎng)站上也對 ele.me 的案例進行了 分析。從這個案例分析中，我們可以看到 ele.me PWA 改造的收益如下：
預(yù)緩存的頁面平均加載時間減少 11.6%
所有頁面的平均加載時間減少 6.35%
在 3G 網(wǎng)絡(luò)并且是第一次加載時，從頁面加載到用戶可操作的時間下降到 4.93s
可見，ele.me 同樣取得了很不錯的收益。不同于 Twitter Lite，ele.me 是 MPA 站點，這會讓站點變的更復(fù)雜，并且體驗不如 SPA 那么順暢，但是 ele.me 充分利用了 PWA 的各種新技術(shù)和設(shè)計模式，將 MPA 的影響降到最小，比如使用了 PRPL 模式，最大程度的降低頁面的首屏?xí)r間，還采用了 App Skeleton 的設(shè)計方式讓用戶對正在加載的頁面內(nèi)容有心里預(yù)期。
Twitter 和 ele.me 只是 PWA 站點中兩個效果比較顯著的案例，同樣還有很多其他的案例，可以訪問 Google 的案例分析頁面合集：
https://developers.google.cn/web/showcase/
實際收益明顯，再加上 Google 的強力支持，使得 PWA 的增長非常迅速，越來越多的互聯(lián)網(wǎng)大站跟進。下面這張圖列出了一些站點，從最開始的 Flipcart，到目前的 Instangram、Uber、Twitter、Starbucks 等，不僅數(shù)量在增加，站點等級和質(zhì)量也在不斷地提升。放眼國內(nèi)，百度、餓了么、阿里都已經(jīng)有部分站點支持 PWA 了，滴滴也表示有興趣，可見，PWA 不僅在國外非常受重視，在國內(nèi)同樣受到各大互聯(lián)網(wǎng)企業(yè)的重視。
按照當(dāng)前的發(fā)展趨勢，PWA 將會帶來 Web App 的大量需求，新一輪大前端技術(shù)洗牌很可能近在眼前了。
