Despite the number of subjects about this, I still cannot find a way to achieve what I want.

I have an Angular PWA application with a Service Worker, and I simply want the index.html not to be cached at all. So that everytime the user refreshes the page (not hard refresh) the app's main document is always fetched from the server.

I don't want to check updates and force refresh after (impacts user experience) or display a prompt to tell the user to refresh.

Here is my ngsw.config.js:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "navigationRequestStrategy": "freshness",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/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)"
        ]
      }
    }
  ]
}

Note that I removed the index.html from the assetGroups and add the "navigationRequestStrategy": "freshness"

But when I refresh the page, the document is still served from the service worker: network tab screen

I also tried to send the Cache-Control: no-cache header from my nginx server but it didn't change anything.

The only thing that actually worked was to load so I guess there is a way to make it work, but that doesn't seem a user-friendly solution to me.