caching - After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode

Question

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

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.

Answer 1

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>

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": "./",

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>