部署后，Angular PWA 服务工作者不会在离线模式下从缓存中获取 api 响应 [英] After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode
问题描述
使用 localhost Angular PWA 服务工作者在所有情况下都可以正常工作，但是在部署后(在带有 GIT 管道的 Azure 服务器上)，在线模式下一切正常:1. 服务工作者已注册.2. API 响应被缓存.现在，当我离线时，服务人员仍然尝试从网络获取 api 响应(并在其离线模式下给出 504 错误)而不是从缓存中获取这些响应.我可以在缓存中看到数据，但问题是 ServiceWorker 仍然尝试仅从网络获取它，即使在离线模式下也是如此.
With localhost Angular PWA service worker works fine in all scenarios, BUT After deployment (on Azure server with GIT pipeline), In Online mode all works fine: 1. Service Worker is registered. 2. API responses are cached. Now when i go offline, the service worker still tries to fetch the api response from Network( and give 504 error since its offline mode) INSTEAD of taking those responses from CACHE. I can see the data there in cache, But the problem is that ServiceWorker still tries to fetch it from network only, even in offline mode.
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"
}
}
]
}
对于部署构建，我运行以下命令:
for deployment build i run following commands:
ng build --prod
然后将 dist 文件夹中生成的构建文件推送到部署分支中的 GIT 存储库，从那里通过 git 管道自动部署到 Azure 服务器.一些 GIT 答案建议删除$schema"；我尝试过的 ngsw-config.json 文件中的标签仍然存在问题.请帮助.提前致谢.
and then the build files generated in dist folder are pushed to GIT repo in deploy branch, from there with git pipeline it is automatically deployed to the Azure server. Some GIT answers suggest to remove the "$schema" tag from ngsw-config.json file which i have tried still the issue persists. Kindly Help. Thanks in Advance.
推荐答案
我遇到的问题是，在 Azure 上部署后，Angular PWA service worker 在离线模式下没有从缓存中获取 api 响应，并且创建的清单也是在已部署的版本中显示错误，而在 localhost 中一切正常.对我来说主要问题是:默认情况下，IIS 不提供在其 (IIS) 核心设置中没有与之关联的 MIME 映射的任何文件.为了应对这一挑战，您需要将 .webmanifest 文件扩展名映射到其适当的 MIME 类型.为此，您需要在 web.config 文件中添加以下内容:
Issue that i faced was, After deployment on Azure, Angular PWA service worker does not fetch the api response from cache in Offline mode, and also the manifest created was showing error in deployed version, whereas in localhost it was all working perfect. the main issue for me was: By default, IIS does not serve any files that does not have a MIME map associated with it in its (IIS) core settings. To address this challenge, you will need to map the .webmanifest file extension to its appropriate MIME type. For this you need to add following to web.config file:
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
这有助于 azure 理解我们的 manifest.webmanifest 文件，否则它将无法理解.在此之后，它能够检测到 manifest.webmanifest 文件，该文件解决了我的两个问题，在离线模式下从缓存中获取响应，并且现在使用清单文件，我的 Angular PWA 应用程序可以安装应用程序图标和所有其他功能.许多其他 GIThub 答案都建议更改清单文件中的范围和 start_url 参数，但我保留了默认情况下的内容
this helps azure to understand our manifest.webmanifest file which otherwise it will not be able to. After this it was able to detect manifest.webmanifest file which solved my both issues, Fetching the response from cache in Offline mode, And also with manifest file now my Angular PWA app was installable with app icon and all other features. Many other GIThub answers were suggesting to change scope and start_url parameters in manifest file but i kept it what was there by default
In manifest.webmanifest
"scope": "./",
"start_url": "./",
也仅供参考，我的 web.config 文件的完整代码是
Also just For reference the full code for my web.config file is
<?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>
这篇关于部署后，Angular PWA 服务工作者不会在离线模式下从缓存中获取 api 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
