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

SAP 电商云 Spartacus UI Provides the site as a PWA 运行的功能. This improves user performance,改善了用户体验,Because it adds another caching layer,And to reduce the server side rendering (SSR) 服务的负载.

PWA 的工作方式是,To define the application file list,It will be according to the content of the generated file hash. The hash for the browser on the client to determine whether the file has changed.Such as relocation cases,These files should be reloaded.

• Network only：Contents must always be the latest,Suitable for electricity payment and checkout,Balance statements such as scene.
• Network falling back to cache：The content of the priority to provide the latest. 但是,If a network failure or unstable,The contents of the can provide a little old.Applicable scenario has timely data,价格和费率（Need a disclaimer）,订单状态等.
• Stale-while-revalidate：Can immediately provide caching content,But later should use update cache content.Applicable scenario has news feed,产品列表页面,留言等.
• Cache first, fall back to network：Content is the key,Can provide from the cache to improve performance,但 Service Worker Should be updated occasionally check.适用于 App shells 和 Common resources.
• Cache only: Applicable to the static content rarely change resources.

下面是 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 Which files and data to cache URL,And it should be how to update the cache files and data.Angular CLI 在 ng build During reads the configuration file.

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

该配置文件使用 JSON 格式. All the file path must be to / 开头,It corresponds to the deployment directory——通常是 CLI 项目中的 dist/<project-name>.

Allow the special symbols in the file(通配符)的含义：

• **: 匹配 0 个或多个路径段
• *: 匹配 0 个或多个字符,不包括 /
• ?: 只匹配一个字符,不包括 /
• !：prefix The pattern is marked negative,This means that only contains files and pattern don't match

一些例子：

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