No matching service worker detected when using GenerateSW from webpack-workbox-plugin

Question

I include

    new GenerateSW({
        maximumFileSizeToCacheInBytes: 6000000
    }),

in the plugins of my webpack config but receive this warning when running lighthouse on my website.

Web app manifest or service worker do not meet the installability requirements 1 reason

Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement

Failure reason -- No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

Does not register a service worker that controls page and start_url The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications.

I can see that the service worker is running in my console, because it prints

LOG from GenerateSW
<i> The service worker at service-worker.js will precache
<i>         108 URLs, totaling 10.4 MB.

---

All solutions I can find on this talk about editing the sw.js file or something. I thought the point of the GenerateSW function was that I didn't have to worry about creating a sw.js or anything

---

I am also using WebpackPWAManifest

    new WebpackPwaManifest({
      icons: [
        {
          src: Icon192,
          sizes: "192x192",
          type: "image/png",
          purpose: "any maskable",
        },
        {
          src: Icon512,
          sizes: "512x512",
          type: "image/png",
        },
      ],
      name: "Example",
      short_name: "Example",
      orientation: "portrait",
      start_url: "/",
      scope: "/",
      theme_color: "#ffffff",
      background_color: "#ffffff",
      description: "Example",
      display: "standalone", 
      prefer_related_applications: false, 
    }),

---

UPDATE: I am able to fix this issue by adding this to my App.jsx

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('/service-worker.js');
    });
}

but if I do this, then updates to my website in development mode aren't registered, for ex, I'll change some text from "TODO " to "TODO: " and refresh the page, but the page will still display "TODO "

Roguery

Can you include your webpack config? And perhaps where you are instantiating the worker in code? – Feaze

@Feaze I've been talking to workbox on github , you can see a bit of what I've been going through there – Roguery

I can get the service worker detected now, but then hot reload no longer works – Roguery

Hot reload has nothing to do with service worker, Can you share the site url if possible? – Maidenly

@VimalPatel I cannot, but if I add the service worker to my app.js, like how I describe in github.com/GoogleChrome/workbox/issues/…, then hot reload does not work anymore. Actually the site just doesn't update. If I click refresh, the changes I've made in my code won't be there – Roguery

that maybe because your changes are cached. Whenever you made changes in javascript code you might need to update your cache key in service worker so that I know to get the latest code from server instead of serving cached version. – Maidenly

@VimalPatel Is there a way to do this automatically? Or do people just not run service workers in dev mode? – Roguery

People do use in dev environment. Need to check how to do that in workbox. for now you can unregister and refresh the page to validate if this is the issue. – Maidenly

@VimalPatel I cant force everyone on my team to unregister it every time, and that's also super unproductive for every little change, so I'm going to just have to only run it in production mode – Roguery

You might check out this answer for service workers in dev - https://mcmap.net/q/420941/-disable-service-worker-in-development-mode – Feaze