利用 Angular 服務工作站，即使網路連線速度不佳，您的應用程式也能更快速可靠。
處理連線受限的問題
當使用者的網路存取權受限 (或是根本沒有存取) 時，網頁應用程式的功能可能會大幅降低，且經常無法使用。使用 Service Worker 提供預先快取功能，即可攔截網路要求，並直接從本機快取傳送回應，不必從網路擷取要求。快取應用程式的資產後，這種方法可確實加快應用程式執行速度，並在使用者離線時運作。
本文會逐步說明如何在 Angular 應用程式中設定預先快取。本文假設您已熟悉預先快取和服務工作站。如果需要複習，請參閱 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 schematic 也會將名為 ngsw-config.json 的檔案新增至專案，您可以透過該檔案設定 Service Worker。(這個檔案包含預設設定，您稍後會加以自訂)。
現在建構用於正式環境的專案：
ng build --prod
在 dist/service-worker-web-dev 目錄中，可以找到名為 ngsw.json 的檔案。這個檔案會告知 Angular 服務工作人員如何快取應用程式中的資產。系統會在建構程序期間根據設定 (ngsw-config.json) 和建構期間產生的資產產生檔案。
現在，在包含應用程式正式版資產的目錄中啟動 HTTP 伺服器，開啟公開網址，然後在 Chrome 開發人員工具中查看網路要求：
- 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
請注意，「Network」分頁由 ngsw-worker.js 指令碼直接在背景下載多個靜態資產：
這是 Angular Service Worker，用來預先快取產生的 ngsw.json 資訊清單檔案中指定的靜態資產。
但缺少 1 個重要素材資源：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 使用預先快取：
- 在專案中新增
@angular/pwa套件。 - 編輯
ngsw-config.json，控管 Service Worker 快取的內容。