Angular PWA and NodeJS backend

Question

How can I configure an Angular PWA to ensure it continues making requests to a Node.js backend when the service worker is offline?

This is my 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"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "urls": [
        "/**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1d",
        "timeout": "10s"
      }
    }
  ]

The service worker is working fine for online use but runs into 504 when service worker goes offline

Answer 1

This is not a cause for worry as the Angular service worker is designed to handle the fetching of any file that it failed to fetch during initialization.

IF this is not good enough, consider refactoring your implementation to use a different strategy as you have no control over the state of the client's device once they leave your app. They could choose to close the browser, and doing this will stop the service worker from running on desktops.