摘要：開(kāi)始使用和類(lèi)似的，中的邏輯需要多帶帶放在一個(gè)文件中，然后在當(dāng)前頁(yè)面通過(guò)其進(jìn)行創(chuàng)建。那這時(shí)候如果網(wǎng)絡(luò)信號(hào)恢復(fù)了，就算頁(yè)面關(guān)掉，這些被信息會(huì)在后臺(tái)被發(fā)送出去。下面的內(nèi)容則針對(duì)打開(kāi)的過(guò)程，進(jìn)行優(yōu)化和靠近。兼容性目前基本只有支持。

個(gè)人很少看視頻學(xué)習(xí)新技術(shù)，覺(jué)得和讀文檔比起來(lái)看視頻太浪費(fèi)時(shí)間了。但是最近在看google I/O 2016的時(shí)候，發(fā)現(xiàn)介紹Progressive Web Apps的一段視頻很不錯(cuò)。近50分鐘的內(nèi)容，深入淺出，為了方便分享和以后回顧，決定將其內(nèi)容整理成文章。

字面上就是先進(jìn)的web app。下面是官方解釋?zhuān)?/p>

Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They"re reliable, fast, and engaging.

Chrome在PC上有Chrome App，感覺(jué)PWA和這個(gè)有些類(lèi)似：在桌面上的，能獨(dú)立運(yùn)行的web app。但PWA不僅如此，先看看效果對(duì)比圖：

可以看到，顯著的不一樣，在offline情況下，PWA依然能夠渲染界面，讀取歷史數(shù)據(jù)。另外，和目前的add to home screen不一樣的是，這里已經(jīng)不是簡(jiǎn)單的在桌面上添加一個(gè)網(wǎng)頁(yè)的快捷方式，而更像一個(gè)webview包裝的app，提供了加載過(guò)場(chǎng)頁(yè)面，并且地址欄也沒(méi)有了。

那它到底提供些什么樣的新技術(shù)讓PWA和原生的媲美呢？答案是使用Offline First開(kāi)發(fā)模式和Service Worker技術(shù)，優(yōu)化了web app的體驗(yàn)。

就像曾經(jīng)的Web Worker一樣，這是一個(gè)新的瀏覽器特性，它的解釋如下：

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.

簡(jiǎn)單來(lái)說(shuō)它就是個(gè)代理，在網(wǎng)絡(luò)和瀏覽器之間，以事件的方式讓開(kāi)發(fā)者介入，來(lái)實(shí)現(xiàn)資源和數(shù)據(jù)的控制。

和Web Worker類(lèi)似的，Service Worker中的邏輯需要多帶帶放在一個(gè)JS文件中，然后在當(dāng)前頁(yè)面通過(guò)其URL進(jìn)行創(chuàng)建。

當(dāng)register之后，你的service worker腳本將經(jīng)歷download, install and activate過(guò)程，接著就進(jìn)入和它的事件驅(qū)動(dòng)階段。

Chrome調(diào)試工具中也添加有Service Worker相關(guān)的選項(xiàng)：

在視頻中簡(jiǎn)單涉及到了以下事件：

install: 當(dāng)被下載的worker文件是新的時(shí)候（第一次下載，或者和老的worker內(nèi)容不一樣），會(huì)進(jìn)行安裝，觸發(fā)install事件

activate: 在worker安裝之后，并且如果沒(méi)有老的worker，或者老的worker已經(jīng)沒(méi)有頁(yè)面在使用它的時(shí)候，就會(huì)激活新的worker

fetch: 任何瀏覽器發(fā)送請(qǐng)求時(shí)都是觸發(fā)fetch事件，例如下載html頁(yè)面，js文件，css或者font等，當(dāng)然還有ajax請(qǐng)求

更多事件請(qǐng)參考這里

例如，在fetch事件中攔截所有的請(qǐng)求，設(shè)置response為Hello：

或者說(shuō)是，攔截404，顯示為一個(gè)特定的畫(huà)面：

再看下面這個(gè)更有意義一點(diǎn)的例子：

這里在install的時(shí)候，將offline的提示頁(yè)面和它的css文件緩存在cache中（如果緩存滿(mǎn)了或者其他原因?qū)е路湃刖彺媸?，那么這個(gè)worker將不會(huì)被install，之后也就不會(huì)控制頁(yè)面）。然后在之后的fetch中，進(jìn)行請(qǐng)求攔截：

如果請(qǐng)求在cache中，返回cache中的response，否則通過(guò)網(wǎng)絡(luò)去fetch這個(gè)request的response

如果一個(gè)navigate類(lèi)型的request（HTML跳轉(zhuǎn)的請(qǐng)求）fetch失敗，即offline，那么去緩存中讀取我們的offline提示頁(yè)面作為response

類(lèi)似的，我們可以將app的頁(yè)面做成一個(gè)殼，數(shù)據(jù)去由javascript去填充，這樣的話(huà)，我們就可以通過(guò)service worker將頁(yè)面緩存起來(lái)，打開(kāi)app的時(shí)候從本地緩存中讀取渲染頁(yè)面，然后通過(guò)網(wǎng)絡(luò)去請(qǐng)求數(shù)據(jù)。這個(gè)過(guò)程，基本就和native app一直了。（這里太適合那些MVVM的框架了?。?/p>

在視頻的最后，還展示了一個(gè)background sync的功能，這個(gè)功能很強(qiáng)大（sync也是Service Worker的一個(gè)事件）。其展示的例子效果類(lèi)似于，在微信上發(fā)送信息，就算沒(méi)有網(wǎng)絡(luò)，發(fā)送信息在頁(yè)面上的操作都能完成，但由于網(wǎng)絡(luò)原因不能夠真正的發(fā)送出去。那這時(shí)候如果網(wǎng)絡(luò)信號(hào)恢復(fù)了，就算頁(yè)面關(guān)掉，這些被信息會(huì)在后臺(tái)被發(fā)送出去。

有了上面的頁(yè)面離線機(jī)制，我們像native靠近了一步，但是還不夠。下面的內(nèi)容則針對(duì)app打開(kāi)的過(guò)程，進(jìn)行優(yōu)化和靠近native。

通過(guò)manifest文件進(jìn)行配置，能配置：

桌面圖片，桌面顯示名稱(chēng)

打開(kāi)app時(shí)的過(guò)場(chǎng)頁(yè)面中的的圖標(biāo)，名稱(chēng)，背景色

打開(kāi)app后的初始化URL（這里的URL和在你add to home screen時(shí)的URL可以不一樣）

等等

通過(guò)上面的配置，我們的PWA就能想native app一樣打開(kāi)，并且在無(wú)論有網(wǎng)絡(luò)，沒(méi)有網(wǎng)絡(luò)或者網(wǎng)絡(luò)環(huán)境很差的情況下，都再也看不到那讓人厭煩的，只能看著地址欄不斷加載的空白頁(yè)面。

可以通過(guò)瀏覽器端的DB存儲(chǔ)app的一些歷史數(shù)據(jù)，比如聊天記錄，然后在Service Worker中給對(duì)應(yīng)的數(shù)據(jù)請(qǐng)求進(jìn)行來(lái)接，那么在下次打開(kāi)時(shí)，就算沒(méi)有網(wǎng)絡(luò)，在頁(yè)面從緩沖中渲染之后，也能夠從DB中讀取一部分歷史數(shù)據(jù)。這樣一來(lái)，這真的native app就沒(méi)有區(qū)別了。

目前基本只有chrome支持。