当 api 位于不同域时，如何通过 Angular Service Worker 缓存 Api 响应答案

【问题标题】：How to cache Api Response via Angular Service Worker when api is on different domain当 api 位于不同域时，如何通过 Angular Service Worker 缓存 Api 响应
【发布时间】：2018-12-20 11:00:54
【问题描述】：

我无法通过 Angular Service Worker 缓存我的主数据 API 大多数示例显示 dataGroup 中的 url 位于同一域上，因此只有“/目录”有效但我的 api 托管在另一个域上

让我们说它可以在http://x.com/api/catalog

以下是 ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ],
      "urls": [
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      ]
    }
  }],
  "dataGroups": [{
    "name": "xyz",
    "urls": ["http://x.com/api/catalog"],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 15,
      "maxAge": "1h",
      "timeout": "5s"
    }
  }]
}

【问题讨论】：

这里是一步一步的教程，带有外部api数据源（random.org）：medium.com/bratislava-angular/…。您可能需要对 CORS 请求进行进一步配置。

标签： angular asp.net-web-api2 angular-service-worker

【解决方案1】：

dataGroups 中的上述代码有效

唯一的事情是在加载应用程序之后刷新或打开一个新选项卡供服务人员缓存

原因在以下链接中给出

https://blog.angular-university.io/service-workers/

在 为什么 Service Worker 没有立即激活？ 部分

【讨论】：

很好奇，您是像链接中那样手动配置服务工作者，还是使用 cli 并使用 ngsw-config.json？