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"      }    }  ]}

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