使用本地主机 Angular PWA 服务 worker 在所有情况下都可以正常工作，但是在部署之后(在带有 GIT 管道的 Azure 服务器上)，在线模式下一切正常:1. 服务 worker 已注册。 2. API响应被缓存。现在，当我离线时，服务 worker 仍然试图从网络中获取 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”标签，但问题仍然存在。 请帮助。提前致谢。
最佳答案
我遇到的问题是，在 Azure 上部署后，Angular PWA 服务工作人员不会在离线模式下从缓存中获取 api 响应，而且创建的 list 在部署版本中显示错误，而在本地主机中一切正常. 对我来说主要问题是:默认情况下，IIS 不提供任何在其 (IIS) 核心设置中没有与之关联的 MIME 映射的文件。 要应对这一挑战，您需要将 .webmanifest 文件扩展名映射到其适当的 MIME 类型。 为此，您需要将以下内容添加到 web.config 文件中:
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
这有助于 azure 理解我们的 manifest.webmanifest 文件，否则它将无法理解。在此之后，它能够检测到解决我的两个问题的 manifest.webmanifest 文件，在离线模式下从缓存中获取响应，并且现在我的 Angular PWA 应用程序可以使用应用程序图标和所有其他功能安装 list 文件。许多其他 GIThub 答案建议更改 list 文件中的范围和 start_url 参数，但我保留了默认情况下的内容
In manifest.webmanifest
"scope": "./",
"start_url": "./",
另外仅供引用，我的 web.config 文件的完整代码是
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name="Redirect to https" stopProcessing="true">
<match url="(.*)" />
<conditions>
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
</rule>
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
</system.webServer>
</configuration>
关于caching - 部署后，Angular PWA 服务 worker 不会在离线模式下从缓存中获取 api 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63182577/