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.

Library Affected: webpack-workbox-plugin

Browser & Platform: Google Chrome

I include new GenerateSW(), 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 The service worker at service-worker.js will precache 107 URLs, totaling 5.25 MB

---

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, 
    }),

[jeffposnick]

Hello @samgermain—apologies that all of this isn’t as spelled out as clearly as it should be in the Workbox documentation. We have a project that’s getting underway to overhaul our guides significantly.

https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle provides a good background on how the service worker lifecycle works.

When using a service worker created by GenerateSW, you end up with all of your webpack assets precached, and served using a cache-first strategy. Browsers will continue using the cached assets associated with the service worker that’s in control of the page indefinitely, until and updated service worker moves from the waiting to active state and takes control.

Reloading an open page isn’t sufficient to activate a waiting service worker; you have to close all open tabs before that happens, or alternatively, call skipWaiting() from within the updated service worker. This can often cause confusion as developers testing things out believe that they are permanently stuck on an old version of their precached assets.

I’d recommend a few things:

First, don’t register a precaching service worker in development, as aggressively caching resources very much goes against the “hot reload” philosophy.

Second, if you want to see some approaches to programmatically triggering the skipWaiting() call, the “Offer a page reload for users” recipe is one approach.

Third, a lot of these best practices have been baked in to the PWA template for the create-react-app framework already, with the code at https://github.com/cra-template/pwa/tree/master/packages/cra-template-pwa/template/src You can draw inspiration from how it avoids registering a service worker on localhost, as well as offers callbacks for triggering skipWaiting() programmatically.

I hope that helps! If you’re still stuck, you could consider a less aggressive caching strategy than what GenerateSW implements by default. You can follow the guide at https://developers.google.com/web/tools/workbox/guides/get-started to write a service worker that just uses a network-first strategy if that’s more appropriate for your use case.

[jeffposnick]

https://developers.google.com/web/fundamentals/primers/service-workers/registration has some general guidance about when to call navigator.serviceWorker.register('/service-worker.js');. That would be translatable into code that would go in App.js in all likelihood.

If you’re seeing a request for /static/service_worker.js then it means that something, like an older version of your site, must still be referencing your service worker from that URL (instead of from /service_worker.js). And if you’re seeing Cannot GET /service_worker.js logged on a specific domain, that would imply that you haven’t successfully deployed the service worker to that web server at that URL.