文／汪志成
淺談微信小程序與PWA
作為一個(gè)程序員随珠，你這兩天的朋友圈被微信小應(yīng)用刷屏了吧灭袁？想試了吧？沒(méi)拿到邀請(qǐng)吧窗看？沒(méi)關(guān)系茸歧，我來(lái)幫你！
當(dāng)然显沈，我沒(méi)法幫你拿到邀請(qǐng)碼 —— 因?yàn)槲乙矝](méi)有软瞎。不過(guò)，別失望拉讯，我今天要跟大家談一項(xiàng)比微信小程序更宏觀的概念 —— Google提出的PWA涤浇。
PWA是什么？
PWA全稱是“Progressive Web Apps”魔慷，譯成中文就是漸進(jìn)式應(yīng)用只锭。這是Google在2015年6月15日提出的概念，參見(jiàn)Alex Russell寫的https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/院尔。
那么蜻展，什么是漸進(jìn)式應(yīng)用呢？
Alex寫道：
在昨天的晚餐上邀摆，我和Frances列舉出了新型應(yīng)用的幾個(gè)特征：
- 響應(yīng)式：適應(yīng)任何形態(tài)因素
- 不依賴網(wǎng)絡(luò)：在Service Worker（H5中的新技術(shù)纵顾，appcache的升級(jí)版）的支持下能夠離線使用
- 像本地應(yīng)用一樣交互：采用“殼+內(nèi)容”模式來(lái)實(shí)現(xiàn)類似本地應(yīng)用的瀏覽和交互體驗(yàn)
- 保持最新：始終透明的升級(jí)到最新版，這要感謝Service Worker提供的升級(jí)機(jī)制
- 安全：通過(guò)TLS（這是Service Worker所要求的）來(lái)防止通訊被窺探
- 可發(fā)現(xiàn)的：具有像“應(yīng)用”一樣的唯一標(biāo)識(shí)栋盹，這要感謝W3C的Manifest文件格式施逾，它在“Service Worker”中注冊(cè)的scope能允許搜索引擎發(fā)現(xiàn)這些應(yīng)用。
- 可“再接觸”的：可以訪問(wèn)操作系統(tǒng)的“可再接觸”界面贞盯，比如推送通知
- 可安裝的：通過(guò)瀏覽器提供的提示音念，可以把它加入主屏，允許用戶把覺(jué)得有用的應(yīng)用“保留”下來(lái)躏敢，而不用到應(yīng)用商店去安裝闷愤，那樣太麻煩了。
- 可鏈接的：這意味著它們是零阻力件余、零安裝讥脐，并且易于共享的。URL更能發(fā)揮社交傳播的能量啼器。
PWA怎么用旬渠？
一個(gè)PWA的使用過(guò)程大概是這樣的：
這貨開始就是一個(gè)普通網(wǎng)頁(yè)：
然后，這是什么鬼端壳？
這網(wǎng)站看著還不錯(cuò)告丢，那就接受吧！
它出現(xiàn)在手機(jī)的首屏了损谦，以后隨叫隨到岖免！
點(diǎn)了就能像一個(gè)本地應(yīng)用那樣啟動(dòng)它：
看岳颇，啟動(dòng)完也跟一個(gè)本地應(yīng)用沒(méi)有區(qū)別：
PWA的好處
Web應(yīng)用（網(wǎng)頁(yè)）和本地應(yīng)用（App）各有優(yōu)勢(shì)，比如：
- Web應(yīng)用不需要安裝颅湘，因此減少了用戶流失（想想你要安裝一個(gè)應(yīng)用時(shí)有多么猶豫吧）
- Web應(yīng)用方便傳播话侧，你只要在微信或者QQ里發(fā)一個(gè)網(wǎng)址就有很多人會(huì)去看（比如本文 _）
- Web應(yīng)用的收藏、前進(jìn)闯参、后退這些功能非常有用
- 本地應(yīng)用的留存度比較高瞻鹏。你看過(guò)一個(gè)網(wǎng)址后再回來(lái)的概率大約是本地應(yīng)用的1/3。
- 本地應(yīng)用可以推送通知鹿寨，而Web應(yīng)用只有在瀏覽器打開狀態(tài)下才行
- 本地應(yīng)用可以離線使用新博，只要做適當(dāng)?shù)脑O(shè)計(jì)就可以不受網(wǎng)絡(luò)環(huán)境的影響
- 本地應(yīng)用可以訪問(wèn)更加豐富的功能，比如更大的本地存儲(chǔ)空間
那么脚草，它們能否合二為一呢叭披？這就是PWA所做的事！
通過(guò)前面提到的這些步驟玩讳，PWA可以讓用戶同時(shí)獲得這兩種好處涩蜘。這無(wú)論對(duì)于用戶本身還是對(duì)于應(yīng)用的開發(fā)者都非常有意義。
如何實(shí)現(xiàn)PWA熏纯？
其實(shí)從Alex的描述中就可以看到同诫，在技術(shù)上我們離實(shí)現(xiàn)PWA并不遠(yuǎn)：
Web應(yīng)用開發(fā)技術(shù)
已經(jīng)具備。
特別是得益于Angular等SPA應(yīng)用的普及樟澜，SPA不但響應(yīng)更加快速误窖，更加接近原生應(yīng)用的操作體驗(yàn)，而且讓我們可以完全不依賴服務(wù)器工作了秩贰。
離線存儲(chǔ)技術(shù)
有人可能還記得一項(xiàng)叫AppCache的技術(shù)霹俺，它已經(jīng)廢棄了，現(xiàn)在由Service Worker所取代毒费。這是一個(gè)更強(qiáng)大的AppCache丙唧，它不僅能存儲(chǔ)HTML/JS等靜態(tài)文件，而且還讓你能夠在客戶設(shè)備上運(yùn)行起一個(gè)仿真的超輕量級(jí)Web服務(wù)器觅玻，你在里面已經(jīng)幾乎可以寫Node程序了想际！
這是新的H5標(biāo)準(zhǔn)的一部分，而不是PWA特有的溪厘。
推送通知
H5標(biāo)準(zhǔn)中已經(jīng)有了用來(lái)推送通知的API（用過(guò)Web Gmail的話應(yīng)該見(jiàn)過(guò)）胡本，現(xiàn)在只要把它和操作系統(tǒng)的API對(duì)接就行了。當(dāng)然畸悬，這最好由操作系統(tǒng)提供支持侧甫，這已經(jīng)實(shí)現(xiàn)了，那就是新推出的Android 7。
App殼程序
這個(gè)殼程序其實(shí)自己來(lái)實(shí)現(xiàn)也沒(méi)問(wèn)題披粟，技術(shù)上沒(méi)啥難度彩扔，不過(guò)不用重復(fù)造輪子了，因?yàn)楣俜揭呀?jīng)出了一個(gè)僻爽，參見(jiàn)https://github.com/GoogleChrome/application-shell。如果用Angular 2就更幸福了贾惦，因?yàn)锳ngular 2還制作了一個(gè)Angular 2專用的殼：https://github.com/angular/mobile-toolkit胸梆。不過(guò)，它現(xiàn)在還處于未發(fā)布狀態(tài)须板，早鳥可以開始提前嘗試了碰镜。
微信小程序與PWA
雖然微信小程序概念的提出比PWA晚了半年，不過(guò)相信張小龍這個(gè)級(jí)別的產(chǎn)品經(jīng)理不會(huì)是簡(jiǎn)單的抄襲PWA概念习瑰，而是會(huì)發(fā)揮微信生態(tài)圈的優(yōu)勢(shì)绪颖，提供更廣闊的應(yīng)用場(chǎng)景√鹧伲或許我們應(yīng)該把微信小程序看做PWA的一種優(yōu)質(zhì)實(shí)現(xiàn)柠横。
假如你沒(méi)有拿到微信小程序的邀請(qǐng)碼，不妨像我一樣课兄，先從研究PWA開始吧牍氛。
