摘要：開始使用和類似的，中的邏輯需要多帶帶放在一個文件中，然后在當前頁面通過其進行創建。那這時候如果網絡信號恢復了，就算頁面關掉，這些被信息會在后臺被發送出去。下面的內容則針對打開的過程，進行優化和靠近。兼容性目前基本只有支持。

個人很少看視頻學習新技術，覺得和讀文檔比起來看視頻太浪費時間了。但是最近在看google I/O 2016的時候，發現介紹Progressive Web Apps的一段視頻很不錯。近50分鐘的內容，深入淺出，為了方便分享和以后回顧，決定將其內容整理成文章。

字面上就是先進的web app。下面是官方解釋：

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，感覺PWA和這個有些類似：在桌面上的，能獨立運行的web app。但PWA不僅如此，先看看效果對比圖：

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

那它到底提供些什么樣的新技術讓PWA和原生的媲美呢？答案是使用Offline First開發模式和Service Worker技術，優化了web app的體驗。

就像曾經的Web Worker一樣，這是一個新的瀏覽器特性，它的解釋如下：

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.

簡單來說它就是個代理，在網絡和瀏覽器之間，以事件的方式讓開發者介入，來實現資源和數據的控制。

和Web Worker類似的，Service Worker中的邏輯需要多帶帶放在一個JS文件中，然后在當前頁面通過其URL進行創建。

當register之后，你的service worker腳本將經歷download, install and activate過程，接著就進入和它的事件驅動階段。

Chrome調試工具中也添加有Service Worker相關的選項：

在視頻中簡單涉及到了以下事件：

install: 當被下載的worker文件是新的時候（第一次下載，或者和老的worker內容不一樣），會進行安裝，觸發install事件

activate: 在worker安裝之后，并且如果沒有老的worker，或者老的worker已經沒有頁面在使用它的時候，就會激活新的worker

fetch: 任何瀏覽器發送請求時都是觸發fetch事件，例如下載html頁面，js文件，css或者font等，當然還有ajax請求

更多事件請參考這里

例如，在fetch事件中攔截所有的請求，設置response為Hello：

或者說是，攔截404，顯示為一個特定的畫面：

再看下面這個更有意義一點的例子：

這里在install的時候，將offline的提示頁面和它的css文件緩存在cache中（如果緩存滿了或者其他原因導致放入緩存失敗，那么這個worker將不會被install，之后也就不會控制頁面）。然后在之后的fetch中，進行請求攔截：

如果請求在cache中，返回cache中的response，否則通過網絡去fetch這個request的response

如果一個navigate類型的request（HTML跳轉的請求）fetch失敗，即offline，那么去緩存中讀取我們的offline提示頁面作為response

類似的，我們可以將app的頁面做成一個殼，數據去由javascript去填充，這樣的話，我們就可以通過service worker將頁面緩存起來，打開app的時候從本地緩存中讀取渲染頁面，然后通過網絡去請求數據。這個過程，基本就和native app一直了。（這里太適合那些MVVM的框架了！）

在視頻的最后，還展示了一個background sync的功能，這個功能很強大（sync也是Service Worker的一個事件）。其展示的例子效果類似于，在微信上發送信息，就算沒有網絡，發送信息在頁面上的操作都能完成，但由于網絡原因不能夠真正的發送出去。那這時候如果網絡信號恢復了，就算頁面關掉，這些被信息會在后臺被發送出去。

有了上面的頁面離線機制，我們像native靠近了一步，但是還不夠。下面的內容則針對app打開的過程，進行優化和靠近native。

通過manifest文件進行配置，能配置：

桌面圖片，桌面顯示名稱

打開app時的過場頁面中的的圖標，名稱，背景色

打開app后的初始化URL（這里的URL和在你add to home screen時的URL可以不一樣）

等等

通過上面的配置，我們的PWA就能想native app一樣打開，并且在無論有網絡，沒有網絡或者網絡環境很差的情況下，都再也看不到那讓人厭煩的，只能看著地址欄不斷加載的空白頁面。

可以通過瀏覽器端的DB存儲app的一些歷史數據，比如聊天記錄，然后在Service Worker中給對應的數據請求進行來接，那么在下次打開時，就算沒有網絡，在頁面從緩沖中渲染之后，也能夠從DB中讀取一部分歷史數據。這樣一來，這真的native app就沒有區別了。

目前基本只有chrome支持。