一文詳解下一代web應用模型—PWA

去年apple在iOS11.3的正式更新中，添加了對service worker的支持。新的桌面版Safari會默認打開Service Worker。這意味着咱們能夠經過Safari將支持PWA的站點像原生app同樣添加到桌面，而且支持在離線狀態下訪問。至此，Microsoft, Chrome, Apple這些瀏覽器大廠都已所有支持了PWA。本文將爲你們介紹PWA的特色、技術核心、建立方法、在項目中的應用和調試技巧。

什麼是PWA

PWA(progressing web app)，漸進式網頁應用程序，是google在2016年GoogleI/O大會上提出的下一代web應用模型，並在隨後的日子裏迅速發展。PWA的目的在於加強web體驗。從功能上來說，PWA首先是一個web應用，經過manifest.json配置文件以及Service Worker來得到web加載速度提高，支持離線工做，可被添加主屏幕，全屏執行等特性。這些特性使得web應用（尤爲是移動設備）體驗漸進式接近原生app。

PWA的特色

在咱們思考PWA會爲咱們帶來哪些提高的時候，google已經爲咱們總結出了PWA的相關特性（可參考：https://developers.google.com...）。

PWA會爲web應用帶來以下的特色：

Reliable - Load instantly and never show the downasaur, even in uncertainnetwork conditions（可靠的，即便在網絡不穩定的條件下，也可以當即加載而且永遠不會顯示網絡癱瘓的頁面）

Fast - Respondquickly to user interactions with silky smooth animations and no jankyscrolling.（迅速的，藉助於流暢的動畫和無卡頓滾動實現快速響應用戶的交互）

Engaging- Feel like a natural app on the device, with an immersive user experience.（迷人的，PWA有着近乎原生app般的用戶體驗）

而在google更具體的定義下，PWA至少應具備這些特性：

漸進式：能夠確保每一個用戶都可以打開網頁 響應式：全部硬件設備如手機，pc都可以完美適配

離線應用：支持沒有網絡的狀況下也能夠打開網頁

app化：體驗近似app

常更新：常常處於最新的狀態

安全：僅服務於https協議確保傳輸內容不會被篡改

可被發現：容許被搜索引擎識別

推送：在沒有打開app的狀況下能夠獲取到推送信息

可安裝：可以像app同樣被添加到桌面

可跳轉：只需一個連接便可訪問到你的web app

PWA的技術核心

想讓本身的web app升級成爲PWA，繞不開PWA三個關鍵的技術：

• Service Worker
• Manifest
• Push Notification

下面我會逐一爲你們介紹三者的概念

1 ServiceWorker

Service worker算是PWA中的最核心內容了。相比於瀏覽器默認提供的workers, service worker是一種特別的事件驅動的worker，特別之處在於它的生命週期與當前頁面無關，當前頁面未關閉也能夠退出，當前頁面未打開時也能夠啓動。也就是，service worker提供了web應用一般不具備的離線能力。在網絡不穩定的狀況下，能夠操做cache獲取數據，並保持頁面在離線狀態下也能正常顯示。（達觀數據 施列宇）

你可能會問AppCache也具備一樣的離線能力，爲何咱們不能使用AppCache呢？實際上AppCache這項技術自己存在更新，存儲大小，路徑問題。在多頁面應用方便，AppCache還存在着明顯的缺陷。而Service Worker能夠很好的規避這些問題。

Service Worker的啓用條件是1.必須是https協議或者localhost環境下，2..瀏覽器支持。有了這兩個先決條件，咱們就可使用Service Worker進行PWA開發了。

Service Worker兼容性目前進展

生命週期是Service Worker中比較複雜的一部分了，若是不能瞭解它的整個週期，在使用過程當中，你可能會有一種失控的感受。

Service Worker的生命週期包含六種狀態：parsed, installing, installed. activating, activated, redundant。狀態以前的轉換過程能夠用一張圖來表達。

Service Worker的生命週期

Parsed(解析成功): 頁面註冊Service Worker時，瀏覽器解析腳本並獲取入口點。解析成功，就能夠訪問serviceworker對象了。

Installing(正在安裝):Service Worker在解析完成後，瀏覽器會進行安裝。若是安裝失敗會直接進入到redundant(廢棄)狀態。（達觀數據 施列宇）

Installed/Waiting(安裝成功/等待狀態): 若是ServiceWorker成功安裝，Service Worker會處於等待狀態，等待事件響應。

Activating(正在激活): 處於等待狀態下的Service Worker若是感知到如下幾件事兒，將會進入activating狀態中：1.Service Worker腳本中self.skipWaiting()方法被調用；2.用戶已關閉service worker做用域下的全部頁面；3.頁面超時。Acticating失敗也會使Service Worker進入Rendundant狀態。

Activated(激活成功): 激活成功狀態。

Redundant(廢棄): 廢棄狀態，Serivce Worker處於這個狀態就會中止工做，須要開發者去檢查哪個環節出了問題。

2 Manifest（應用清單）

PWA提供了一個manifest.json清單文件來向瀏覽器暴露web應用的元數據，包括名稱，icon的url等。以備瀏覽器使用，好比在添加至主屏或推送通知時暴露給操做系統，從而加強web應用於操做系統的集成能力。

Manifest在PWA中的做用大體有:

1. 將PWA添加至手機屏幕上
2. 在app中全屏啓動，不顯示地址欄
3. 控制屏幕橫豎屏
4. 定義PWA啓動畫面
5. 設置應用的啓動方式，是從主屏幕啓動仍是從URL啓動
6. 設置添加屏幕上的應用程序的基本屬性，如名稱，圖標

3 Push Notification（消息推送）
Service worker中提供了消息推送的功能。消息推送在原生app或者hybird app中已不鮮見。消息推送到頁面，意味着頁面預先知道有些事情要發生，並把這些事情作好。好比，提早準備好頁面須要的資源。推送的服務器，chromium默認使用的是GCM/FCM，目前因爲某些緣由還沒法在國內進行訪問，國內暫時也沒有瀏覽器廠商支持標準的推送服務。

建立一個簡單的PWA

介紹了PWA使用到的核心技術，下面咱們來建立一個簡單的PWA。
在使用Service以前，須要先判斷宿主對象navigator中是否含有servicerWorker對象。若是存在，則能夠經過serviceWorker對象的register方法進行註冊。

註冊Service Worker

註冊過程當中，瀏覽器會解析serviceWorker註冊文件，在此期間出現任何錯誤，service Worker都會進入Redundant狀態。（達觀數據 施列宇）

Service Worker成功執行，install事件就會被激活，install完成後，service worker進入就緒狀態，能夠進行使用了。

install事件預處理安裝邏輯，使用skipWaiting方法讓service worker直接進入activating狀態

service worker對象監聽fetch對接，在此以爲是否須要使用service worker緩存文件亦或是原地址內容。

使用caches.match方法判斷當前request是否爲已緩存內容

除此以外，咱們也須要及時將過時的靜態資源清除掉，當web更新，某些文件添加了新的版本號，能夠經過activate事件回調，清除掉過時資源。而後使用clients.claim方法取得頁面控制權，這樣新頁面打開則會使用新的service worker,舊的service worker對象則會進入redundant狀態。

使用activate事件處理過時資源

這樣一個支持PWA的web app已經搭建起來了，刷新頁面後能夠從chrome network中看到幾個緩存的靜態資源來源是from ServiceWorker。

從network中看出部分資源是從service worker加載而來的

在angular項目中添加PWA支持
達觀數據使用了Angular做爲前端技術棧，咱們前端技術團隊在研究pwa支持的同時也考慮了前端項目在angular項目中的兼容性。

Angular在6.0版本加入了PWA的支持，想要支持PWA特性須要先將angular，angular-cli升級到6+.

使用ng add @angular/pwa添加PWA特性支持。添加後會檢測到angular.json，ngsw.json，manifest.json等多個文件被編輯或被建立。其中ngsw.json是angular的PWA特性的配置文件。­（達觀數據 施列宇）

使用ng build –prod –build-optimizer 命令將代碼打包，將代碼部署後會看到靜態資源都來源於serviceWorker，也就證實PWA添加成功了。

使用chrome調試PWA

google做爲PWA的推行者，自家的瀏覽器也最先帶上了PWA調試工具，方便開發者進行功能調試。
開發者經過F12打開調試窗口，選擇application，下方會有service workers相應的窗口。這裏能夠看到當前域下有哪些serviceworker對象，能夠觀察到他們當前的狀態，service worker對象文件詳情等信息。也能夠經過offline勾選項切換無網絡狀態下頁面的反應，update on reload強制每次刷新都重置service worker進行install; Bypass for network切換不支持service worker窗口下的頁面呈現狀態。能夠說都是很棒的調試功能。（達觀數據 施列宇）

chrome service worker調試窗口

你們也能夠在chrome://serviceworker-internals中瞭解瀏覽器中全部的service worker狀態。

關於做者 施列宇：達觀數據前端技術專家，負責達觀數據畢昇系統，倉頡系統等項目的研發，對數據挖掘在前端產品中落地，前端數據可視化，標準化工程化有着多年的研究。