部署后，Angular PWA Service Worker 在离线模式下不会从缓存中获取 api 响应 [英] After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode

问题描述

使用 localhost Angular PWA service worker 在所有情况下都可以正常工作，但是部署后(在带有 GIT 管道的 Azure 服务器上)，在在线模式下一切正常: 1. Service Worker 已注册.2. API 响应被缓存.现在，当我离线时，Service Worker 仍然尝试从 Network 获取 api 响应(并在其离线模式下给出 504 错误)，而不是从 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 文件夹中生成的构建文件推送到部署分支中的 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 Service Worker 在离线模式下不会从缓存中获取 api 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！