关于javascript:PWA-应用-Service-Worker-缓存的一些可选策略和使用场景

26次阅读

共计 1564 个字符，预计需要花费 4 分钟才能阅读完成。

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>。

文件里容许呈现的特殊符号 (通配符) 的含意：