Caching 部署后，服务工作者不会在脱机模式下从缓存获取api响应

使用localhost，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文件夹中生成的构建文件被推送到deploy分支中的GIT repo，然后通过GIT管道将其自动部署到Azure服务器。一些GIT的答案建议从ngsw-config.json文件中删除“$schema”标记，我已经尝试过了，但问题仍然存在。

---

请帮忙。提前感谢。

我面临的问题是，在Azure上部署后，服务工作者无法在脱机模式下从缓存中获取api响应，而且创建的清单在部署的版本中显示错误，而在localhost中，这一切工作正常。 我的主要问题是：默认情况下，IIS不提供任何在其（IIS）核心设置中没有与之关联的MIME映射的文件。 要解决此问题，您需要将.webmanifest文件扩展名映射到相应的MIME类型。 为此，您需要将以下内容添加到web.config文件：

        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
        </staticContent>

另外，我的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>

您是否尝试在firebase上部署并且遇到类似问题？@abrsh否，我还没有尝试在firebase上部署它。这实际上是有意义的。已确认，此web.config确实可以使用Azure应用程序服务将Angular PWA部署到Azure。我将web.config放在根应用程序目录中，并确保它作为prod部署的资产添加到angular.json中。

<?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>