使用 Angular Service Worker 進行預先快取

使用 Angular Service Worker，可讓你在連線品質不佳的網路中，加快應用程式的速度和穩定性。

Minko Gechev

處理連線能力受限

當使用者的網路存取權受限或完全不使用時，網頁應用程式功能可能會大幅降低，且經常故障。使用服務工作處理程序提供預先快取可讓您攔截網路要求，並直接從本機快取傳送回應，而不需從網路擷取要求。對應用程式的資產快取資料後，這個方法可有效加快應用程式執行速度，在使用者離線時也能運作。

本文將逐步說明如何在 Angular 應用程式中設定預先快取。本文假設您已經熟悉預先快取和 Service Worker。如需複習，請參閱 Service Worker 和 Cache Storage API 文章。

Angular Service Worker 隆重登場

Angular 團隊提供的預先快取功能與架構和 Angular 指令列介面 (CLI) 完美整合。

如要新增 Service Worker，請在 CLI 中執行下列指令：

ng add @angular/pwa

@angular/service-worker 和 @angular/pwa 現已安裝在應用程式中，應會顯示在 package.json 中。ng-add 結構定義也會將名為 ngsw-config.json 的檔案新增至專案，您可以使用該檔案設定 Service Worker。(這個檔案包含預設設定，您會稍後進行自訂。)

現在建立實際工作環境專案：

ng build --prod

在 dist/service-worker-web-dev 目錄中，您可以找到名為 ngsw.json 的檔案。這個檔案會指示 Angular Service Worker 如何快取應用程式中的資產。系統會在建構程序中根據設定 (ngsw-config.json) 和建構時產生的資產產生檔案。

現在，請在含有應用程式生產資產的目錄中啟動 HTTP 伺服器，開啟公開網址，然後在 Chrome 開發人員工具中查看其網路要求：

  1. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  2. 按一下 [網路] 分頁標籤。

請注意，Network 分頁通常會透過 ngsw-worker.js 指令碼在背景直接下載許多靜態資產：

範例應用程式

這是 Angular Service Worker 預先快取產生的 ngsw.json 資訊清單檔案中指定的靜態資產。

但缺少一項重要資產：nyan.png。如要預載這個映像檔，您必須將包含該映像檔的模式新增至 ngsw-config.json，該模式位於工作區的根目錄中：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

這項變更會將 /assets 資料夾中的所有 PNG 圖片加入 app 資源素材資源群組。由於此素材資源群組的 installMode 已設為 prefetch，因此服務工作處理程序會預先快取所有指定素材資源，其中包括 PNG 圖片。

指定其他要預先快取的資產一樣非常簡單：更新 app 資源素材資源群組中的模式。

結論

使用 Service Worker 進行預先快取，可將資產儲存至本機快取，藉此改善應用程式效能，即使網路連線品質不佳，也會更穩定。如何搭配 Angular 和 Angular CLI 使用預先快取：

  1. 在專案中新增 @angular/pwa 套件。
  2. 編輯 ngsw-config.json，藉此控管 Service Worker 快取內容。