使用 Angular Service Worker,可讓你在連線品質不佳的網路中,加快應用程式的速度和穩定性。
處理連線能力受限
當使用者的網路存取權受限或完全不使用時,網頁應用程式功能可能會大幅降低,且經常故障。使用服務工作處理程序提供預先快取可讓您攔截網路要求,並直接從本機快取傳送回應,而不需從網路擷取要求。對應用程式的資產快取資料後,這個方法可有效加快應用程式執行速度,在使用者離線時也能運作。
本文將逐步說明如何在 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 開發人員工具中查看其網路要求:
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
請注意,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 使用預先快取:
- 在專案中新增
@angular/pwa
套件。 - 編輯
ngsw-config.json
,藉此控管 Service Worker 快取內容。