簡(jiǎn)介

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

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

啟用

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

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

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

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

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

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

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

配置

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

參考官方的說(shuō)明，我們了解到可以配置靜態(tài)資源的緩存策略（配置項(xiàng)中的assetGroups）以及動(dòng)態(tài)資源的緩存策略（配置項(xiàng)中的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[]; };}

這是該配置項(xiàng)的接口，下面對(duì)各個(gè)屬性做一個(gè)簡(jiǎn)要的說(shuō)明：

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