認識Progressive Web App

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

什麼是Progressive Web App(PWA)

字面上就是先進的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的體驗。

Service Worker

就像曾經的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中，進行請求攔截：

1. 若是請求在cache中，返回cache中的response，不然經過網絡去fetch這個request的response

2. 若是一個navigate類型的request（HTML跳轉的請求）fetch失敗，即offline，那麼去緩存中讀取咱們的offline提示頁面做爲response

相似的，咱們能夠將app的頁面作成一個殼，數據去由javascript去填充，這樣的話，咱們就能夠經過service worker將頁面緩存起來，打開app的時候從本地緩存中讀取渲染頁面，而後經過網絡去請求數據。這個過程，基本就和native app一直了。（這裏太適合那些MVVM的框架了！）

後臺同步

在視頻的最後，還展現了一個background sync的功能，這個功能很強大（sync也是Service Worker的一個事件）。其展現的例子效果相似於，在微信上發送信息，就算沒有網絡，發送信息在頁面上的操做都能完成，但因爲網絡緣由不可以真正的發送出去。那這時候若是網絡信號恢復了，就算頁面關掉，這些被信息會在後臺被髮送出去。

其餘

添加到桌面

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

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

1. 桌面圖片，桌面顯示名稱

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

3. 打開app後的初始化URL（這裏的URL和在你add to home screen時的URL能夠不同）

4. 等等

經過上面的配置，咱們的PWA就能想native app同樣打開，而且在不管有網絡，沒有網絡或者網絡環境不好的狀況下，都再也看不到那讓人厭煩的，只能看着地址欄不斷加載的空白頁面。

前端存儲

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

兼容性

目前基本只有chrome支持。