說說 PWA 和微信小程序--Progressive Web App

做者：雲圖圖
連接：https://zhuanlan.zhihu.com/p/22578965
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

利益相關：微信小用戶，谷歌小員工

微信發佈了微信小程序，雖然還在內測階段，可是不管從技術上，仍是之後要不要開發原生應用（native app）上引起了很多討論。其實看到微信小程序的消息， 我第一時間想到的是 Google 以前推出的PWA（Progressive Web App），二者的目的是相似的（僞原生應用），可是形式卻又有很多區別，能夠比較來看一下。

耐心點，先讓我來講說PWA。

PWA 是什麼？

PWA 的全稱是 Progressive Web App，是 Google 在2015年提出，今年才推廣開來的想法。具體的意思就是在移動端利用提供的標準化框架，在網頁應用中實現和原生應用相近的用戶體驗。

總而言之，它說到底仍是一個網頁應用，只不過經過最新的技術手段實現了某些之前原生應用纔有的功能。

PWA 的優點在哪？

技術上不想說太深，我也不懂，因此從用戶角度來講，列舉一下和傳統網頁應用相比的優點。

• 消息推送。用戶只要容許，即便網頁關閉後仍然能夠在系統通知欄收到推送消息。（自從知道 Facebook 應用爲了消息的即時性強制阻止安卓系統進入節電模式後，我就卸載了 Facebook 原生應用改用他們的網頁推送了）
• 後臺加載。往常的網頁應用只要關閉了網頁他的生命就結束了，如今引入了一個 Service Worker 的概念，即便網頁關閉，PWA 仍然能夠在後臺運行獲取數據更新（固然有限制）。
• 離線使用。PWA 打開後會緩存一些內容，以後再次訪問即便沒有網絡也能夠瀏覽以前的頁面（如同IE時代的離線瀏覽）。
• 原生應用界面。在某些狀況下 PWA 應用能夠隱藏瀏覽器自己的全部視覺成分，光從UI和UX上看，很容易認爲這就是一個原生界面，以下圖其實都是PWA而不是原生應用。
• 桌面圖標。PWA只要配上一個圖標，再放快捷方式在桌面上（好比必定時間內第二次訪問PWA會自動詢問是否添加快捷方式到桌面），就真的和原生系統無異了，打開的速度也很快（固然功能不能很龐大）。

另外一方面，和原生應用比，PWA 又不須要用戶安裝，只須要瀏覽器支持 PWA 就能夠了。

爲何要推出PWA？

首先，網頁應用在必定程度上受到了瀏覽器的侷限，所能得到的權限，效能都是的不少複雜的功能很難實現，這是更簡單的方法就是開發原生應用了。而 PWA 就是一個試圖把二者相融合的嘗試。若是需求不大，新公司已經沒有必要花血本僱傭不一樣平臺的開發人員作原生了，只要一個 PWA 就夠了。另外當網頁應用發展更好以後，整個移動平臺的用戶都提高了，對於正在轉型移動平臺的 Google 來講固然價值很是。

我我的以爲這是一個很好的嘗試，也會推動行業的發展，可是究竟能走多遠抱有謹慎樂觀的態度（現在微信也加進來應該更樂觀了）。

其次，當你主導的技術在市場上被普遍採用的時候，你在整個行業的話語權都會提升，也有更多的獲利機會。

好比我在廣告業務的的技術支持部門工做，有的同事就會去有的廣告業務客戶那裏推銷 PWA，同時公司內部也有各類 PWA 的培訓和講座。若是公司沒有或者用戶沒有安裝原生應用的話，PWA 擁有比傳統網頁更好的體驗，在計算競價排名上也有優點（Landing page experience），PWA 就會給客戶公司帶來更多的用戶，而更多的用戶也就帶來了更多的收入，天然的Google也就得到了更多的廣告收入。。

PWA 的發展

這個概念在行業內發展的挺快，在本文的這個時間點上，基於 Chromium 的瀏覽器 Chrome 和 Opera 已經徹底支持 PWA 了，Firefox 和微軟的 Edge 正在開發中，水果公司的 Safari 最近剛剛表達了可能會支持 PWA。從長久的角度看，只要 Google 不斷推進一些網站往 PWA 轉型，其餘的瀏覽器或者競爭對手也就會天然跟風上船。

網上已經能夠找到大把的 PWA 例子了，這裏有很多：https://pwa.rocks/，其中不乏 The Washington Post，Flip Board，AliExpress，Wikipedia，Gmail，Booking 這樣的大頭。

裏面有個 Air Honer 頗有意思，你們能夠玩一下（當心有聲音別在開會的時候打開。。），The Air Horner，從點開到使用只須要點擊一次屏幕（不須要安裝），使用體驗又很是接近原生應用（UI/UX設計，桌面圖標）。

微信小程序

我沒有第一手資料，只是從最近的新聞和其餘文章中獲得的微信小程序的一些消息，大致和我想象的相同，就是微信提供一個內嵌的封閉運行環境，讓開發者能夠利用基於Web的技術開發出和原生應用相似的用戶體驗和功能。（若是不許確望指正）

先說結論，在我看來，微信小程序相比於 PWA，雖然起步晚一些可是前景會更好。

從技術手段上來講

二者都是基於現階段 Web 技術的，可是又不一樣：PWA 是 Web 的父集，經過提供更多的外部接口和規範來讓網頁應用得到原生應用纔有的特色；微信小程序是Web的子集，經過簡化 Web 開發過程和提供封閉完善的空間，使得原先的公衆號用戶以【1.成本低於原生應用開發 2.體驗高於網頁應用】 的僞原生應用。這是兩個不一樣的思路，PWA 更多的是說服現有應用轉型，微信小程序更多的是說服新用戶寄生在其中。愚見雖然 PWA 的格局更廣，可是顯然微信小程序的前景更好。

從推廣手段上來講

二者不太相同。PWA 實際上是個抽象的技術標準，Google 只能經過本身行業內的影響力和一些刺激因素來講服瀏覽器支持 PWA，客戶開發 PWA，推廣其實受到很多阻力。微信這邊狀況就好不少，做爲一個蓬勃發展的生態系統，大多數企業爲了避免落後，都沒法忽視微信的任何一個動做。微信出公衆號就要弄公衆號，出支付平臺就要支持微信支付，出小程序就要開發小程序。這是個共贏的行爲，微信在推廣本身的平臺，目標企業在推廣本身的業務，因此這陣東風誰不肯意吹一下呢。

從目標用戶上來講

二者基本接近的，PWA 只有加法沒有剪法，因此即便原有網站的功能很複雜，只要投入足夠的資源總能開發出等效的 PWA，甚至能夠擁有相似拍照之類的原先只有原生纔有的功能。微信則是在一個簡化的封閉環境中。就好像微信公衆號，雖然文章是基於 HTML 的，可是有不少 HTML 標籤不能用（好比 hr，a 等）。因此微信小程序能實現的功能必定是受限的，犧牲了一部分功能，可是帶來的是開發流程的簡化。這會更吸引那些對權限，技術接口要求不高，更多之內容爲主的應用。最好的例子就是微信公衆號，他們十分依賴微信平臺，可是受到公衆號平臺的限制，內容的豐富程度十分有限，相信推出後會有大批的微信公衆號嘗試小程序。

從目的上來講

二者都是爲了擴大圍繞本身的生態圈和行業影響力。若是 PWA 推廣開，就至關於 Google 引領了 Web 的發展方向，這會給公司帶來巨大的長期利益。而與微信小應用，則是推廣開後，其裙下寄生的應用越多，就越能給微信吸引用戶流量，讓微信往平臺轉變。微信從最開始的即時消息軟件，發展到後面的內容平臺，支付平臺，這一步則是應用平臺。另外一方面，寄生其下的應用內的交易一定須要通過微信支付的通道，正好二者相輔相成。

從侷限性來講

二者首先有個共同的侷限性：

現實點說，大部分公司不會立馬拋棄現有的網頁應用或原生應用，因此在必定的時間裏，公司須要額外分配一部分資源用來開發 PWA/微信小程序。這是沒法避免的，特別是微信平臺，當用戶養成使用小程序的習慣後，公司爲了擴大本身的覆蓋面，極可能會入住微信，可是另外一方面原先的 App 即便活躍用戶不多了，卻也不能徹底拋棄，否則用戶會不滿甚至棄用你的產品。因此前期公司須要投入必定資源在新平臺的開發上，後期也須要投入在原有久平臺的維護上。

微信額外的侷限性就在於內容的豐富程度上，這實際上是個妥協。若是內容要豐富，那麼就對性能和接口有更多的需求，這樣就對微信平臺自己的要求更高，簡直能夠理解成開發了一個新的操做系統 WeChat OS。並且一個系統一旦功能多了，上手就會變慢，很容易就嚇跑那些原先之生存在微信公衆號裏的用戶，得不償失了，因此我猜他們會在必定程度上限制這些小程序可使用的接口數量。

PWA 在侷限性這點上是有優點的，可是在推廣方面卻缺少關鍵動力。畢竟相對於微信小程序，開發 PWA 須要的資源更多，不是全部中小團隊都能付出的起的。

總結一下

微信小程序和 PWA 做爲牆裏牆外的兩個巨頭試圖改變移動互聯網行業的努力，看起來很相似，可是其實格局很不同。現階段來看微信的這個新平臺頗有前景，可是畢竟還在 Close Beta，究竟之後發展如何仍是留給市場決定吧。