我正在处理一个Angular 5项目,希望通过@angular/service-worker包提供PWA功能。但是我无法缓存和提供Google Maps API请求(例如瓷砖)的响应。当在线时,这些响应没有被缓存,因此在离线时也不能服务。我尝试过以下方法:1.将Maps URL添加到dataGroups中,没有错误,但是也没有缓存。在离线时,会出现以下错误:“ERROR Error: Uncaught (in promise): Event: {“isTrusted”:true} (in the main.bundle.js)”2.将Maps URL添加到assetGroups installMode中,prefetch方式,但当尝试预取时会出现跨域错误:“No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access. If an opaque response serves your needs, set the request's mode
to 'no-cors' to fetch the resource with CORS disabled.”3.将Maps URL添加到assetGroups installMode中,lazy方式,但结果与installMode: prefetch相同。
其余的数据缓存和服务都很好(静态资源来自本地主机,JSON来自不同端口的本地API端点)。
我的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"
}
}]
}
如果需要更多信息,我们很乐意提供。