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

Question

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

我无法缓存和服务Google Maps API请求（例如，图块）。联机时不会缓存响应，因此脱机时也不会提供响应。

我试过的

• 将Maps URL添加到dataGroups：脱机时没有错误，但是也没有缓存，出现以下错误：

  错误错误：未捕获（承诺）：事件：{“ isTrusted”：true}（在main.bundle.js中）

• 将Maps URL添加到assetGroups installMode：prefetch，尝试进行预取时出现跨域错误：

  所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问源' http：// localhost：8080 '。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

• 将Maps URL添加到assetGroups installMode：lazy，得到的结果与installMode：prefetch相同

其余数据缓存并运行良好（从localhost的localhost和localhost的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

我也正在与带有谷歌地图的服务人员一起工作，如果我将其插入"https://maps.googleapis.com/maps/**"以下位置，则可以使用assetGroups -> urls：

"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/**"
]