詳解使用angular框架離線你的應(yīng)用（pwa指南）

更新時間：2019年01月31日 11:09:43 作者：野生爬山虎

這篇文章主要介紹了詳解使用angular框架離線你的應(yīng)用（pwa指南），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

簡介

關(guān)于service worker，網(wǎng)絡(luò)上已經(jīng)有了較多的文章?？偟膩碚f它依靠緩存資源，攔截http請求，來幫助我們達(dá)到離線使用網(wǎng)站的效果。

而angular cli為了讓使用service worker更加便利，為開發(fā)者提供了一個配置窗口（ngsw-config.json）和一個與service worker通訊的服務(wù)（SwUpdate）。

啟用

1、新建項目后在項目根目錄下鍵入ng add @angular/pwa。

會為你的項目添加一些文件，其中包括上文提到的ngsw-config.json，為了即刻感受離線應(yīng)用的魅力，現(xiàn)暫不需配置。

2、安裝http-server npm install http-server -g

將用http-server啟用的服務(wù)器來加載應(yīng)用，這么做是為了模擬真實的生產(chǎn)環(huán)境，因為ng serve環(huán)境下無法啟用service worker。

3、鍵入ng build --prod進(jìn)行打包。打包完成后進(jìn)入dist下的項目根目錄下，鍵入http-server -p <port>將打包后的應(yīng)用部署在http-server指定的端口上。

4、打開瀏覽器進(jìn)入控制臺，以chrome為例，在network選項卡上勾選offline模擬離線使用。

此時重新刷新網(wǎng)頁發(fā)現(xiàn)頁面依然能夠在離線狀態(tài)下顯示，說明service worker已經(jīng)工作了。

配置

以上并沒有手動配置ngsw-config.json，然而初始的配置還有許多不足，比如無法攔截緩存api請求。因此需要對該文件的配置參數(shù)做一個大概了解（點擊瀏覽官方配置說明）。

參考官方的說明，我們了解到可以配置靜態(tài)資源的緩存策略（配置項中的assetGroups）以及動態(tài)資源的緩存策略（配置項中的dataGroups）。

靜態(tài)資源配置（assetGroups）

interface AssetGroup {
 name: string;
 installMode?: 'prefetch' | 'lazy';
 updateMode?: 'prefetch' | 'lazy';
 resources: {
  files?: string[];
  /** @deprecated As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead. */
  versionedFiles?: string[];
  urls?: string[];
 };
}

這是該配置項的接口，下面對各個屬性做一個簡要的說明：

resources屬性下可配置本地的靜態(tài)資源（resources.files）和通過cdn來的靜態(tài)資源（resources.urls）
name是需要編寫的該資源集合的唯一的名字
installMode配置的是你的網(wǎng)站應(yīng)用第一次在當(dāng)前瀏覽器加載后，service worker應(yīng)該進(jìn)行的緩存策略。選擇'prefetch'會將resources列出的資源一股腦兒的預(yù)先緩存起來，不管當(dāng)前是否有訪問到。選擇'lazy'則不會預(yù)先緩存，而是在用到時才會進(jìn)行緩存。
updateMode配置的是當(dāng)檢測到資源的版本改變之后，所進(jìn)行的資源緩存策略。

如何得知資源的版本發(fā)生了變化呢？angular service worker會對比資源內(nèi)容的hash值。如果hash值不同則版本不同。選擇'prefetch'會立即緩存更新的資源，選擇'lazy'會在用到時在進(jìn)行緩存。不過，這里要注意如果在installMode的配置中沒有選擇'lazy'模式，則這里的'lazy'模式也不會生效。

動態(tài)資源配置（dataGroups）

export interface DataGroup {
 name: string;
 urls: string[];
 version?: number;
 cacheConfig: {
  maxSize: number;
  maxAge: string;
  timeout?: string;
  strategy?: 'freshness' | 'performance';
 };
}

這是緩存動態(tài)資源的配置項，其實就是緩存的ajax、fetch的response，將這些api請求的響應(yīng)體進(jìn)行緩存后，就可以在離線狀態(tài)下使用。其中：

urls配置api的url
cacheConfig配置具體的緩存策略：
- maxSize 緩存的最大條目數(shù)或響應(yīng)數(shù)，太多則會暫用系統(tǒng)資源
- maxAge 過期時間，該項與下面提到的strategy策略配合，如果設(shè)置過長，容易呈現(xiàn)老資源給用戶。
- timeout是指的應(yīng)用發(fā)起真實網(wǎng)絡(luò)請求后的等待時間，如果超時將會配合下面提到的strategy進(jìn)行動作
- strategy策略，選擇'performance'會直接攔截網(wǎng)絡(luò)請求，返回緩存（前提是有緩存，并且沒有超過maxAge的時間），選擇'freshness'會在timeout超時的時候返回緩存。

與service worker通訊

與service worker通訊可以讓我們主動做很多事情，而不是僅僅依賴于ngsw-config.json配置，通過依賴注入一個SwUpdate*服務(wù)，我們可以主動要求查詢、更新、激活應(yīng)用的版本，（這部分內(nèi)容筆者還未投入應(yīng)用，詳見官網(wǎng)描述）

總結(jié)

這篇文章我們分享了如何在angular里面使用service worker 進(jìn)行離線場景的增強，其中包括