title: Angular service worker with @angular/pwa package showing `HTTP error 504` when offline
body: <p>I am working on an angular PWA application. So I added an npm package by <code>ng add @angular/pwa</code>. It is added successfully with no errors. </p>
  
  <p>The generated Manifest is working fine. But I am facing issues with the service worker. When the application goes online it stores all the caches (see attachment) but whenever the application goes offline, instead of serving the request from the service worker it shows the error - <strong>HTTP ERROR 504</strong></p>
  
  <p>Here is my <strong>ngsw-config.json</strong> - </p>
  
  <pre><code>   {
      "index": "/index.html",
      "assetGroups": [
        {
          "name": "app",
          "installMode": "prefetch",
          "resources": {
            "files": ["assets/images/favicon.ico", "/index.html", "/*.css", "/*.js"]
          }
        },
        {
          "name": "assets",
          "installMode": "lazy",
          "updateMode": "prefetch",
          "resources": {
            "files": [
              "/assets/**",
              "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
          }
        }
      ]
    }
  </code></pre>
  
  <p>Any help would be appreciable...</p>
  
  <p><a href="https://i.stack.imgur.com/bnthg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bnthg.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/HlLkr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HlLkr.png" alt="enter image description here"></a></p>