title: After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode
body: <p>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.</p>
  <pre><code>ngsw-config.json
  {
    &quot;$schema&quot;: &quot;./node_modules/@angular/service-worker/config/schema.json&quot;,
    &quot;index&quot;: &quot;/index.html&quot;,
    &quot;assetGroups&quot;: [
      {
        &quot;name&quot;: &quot;app&quot;,
        &quot;installMode&quot;: &quot;prefetch&quot;,
        &quot;resources&quot;: {
          &quot;files&quot;: [
            &quot;/favicon.ico&quot;,
            &quot;/index.html&quot;,
            &quot;/manifest.webmanifest&quot;,
            &quot;/*.css&quot;,
            &quot;/*.js&quot;
          ],
          &quot;urls&quot;: [
            &quot;https://fonts.googleapis.com/css?family=Roboto:400,700&quot;,
            &quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap&quot;,
            &quot;https://fonts.gstatic.com/s/&quot;,
            &quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot;,
            &quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css&quot;          
          ]
        }
      },
      {
        &quot;name&quot;: &quot;assets&quot;,
        &quot;installMode&quot;: &quot;lazy&quot;,
        &quot;updateMode&quot;: &quot;prefetch&quot;,
        &quot;resources&quot;: {
          &quot;files&quot;: [
            &quot;/assets/**&quot;,
            &quot;/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)&quot;
          ]
        }
      }
    ],
    &quot;dataGroups&quot;: [
      {
        &quot;name&quot;: &quot;api-performance&quot;,
        &quot;urls&quot;: [
          &quot;https://api***************.com/fuzzy&quot;,
          &quot;https://api*********************.com/kdks&quot;
        ],
        &quot;cacheConfig&quot;: {
          &quot;strategy&quot;: &quot;performance&quot;,
          &quot;maxSize&quot;: 100,
          &quot;maxAge&quot;: &quot;3d&quot;
        }
      },
      {
        &quot;name&quot;: &quot;api-freshness&quot;,
        &quot;urls&quot;: [
          &quot;https://pwa***********************.com/TS_LIST&quot;,
          &quot;https://ap***********************.com/ores/&quot;,
          &quot;https://as*************************.com/ands/&quot;
        ],
        &quot;cacheConfig&quot;: {
          &quot;strategy&quot;: &quot;freshness&quot;,
          &quot;maxSize&quot;: 200,
          &quot;maxAge&quot;: &quot;1h&quot;,
          &quot;timeout&quot;: &quot;10s&quot;
        }
      }
    ]
  }
  </code></pre>
  <p>for deployment build i run following commands:</p>
  <pre><code>ng build --prod
  </code></pre>
  <p>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 &quot;$schema&quot; tag from ngsw-config.json file which i have tried still the issue persists.
  Kindly Help. Thanks in Advance.</p>