微信小程序 Progressive Web App
這次我也做一回標題黨贤壁，蹭一次熱點話題班挖。
近期，微信扔出一個還在內(nèi)測階段的技術(shù)芯砸，就炸翻了這個小圈子。吃瓜群眾紛紛表示驚嘆给梅，甚是擔心這個 “小程序” 會不會革了自己的命假丧。個人認為，革命倒是不會动羽，小程序本質(zhì)上還是類似 H5包帚，屬于輕量級應用，大型復雜業(yè)務還是更適合使用原生應用來處理运吓。不過渴邦，在處理小規(guī)模任務上，我們又多了一種不錯的選擇拘哨。
我們暫時不關(guān)心革命不革命的問題谋梭，轉(zhuǎn)而思考更本質(zhì)的東西 --- 我們需要一個什么樣的小型應用？
我覺得應該是：
- 快速獲取
- 快速加載
- 快速響應
- 跨平臺的一致性體驗
前三點可以總結(jié)為一個字倦青，快瓮床。第四點則是因為客觀上存在著種類繁多的設備類型，我們希望應用在大多數(shù)環(huán)境下都能保持一致的水準。
傳統(tǒng)的 H5 應用可以做到快速獲取 --- 你只需要一個網(wǎng)址隘庄，無需安裝即可使用踢步，也可以做到跨平臺 --- 任何支持 H5 的瀏覽器均可得到一致的體驗。但和原生應用相比丑掺，H5 應用的加載和響應速度（尤其是在網(wǎng)絡不穩(wěn)定的情況下）實在是令人難以接受获印，更不用提離線運行了。
假如網(wǎng)絡存在波動街州，斷開連接數(shù)秒鐘兼丰，普通 H5 應用很可能就罷工顯示 “未連接到互聯(lián)網(wǎng)”。也許我們只是想發(fā)送一條消息菇肃，或者瀏覽已經(jīng)加載完畢的內(nèi)容地粪，卻引起了整個應用界面的崩潰。
不過我們可以很自然的想到解決思路 --- 能不能讓 H5 應用擁有可控制的緩存機制琐谤？這樣就無須從頭加載蟆技，減少流量，提升相應效率斗忌，甚至實現(xiàn)完全離線的能力质礼。
因此，很多組織和公司都推出了相應的解決方案织阳。其中就包括本次介紹的兩位主角：微信小程序 和 Progressive Web App [1]眶蕉。
技術(shù)上
經(jīng)過簡單的了解，我發(fā)現(xiàn)兩者其實使用了相似的技術(shù)：
首先要把界面部分緩存在本地唧躲，因為界面多是靜態(tài)的造挽，更新頻率不高，把它緩存起來是靠譜的選擇弄痹。這部分比較容易理解饭入，關(guān)鍵在于如何處理動態(tài)數(shù)據(jù)或者界面更新呢？
為了解決這個問題肛真，Progressive Web App 使用了稱為 Service Worker 的技術(shù)谐丢，而微信小程序的官方說明中也指出 “邏輯層(App Service) ... 類似ServiceWorker，所以邏輯層也稱之為App Service蚓让∏溃”依此看，這兩家應該是差不多历极。
那這個 Service Worker 或者 App Service 到底是個什么呢窄瘟？
簡單來說這個東西就是一個在網(wǎng)絡和瀏覽器之間的 “中間層”。應用不直接向網(wǎng)絡發(fā)起請求趟卸，而是通過一系列事件寞肖，與這個中間層進行交互纲酗，然后再由這個中間層去訪問網(wǎng)絡，獲取數(shù)據(jù)新蟆。以前的網(wǎng)頁緩存是不可控制的觅赊，而使用了上述技術(shù)，可實現(xiàn)可編程的離線能力琼稻。我們可以指定哪些內(nèi)容需要被離線保存吮螺，當下次訪問這些內(nèi)容時，如果緩存可用帕翻，就可以讀取緩存從而提升效率鸠补。而離線時，可直接從緩存中拿取緩存數(shù)據(jù)進行加載嘀掸。甚至還可以在網(wǎng)絡恢復時紫岩，自動重新連接服務器獲取更新內(nèi)容。
(圖片來自 認識Progressive Web App 睬塌，文字作者： 外籍杰克 泉蝌，圖片作者：未知)
依托這種技術(shù)，可以得到貼近原生應用的體驗揩晴。比如勋陪，PWA/微信小程序 可以在離線狀態(tài)下發(fā)送聊天消息。因為 Service Worker 或者 App Service 會在后臺等待著網(wǎng)絡重連硫兰，一旦網(wǎng)絡重新接入诅愚，消息便會自動發(fā)送出去。
比較
接下來我們不過多在技術(shù)細節(jié)上討論兩者（絕對不會告訴你其實是我根本不懂技術(shù)細節(jié) 233333）劫映，從用戶的眼光去審視這兩者的異同违孝。
提供的功能
Progressive Web App：除了傳統(tǒng) H5 已經(jīng)提供的功能，還提供了后臺同步泳赋、后臺推送消息通知等功能雌桑。
微信小程序：提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力摹蘑，如獲取用戶信息，本地存儲轧飞，支付功能等衅鹿。
兼容性
Progressive Web App：由瀏覽器提供支持，Chrome过咬、Opera大渤、Firefox 均已支持 PWA。
微信小程序：由微信提供支持掸绞，只能在微信中使用泵三。
自由度
Progressive Web App：PWA 可以生成一個圖標耕捞，并被添加到桌面上。而且不僅可以在手機端使用烫幕，在任何支持 PWA 的瀏覽器環(huán)境下均可正常使用俺抽。
微信小程序：只有在微信中使用。
總結(jié)
看來较曼，微信小程序是微信生態(tài)布局之一磷斧，而 Progressive Web App 則把眼光放在了全體 Web App 上，畢竟后面站著的是 Google捷犹，而 Google 手里握著 Chrome 這個東西弛饭。
微信小程序的殺手锏是它能與微信這個龐大的體系進行交互，比如獲取用戶信息萍歉，進行微信支付侣颂，但最終的控制權(quán)在微信手上，過不了審核枪孩，說不讓你發(fā)布你就不讓你發(fā)布憔晒。而 Progressive Web App 則更為自由，你可以部署項目到任何支持 HTTPS 的服務器上（而且必須支持 HTTPS 才能工作）销凑，支持的范圍也不受某個應用的限制丛晌，有瀏覽器即可。
不管是哪一種新技術(shù)斗幼，都是希望帶給用戶更爽快的使用體驗澎蛛，給開發(fā)者更便捷的開發(fā)體驗，最好再帶來點利益蜕窿。而對于開發(fā)人員谋逻，積極擁抱變化，找尋變化中的不變量桐经，才能任其千變?nèi)f化而應對自如毁兆。
最后，已經(jīng)有一定數(shù)量的知名應用使用了 PWA 技術(shù)阴挣，Flipboard 就是其中之一气堕。快使用支持 PWA 技術(shù)的瀏覽器體驗一下吧畔咧。（試試看在第一次加載完畢后斷開所有網(wǎng)絡再刷新）
本文采用 知識共享署名-相同方式共享 3.0 中國大陸許可協(xié)議 進行許可茎芭。
限于作者水平，錯誤疏漏在所難免誓沸，如有文中有任何錯誤請直接在此回復聯(lián)系作者梅桩。收到之后會及時更正并表示感謝。
-
Progressive Web App 是 Google 在 2015 年中旬推出的技術(shù)拜隧。 ?
