使用 localhost Angular PWA 服务工作者在所有情况下都可以正常工作,但是在部署后(在带有 GIT 管道的 Azure 服务器上),在线模式下一切正常: 1. 服务工作者已注册。2. API 响应被缓存。现在,当我离线时,服务人员仍然尝试从网络获取 api 响应(并在其离线模式下给出 504 错误)而不是从缓存中获取这些响应。我可以在缓存中看到数据,但问题是 ServiceWorker 仍然尝试仅从网络获取它,即使在离线模式下也是如此。
ngsw-config.json
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
],
"urls": [
"https://fonts.googleapis.com/css?family=Roboto:400,700",
"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap",
"https://fonts.gstatic.com/s/",
"https://fonts.googleapis.com/icon?family=Material+Icons",
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
],
"dataGroups": [
{
"name": "api-performance",
"urls": [
"https://api***************.com/fuzzy",
"https://api*********************.com/kdks"
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "3d"
}
},
{
"name": "api-freshness",
"urls": [
"https://pwa***********************.com/TS_LIST",
"https://ap***********************.com/ores/",
"https://as*************************.com/ands/"
],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 200,
"maxAge": "1h",
"timeout": "10s"
}
}
]
}
对于部署构建,我运行以下命令:
ng build --prod
然后将 dist 文件夹中生成的构建文件推送到部署分支中的 GIT 存储库,从那里通过 git 管道自动部署到 Azure 服务器。一些 GIT 答案建议从我尝试过的 ngsw-config.json 文件中删除“$schema”标签,但问题仍然存在。请帮助。提前致谢。