[翻譯]入門angular的 Service Workers

前期準(zhǔn)備

如下的基礎(chǔ)知識:

Angular service workers介紹.

從5angular.0.0開始，在任意cli項目中，你可以很容易的開啟Angular service worker。這文檔是介紹怎么去在新的或舊的項目中啟用Angular service worker仪际。會通過一個簡單的例子是展示service worker的行為與基本緩存乏悄。

在新項目中添加service worker

如果你要生成一個新的cli項目，你可以使用cli去配置Angular service worker：

ng new my-project --service-worker

--service-worker命令會去做所有的配置并添加需要依賴的包羔巢。想了解更多，可查看下面的關(guān)于如何在舊項目添加service worker的說明

在舊項目中添加service worker

添加步驟:

添加service worker的包依賴罩阵。
在cli配置中啟用service worker竿秆。
導(dǎo)入和注冊service worker。
新建配置文件稿壁，定義緩存的行為和其它設(shè)定幽钢。
編譯項目。

步驟1：添加service worker的包依賴傅是。使用yarn包管理工具：

yarn add @angular/service-worker

步驟2：在cli配置中啟用service worker：

要開啟Angular service worker匪燕，cli必須在編譯時生成Angular service worker的配置。要在舊項目中通知cli去做這一步喧笔，必須把.angular-cli.json文件里的 serviceWorker的值改成true

ng set apps.0.serviceWorker=true

步驟3：導(dǎo)入和注冊service worker:

在src/app/app.module.ts中：

import  {  [ServiceWorkerModule](https://angular.io/api/service-worker/ServiceWorkerModule)  }  from  '@angular/service-worker';  
import  { environment }  from  '../environments/environment';

@NgModule({ 
declarations:  [  AppComponent  ], 
imports:  [  
   BrowserModule,  
   ServiceWorkerModule.register('/ngsw-worker.js',  {enabled: environment.production})  
   ], 
   providers:  [ ],
   bootstrap:  [AppComponent]
 })  
export  class  AppModule  {  }

ngsw-worker.js文件是cli編譯生成的service worker腳本帽驯，最后能在dist/里找到。

步驟4: 新建配置文件, ngsw-config.json

angular cli需要名為ngsw-config.json的service worker配置文件溃斋。這文件定義了如何去緩存文件與數(shù)據(jù)資源界拦。

你可以使用cli產(chǎn)生的通用配置版本

或者，將以下內(nèi)容保存為src/ ngsw-config.json：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

步驟 5: 編譯項目

ng build --prod

產(chǎn)生的項目就是啟用了Angular service worker了.

Service worker 的展示說明

此模塊通過一個示例來展示說明service worker

使用http-server構(gòu)建服務(wù)器

因為ng serve 不會啟動service worker梗劫，你必須使用另一個http服務(wù)器去本地測試你的項目享甸。你可以使用任何的HTTP服務(wù)器。下面例子是使用http-server梳侨，可以通過npm安裝蛉威。為了減少沖突的可能性，將在一個專用的端口測試走哺。
要使用http-server開啟服務(wù)蚯嫌，要移動到打包文件的文件夾內(nèi)然后啟動web服務(wù)：

cd dist
http-server -p 8080

初次加載

服務(wù)啟動中，你可以在瀏覽器訪問http://localhost:8080/丙躏。你的應(yīng)用應(yīng)該是正常運(yùn)行择示。

提示:當(dāng)測試Angular service workers,最好是在瀏覽器中使用無痕或私有窗口，這能保證service worker不會從以前的留下的緩存中讀取數(shù)據(jù)晒旅，造成意外的狀況栅盲。

模擬網(wǎng)絡(luò)問題

要模擬網(wǎng)絡(luò)問題，可禁止應(yīng)用的網(wǎng)絡(luò)連接废恋。在Chrome內(nèi)：

Select Tools > Developer Tools (開發(fā)人員工具).
進(jìn)入Network分頁.
勾選the Offline 項.

Now the app has no access to network interaction.
現(xiàn)在應(yīng)用沒法訪問網(wǎng)絡(luò)了谈秫。

對于那些沒有使用Angular service worker的應(yīng)用扒寄，刷新頁面會顯示 "There is no Internet connection"的頁面。

添加了Angular service worker的應(yīng)用不一樣拟烫。刷新后该编，頁面正常顯示。
如果你查看Network 分頁的信息硕淑，你就能驗證service worker是在工作课竣。

什么被緩存

會發(fā)現(xiàn)所有用來渲染app的文件都被緩存了。給cli使用的通用ngsw-config.json就是定義了緩存這些特定的資源：

index.html.
favicon.ico.
編譯的文件 (JS and CSS bundles).
assets文件夾里的所有文件.

修改你的應(yīng)用

現(xiàn)在你已經(jīng)看到service worker如何緩存你的應(yīng)用喜颁，下一步是理解更新如何工作稠氮。

如果你在一個無痕窗口中測試，打開另一個分頁半开。這會使?fàn)顟B(tài)和緩存不會再測試中消失。
關(guān)閉應(yīng)用的分頁赃份，但不是瀏覽器寂拆。這也會關(guān)閉了開發(fā)者工具。
關(guān)閉http-server的服務(wù)抓韩。
下一步纠永，修改應(yīng)用，查看service worker安裝更新谒拴。
打開src/app/app.component.html并編輯
修改文本 Welcome to {{title}}! 為 Bienvenue à {{title}}!.
再次編譯并啟動服務(wù)

ng build --prod
cd dist
http-server -p 8080

在瀏覽器中更新你的應(yīng)用

現(xiàn)在觀察瀏覽器和service worker是如何處理更新了的應(yīng)用

在同一瀏覽器再次打開http://localhost:8080 尝江。發(fā)生什么？

哪里出錯了英上？實際是沒有的炭序。Angular service worker就在執(zhí)行它的工作，展示它已安裝的應(yīng)用的版本苍日。盡管有一個可用的更新惭聂。為了提高速度，service worker會在完成展示已緩存的應(yīng)用后才去檢查更新相恃。

如果你查看http-server的日志辜纲，你就可以看到service worker請求/ngsw.json。這是service worker在檢查更新拦耐。

刷新頁面.

service worker在后臺安裝了更新的app版本耕腾，下次頁面加載或重加載時，service worker就展示最新的版本杀糯。