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

Question

我无法通过 angular service worker 缓存我的主数据 api 大多数示例显示 dataGroup 中的 url 位于同一域中，因此只有“/catalog”有效但我的 api 托管在另一个域

可用

以下是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"
    }
  }]
}

Answer 1

dataGroups 中的上述代码有效

唯一的事情是在加载应用程序后刷新或打开一个新选项卡供 service worker 缓存

原因如下link

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

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

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

How to cache Api Response via Angular Service Worker when api is on different domain

angular

asp.net-web-api2

angular-service-worker