angular - 使用@angular/service-worker 缓存 Google Maps API

Question

我正在从事 Angular 5 项目，并希望通过 @angular/service-worker 包提供 PWA 功能。

我无法缓存和提供 Google Maps API 请求(例如图 block )。 在线时不会缓存响应，因此在离线时也不会提供响应。

我尝试过的:

• 将 map URL 添加到数据组:没有错误，但也没有缓存，离线时出现以下错误:

  错误错误:未捕获( promise ):事件:{"isTrusted":true}(在 main.bundle.js 中)

• 将 map URL 添加到 assetGroups installMode: prefetch，我在尝试预取时遇到跨域错误:

  请求中不存在“Access-Control-Allow-Origin” header 资源。产地' http://localhost:8080 ' 因此不允许 使用权。如果不透明响应满足您的需求，请设置请求的模式 设置为“no-cors”以获取禁用 CORS 的资源。

• 将 map URL 添加到 assetGroups installMode: lazy，我得到的结果与 installMode: prefetch 相同

其余数据缓存和服务良好(来自本地主机的静态数据和来自不同端口上本地主机 API 端点的 json)。

我的 ngsw-config.json 看起来像这样:非常感谢任何指点。

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.png",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ],
      "urls": [
          "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700",
          "https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2",
          "https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }],
    "dataGroups": [{
        "name": "from-api",
        "urls": [
            "/api/restaurants",
            "/img/**",
            "/icons/**",
            "https://maps.googleapis.com/maps/**"
        ],
        "cacheConfig": {
            "maxSize": 100,
            "maxAge": "1d",
            "timeout?": "3s"
        }
    }]
}

如果需要，很乐意提供更多信息。

Answer 1

我也在与 service worker 一起使用谷歌地图，如果我将它插入 "https://maps.googleapis.com/maps/**" at assetGroups -> 网址:

"urls": [
  "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700",
  "https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2",
  "https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
  "https://maps.googleapis.com/maps/**"
]