SAP 電商雲 Spartacus UI 提供了將站點作為 PWA 執行的功能。 這提高了使用者效能，改善了使用者體驗，因為它新增了另一個快取層，並減少了伺服器端渲染 (SSR) 服務的負載。

PWA 的工作方式是，對於定義的應用程式檔案列表，它會根據檔案的內容生成檔案雜湊。 此雜湊用於在客戶端瀏覽器中決定檔案是否已更改。比如重新部署的情況下，這些檔案應該重新載入。

- Network only：內容必須始終是最新的，適用於電商的付款和結帳，餘額報表等場景。
- Network falling back to cache：優先提供最新的內容。 但是，如果網路出現故障或不穩定，則可以提供稍舊的內容。適用場景有及時的資料，價格和費率（需要免責宣告），訂單狀態等。
- Stale-while-revalidate：可以立即提供快取內容，但以後應該使用更新的快取內容。適用場景有新聞提要，產品列表頁面，留言等。
- Cache first, fall back to network：內容是非關鍵的，可以從快取中提供以提高效能，但 Service Worker 應偶爾檢查更新。適用於 App shells 和 Common resources.
- Cache only: 適用於內容極少發生變化的靜態資源。

下面是 SAP 電商雲 Spartacus UI 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"
      }
    }
  ]
}
```

ngsw-config.json 配置檔案指定 Angular Service Worker 應該快取哪些檔案和資料 URL，以及它應該如何更新快取的檔案和資料。Angular CLI 在 ng build 期間會讀取這個配置檔案。

`./node_modules/.bin/ngsw-config ./dist/<project-name> ./ngsw-config.json [/base/href]`

該配置檔案使用 JSON 格式。 所有檔案路徑都必須以 / 開頭，它對應於部署目錄——通常是 CLI 專案中的 `dist/<project-name>`。

檔案裡允許出現的特殊符號(萬用字元)的含義：

- `**`: 匹配 0 個或多個路徑段
- `*`: 匹配 0 個或多個字元，不包括 /
- `?`: 只匹配一個字元，不包括 /
- `!`：prefix 將模式標記為否定，這意味著只包含與模式不匹配的檔案

一些例子：

- `/**/*.html`: 匹配所有 HTML 檔案
- `/*.html`：匹配根目錄下的 HTML 檔案
- `!/**/*.map`: 排除所有的 sourcemaps</project-name></project-name>

PWA 應用 Service Worker 快取的一些可選策略和使用場景

相關文章