使用 Angular Service Worker，讓應用程式在連線不佳的網路上更快速、更穩定。
處理連線能力受限的問題
當使用者的網路存取權受限 (或是根本沒有存取) 時，網頁應用程式的功能可能會大幅降低，且經常無法使用。使用服務工作站提供預先快取功能，可讓您攔截網路要求，並直接從本機快取提供回應，而非從網路擷取。一旦應用程式的素材資源已快取，這個方法就能大幅加快應用程式速度，並在使用者離線時讓應用程式運作。
本篇文章將逐步說明如何在 Angular 應用程式中設定預先快取功能。假設您已熟悉預先快取和服務工作者。如需相關重點說明，請參閱「Service worker 和 Cache Storage API」一文。
介紹 Angular 服務 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 服務 worker 如何在應用程式中快取資產。這個檔案會在建構過程中，根據設定 (ngsw-config.json) 和建構期間產生的資產產生。
現在，在包含應用程式正式版資產的目錄中啟動 HTTP 伺服器，開啟公開網址，然後在 Chrome 開發人員工具中查看網路要求：
- 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
請注意，網路分頁中有多個靜態素材資源，這些素材資源會在背景中直接透過 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 使用預先快取功能，請按照下列步驟操作：
- 將
@angular/pwa套件新增至專案。 - 編輯
ngsw-config.json，控管 Service Worker 快取的內容。