從 5.0.0 版本開始，Angular 附帶了一個 Service Worker 實現。 Angular 開發人員可以利用這個 service worker 並從其提供的更高的可靠性和效能中受益，而無需針對低階 API 編寫程式碼。

這個實現就是 SAP 電商雲 Spartacus UI package.json 中提到的依賴 `@angular/pwa`：

![](https://img-blog.csdnimg.cn/img_convert/50f29cc3a8cfd307d05b60d467025a82.png)

Angular 的 Service Worker 旨在最佳化終端使用者在緩慢或不可靠的網路連線上使用應用程式的體驗，同時最大限度地降低提供過時內容的風險。

為此，Angular Service Worker 遵循以下準則：

- 快取應用程式就像安裝本機應用程式。 應用程式被快取為一個單元，所有檔案一起更新。

- 正在執行的應用程式繼續使用所有檔案的相同版本執行。 它不會突然開始從可能不相容的較新版本接收快取檔案。

- 當使用者重新整理應用程式時，他們會看到最新的完全快取版本。 新選項卡載入最新的快取程式碼。

- 更新發生在後臺，在釋出更改後相對較快。 在安裝並準備好更新之前，會提供應用程式的先前版本。

- Service Worker 會盡可能節省頻寬。 僅當資源發生更改時才會下載資源。

為了支援這些行為，Angular Service Worker 從伺服器載入一個清單檔案。 該檔名為 ngsw.json，描述要快取的資源幷包含每個檔案內容的雜湊值。 當部署應用程式更新時，清單的內容會發生變化，通知 Service Worker 應該下載並快取應用程式的新版本。 此清單是從名為 ngsw-config.json 的 CLI 生成的配置檔案生成的。

Spartacus 的 ngsw-config.json 檔案的內容如下：

```json
{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js",
          "/manifest.webmanifest"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "basesites",
      "urls": [
        "*/basesites?fields=baseSites\\(uid,defaultLanguage\\(isocode\\),urlEncodingAttributes,urlPatterns,stores\\(currencies\\(isocode\\),defaultCurrency\\(isocode\\),languages\\(isocode\\),defaultLanguage\\(isocode\\)\\),theme,defaultPreviewCatalogId,defaultPreviewCategoryCode,defaultPreviewProductCode\\)*"
      ],
      "cacheConfig": {
        "maxSize": 1,
        "maxAge": "1d",
        "strategy": "performance"
      }
    }
  ]
}

```
安裝 Angular Service Worker 就像包含一個 NgModule 一樣簡單。 除了向瀏覽器註冊 Angular Service Worker 之外，這還使得一些服務可用於注入，這些服務與 Service Worker 互動並可以用來控制它。 例如，應用程式可以要求在有新更新可用時得到通知，或者應用程式可以要求 Service Worker 檢查伺服器是否有可用更新。

Angular 裡的 Service Worker

相關文章