部署后，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响应被缓存。现在，当我脱机时，服务人员仍然尝试从Network（从脱机模式开始，并给出504错误）获取API响应，而不是从CACHE获取这些响应。我可以在缓存中看到数据，但是问题是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文件夹中生成的生成文件推送到deploy分支中的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服务工作程序无法获取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屋！
