Some optional strategies and usage scenarios for PWA application Service Worker caching

Time:2022-9-23

The SAP Ecommerce Cloud Spartacus UI provides the ability to run a site as a PWA. This increases user performance and improves the user experience as it adds another layer of caching and reduces the load on the Server Side Rendering (SSR) service.

The way a PWA works is that, for a defined list of application files, it generates a file hash based on the content of the file. This hash is used in the client browser to decide if the file has changed. In the case of a redeploy, for example, these files should be reloaded.

  • Network only: Content must always be up-to-date, suitable for e-commerce payment and checkout, balance reports and other scenarios.
  • Network falling back to cache: Prioritize the latest content. However, if the network is down or unstable, slightly older content is available. Applicable scenarios include timely data, prices and rates (disclaimer required), order status, etc.
  • Stale-while-revalidate: Cached content can be served immediately, but updated cached content should be used later. Applicable scenarios include news feeds, product list pages, messages, etc.
  • Cache first, fall back to network: Content is non-critical and can be served from cache to improve performance, but Service Workers should occasionally check for updates. Applies to App shells and Common resources.
  • Cache only: For static resources whose content rarely changes.

The following is the content of the SAP e-commerce cloud Spartacus UI ngsw-config.json file:

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

The ngsw-config.json configuration file specifies which file and data URLs the Angular Service Worker should cache, and how it should update cached files and data. Angular CLI reads this configuration file during ng build.

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

The configuration file is in JSON format. All file paths must start with /, which corresponds to the deployment directory – usually in a CLI projectdist/<project-name>

The meaning of the special symbols (wildcards) allowed in the file:

  • **: matches 0 or more path segments
  • *: matches 0 or more characters, excluding /
  • ?: matches only one character, excluding /
  • !:prefix marks the pattern as negated, which means only files that do not match the pattern are included

Some examples:

  • /**/*.html: matches all HTML files
  • /*.html: matches HTML files in the root directory
  • !/**/*.map: exclude all sourcemaps