5

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 "

Sam
  • 1,765
  • 11
  • 82
  • 176
  • Can you include your webpack config? And perhaps where you are instantiating the worker in code? – nrako Jun 14 '21 at 19:19
  • @nrako I've been talking to [workbox on github](https://github.com/GoogleChrome/workbox/issues/2861#issuecomment-859943920) , you can see a bit of what I've been going through there – Sam Jun 15 '21 at 03:30
  • I can get the service worker detected now, but then hot reload no longer works – Sam Jun 15 '21 at 04:14
  • Hot reload has nothing to do with service worker, Can you share the site url if possible? – Vimal Patel Jun 15 '21 at 04:39
  • @VimalPatel I cannot, but if I add the service worker to my app.js, like how I describe in https://github.com/GoogleChrome/workbox/issues/2861#issuecomment-859943920, 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 – Sam Jun 15 '21 at 04:48
  • 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. – Vimal Patel Jun 15 '21 at 04:55
  • @VimalPatel Is there a way to do this automatically? Or do people just not run service workers in dev mode? – Sam Jun 15 '21 at 06:19
  • 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. – Vimal Patel Jun 15 '21 at 06:43
  • @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 – Sam Jun 15 '21 at 06:56
  • You might check out this answer for service workers in dev - https://stackoverflow.com/a/40861897/3100284 – nrako Jun 15 '21 at 17:23

0 Answers0