作者｜汪志成 Angular 谷歌開發(fā)技術(shù)專家（GDE）
搜索加關(guān)注Google官方微信公眾號：谷歌開發(fā)者。與谷歌一起創(chuàng)造未來！
被微信小程序刷屏了？來看看 PWA 吧，它們之間有千絲萬縷的聯(lián)系
作為一個(gè)程序員，你這兩天的朋友圈被微信小應(yīng)用刷屏了吧？想試了吧？沒拿到邀請吧？沒關(guān)系，我來幫你！
當(dāng)然，我沒法幫你拿到邀請碼 —— 因?yàn)槲乙矝]有。不過，別失望，我今天要跟大家談一項(xiàng)比微信小程序更宏觀的概念 —— Google 提出的 PWA。
1. PWA是什么？
PWA 全稱是 Progressive Web Apps ，譯成中文就是漸進(jìn)式應(yīng)用。這是 Google 在 2015 年 6 月 15 日提出的概念，參見 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 的升級版）的支持下能夠離線使用
像本地應(yīng)用一樣交互：采用“殼+內(nèi)容”模式來實(shí)現(xiàn)類似本地應(yīng)用的瀏覽和交互體驗(yàn)
保持最新：始終透明的升級到最新版，這要感謝 Service Worker 提供的升級機(jī)制
安全：通過 TLS（這是 Service Worker 所要求的）來防止通訊被窺探
可發(fā)現(xiàn)的：具有像“應(yīng)用”一樣的唯一標(biāo)識，這要感謝 W3C 的 Manifest 文件格式，它在“Service Worker”中注冊的 scope 能允許搜索引擎發(fā)現(xiàn)這些應(yīng)用。
可“再接觸”的：可以訪問操作系統(tǒng)的“可再接觸”界面，比如推送通知
可安裝的：通過瀏覽器提供的提示，可以把它加入主屏，允許用戶把覺得有用的應(yīng)用“保留”下來，而不用到應(yīng)用商店去安裝，那樣太麻煩了。
可鏈接的：這意味著它們是零阻力、零安裝，并且易于共享的。URL 更能發(fā)揮社交傳播的能量。
2. PWA 怎么用？
一個(gè) PWA 的使用過程大概是這樣的：
1） 這貨開始就是一個(gè)普通網(wǎng)頁：
2） 然后，右下角這是什么鬼？
3） 這網(wǎng)站看著還不錯(cuò)，那就接受吧！
4） 它出現(xiàn)在手機(jī)的首屏了，以后隨叫隨到！
5） 點(diǎn)了就能像一個(gè)本地應(yīng)用那樣啟動(dòng)它：
6）看，啟動(dòng)完也跟一個(gè)本地應(yīng)用沒有區(qū)別：
3. PWA 的好處
Web 應(yīng)用（網(wǎng)頁）和本地應(yīng)用（App）各有優(yōu)勢，比如：
Web 應(yīng)用不需要安裝，因此減少了用戶流失（想想你要安裝一個(gè)應(yīng)用時(shí)有多么猶豫吧）
Web 應(yīng)用方便傳播，你只要在微信或者 QQ 里發(fā)一個(gè)網(wǎng)址就有很多人會去看（比如本文 ^_^）
Web 應(yīng)用的收藏、前進(jìn)、后退這些功能非常有用
本地應(yīng)用的留存度比較高。你看過一個(gè)網(wǎng)址后再回來的概率大約是本地應(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)用可以訪問更加豐富的功能，比如更大的本地存儲空間
那么，它們能否合二為一呢？這就是 PWA 所做的事！
通過前面提到的這些步驟，PWA 可以讓用戶同時(shí)獲得這兩種好處。這無論對于用戶本身還是對于應(yīng)用的開發(fā)者都非常有意義。
4. 如何實(shí)現(xiàn) PWA？
其實(shí)從 Alex 的描述中就可以看到，在技術(shù)上我們離實(shí)現(xiàn) PWA 并不遠(yuǎn)：
1）Web 應(yīng)用開發(fā)技術(shù)
已經(jīng)具備。
特別是得益于 Angular 等 SPA 應(yīng)用的普及，SPA 不但響應(yīng)更加快速，更加接近原生應(yīng)用的操作體驗(yàn)，而且讓我們可以完全不依賴服務(wù)器工作了。
2）離線存儲技術(shù)
有人可能還記得一項(xiàng)叫 AppCache 的技術(shù)，它已經(jīng)廢棄了，現(xiàn)在由 Service Worker 所取代。這是一個(gè)更強(qiáng)大的 AppCache，它不僅能存儲 HTML/JS 等靜態(tài)文件，而且還讓你能夠在客戶設(shè)備上運(yùn)行起一個(gè)仿真的超輕量級 Web 服務(wù)器，你在里面已經(jīng)幾乎可以寫 Node 程序了！
這是新的 H5 標(biāo)準(zhǔn)的一部分，而不是 PWA 特有的。
3）推送通知
H5 標(biāo)準(zhǔn)中已經(jīng)有了用來推送通知的 API（用過 Web Gmail 的話應(yīng)該見過），現(xiàn)在只要把它和操作系統(tǒng)的 API 對接就行了。當(dāng)然，這最好由操作系統(tǒng)提供支持，這已經(jīng)實(shí)現(xiàn)了，那就是新推出的 Android 7。
4）App 殼程序
這個(gè)殼程序其實(shí)自己來實(shí)現(xiàn)也沒問題，技術(shù)上沒啥難度，不過不用重復(fù)造輪子了，因?yàn)楣俜揭呀?jīng)出了一個(gè)，參見:
https://github.com/GoogleChrome/application-shell
如果用 Angular 2 就更幸福了，因?yàn)?Angular 2 還制作了一個(gè) Angular 2 專用的殼：
https://github.com/angular/mobile-toolkit
不過，它現(xiàn)在還處于未發(fā)布狀態(tài)，早鳥可以開始提前嘗試了。
最后，假如你沒有拿到微信小程序的邀請碼，不妨像我一樣，先從研究 PWA 開始吧。
相關(guān)文章：
9.22 Google Doodle: 2016 年春分（ 南半球）
聯(lián)系客服
