PWA 应用 Service Worker 缓存的一些可选策略和使用场景

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 文件的内容：

{
  "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"
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

ngsw-config.json 配置文件指定 Angular Service Worker 应该缓存哪些文件和数据 URL，以及它应该如何更新缓存的文件和数据。Angular CLI 在 ng build 期间会读取这个配置文件。

./node_modules/.bin/ngsw-config ./dist/ ./ngsw-config.json [/base/href]

该配置文件使用 JSON 格式。 所有文件路径都必须以 / 开头，它对应于部署目录——通常是 CLI 项目中的 dist/。

文件里允许出现的特殊符号(通配符)的含义：

• **: 匹配 0 个或多个路径段
• *: 匹配 0 个或多个字符，不包括 /
• ?: 只匹配一个字符，不包括 /
• !：prefix 将模式标记为否定，这意味着只包含与模式不匹配的文件

一些例子：

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