SAP 電商云 Spartacus UI 提供了將站點作為 PWA 運行的功能。 這提高了用戶性能，改善了用戶體驗，因為它添加了另一個緩存層，并減少了服務器端渲染 (SSR) 服務的負載。

PWA 的工作方式是，對于定義的應用程序文件列表，它會根據(jù)文件的內容生成文件哈希。 此哈希用于在客戶端瀏覽器中決定文件是否已更改。比如重新部署的情況下，這些文件應該重新加載。

• Network only：內容必須始終是最新的，適用于電商的付款和結帳，余額報表等場景。
• Network falling back to cache：優(yōu)先提供最新的內容。 但是，如果網絡出現(xiàn)故障或不穩(wěn)定，則可以提供稍舊的內容。適用場景有及時的數(shù)據(jù)，價格和費率（需要免責聲明），訂單狀態(tài)等。
• Stale-while-revalidate：可以立即提供緩存內容，但以后應該使用更新的緩存內容。適用場景有新聞提要，產品列表頁面，留言等。
• Cache first, fall back to network：內容是非關鍵的，可以從緩存中提供以提高性能，但 Service Worker 應偶爾檢查更新。適用于 App shells 和 Common resources.
• Cache only: 適用于內容極少發(fā)生變化的靜態(tài)資源。

下面是 SAP 電商云 Spartacus UI ngsw-config.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 應該緩存哪些文件和數(shù)據(jù) URL，以及它應該如何更新緩存的文件和數(shù)據(jù)。Angular CLI 在 ng build 期間會讀取這個配置文件。

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

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

文件里允許出現(xiàn)的特殊符號(通配符)的含義：

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

一些例子：

• /**/*.html: 匹配所有 HTML 文件
• /*.html：匹配根目錄下的 HTML 文件
• !/**/*.map: 排除所有的 sourcemaps

總結

以上是生活随笔為你收集整理的PWA 应用 Service Worker 缓存的一些可选策略和使用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。