使用 Angular Service Worker 進行預先快取

使用 Angular Service Worker，讓應用程式在連線不佳的網路上更快速、更穩定。

Minko Gechev

處理連線能力受限的問題

如果使用者網路存取權有限或完全沒有網路存取權，網頁應用程式功能可能會大幅降級，甚至經常失敗。使用服務工作站提供預先快取功能，可讓您攔截網路要求，並直接從本機快取提供回應，而非從網路擷取回應。一旦應用程式的素材資源已快取，這個方法就能大幅加快應用程式速度，並在使用者離線時讓應用程式運作。

本篇文章將逐步說明如何在 Angular 應用程式中設定預先快取功能。假設您已熟悉預先快取和服務工作者。如需相關重點說明，請參閱「Service worker 和 Cache Storage API」一文。

介紹 Angular 服務 worker

Angular 團隊提供的 Service Worker 模組具有預先快取功能，可與架構和 Angular 指令列介面 (CLI) 完美整合。

如要新增服務工作者，請在 CLI 中執行下列指令：

ng add @angular/pwa

@angular/service-worker 和 @angular/pwa 現在應該已安裝在應用程式中，並顯示在 package.json 中。ng-add 示意圖也會在專案中新增名為 ngsw-config.json 的檔案，您可以用來設定服務工作站。(這個檔案包含預設設定，您稍後會稍微自訂這個設定)。

接著，建構正式環境專案：

ng build --prod

在 dist/service-worker-web-dev 目錄中，您可以找到名為 ngsw.json 的檔案。這個檔案會告知 Angular 服務 worker 如何在應用程式中快取資產。這個檔案會在建構過程中，根據設定 (ngsw-config.json) 和建構期間產生的資產產生。

接下來，請在包含應用程式正式版素材資源的資料夾中啟動 HTTP 伺服器，開啟公開網址，然後在 Chrome 開發人員工具中查看網路要求：

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

請注意，網路分頁中有多個靜態素材資源，這些素材資源會在背景中直接透過 ngsw-worker.js 指令碼下載：

範例應用程式

這是 Angular 服務 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 快取內容。