vite-pwa / docs

Documentation: PWA integrations for Vite and the ecosystem
https://vite-pwa-org.netlify.app/
MIT License
197 stars 46 forks source link

selfDestroying doesn't destroy the service worker #30

Open matthew-dean opened 1 year ago

matthew-dean commented 1 year ago

So, we got into a pickle with our web app. I migrated from Webpack to Vite, and because it previously had a web manifest and a service worker, I set one up again with vite-pwa.

This caused a problem, because vite-pwa was returning 404 for a /blog route, because it wasn't a defined route in the router. HOWEVER, it was proxied using NGINX to go to another Wordpress site. But the service worker wouldn't even check, it just returned 404.

After thinking about it, I realized we didn't really need any kind of offline capability and really it was more trouble than it was worth. We've now tried every strategy we can think of to remove it, and we simply cannot.

If I do a Vite production build, for example, with the service worker. And then I change the service worker setup to:

    VitePWA({
      selfDestroying: true,
      // Destroy in dev mode too
      devOptions: {
        enabled: true
      }
    }),

...and then we run Vite in dev mode, this does not destroy the service worker at all. Refreshing the page loads the service worker, and the service worker throws a ton of errors saying that a bunch of files have 404s (like .svg assets), yet all those 404s are for files that should not be retrieved in dev mode. (It's adding hashes to them.)

If we tell users to completely clear the cache, our production site works again. But we can't do that in every case. We just want vite-pwa to not exist anymore, and we can't seem to do anything to remove it. In fact, we tried code like:

void navigator.serviceWorker.getRegistrations().then(function(registrations) {
  for (const registration of registrations) {
    void registration.unregister()
  }
})

...which we got from MDN, and tried using this with vite-pwa not loaded, and the service worker seemed to only re-create itself. I guess, because it was cached, it loaded a cached root HTML file, which loaded the cached service worker?

Please, how do we delete this and never think about it again? Right now it's the zombie that never dies.

Zavim commented 1 year ago

I had this same issue. I was able to solve it by removing the site from my history (in my case it was just localhost -- http://127.0.0.1:3000/). There should be something like "remove this site from my history" in the History settings of your browser.

userquin commented 1 year ago

@matthew-dean @Zavim have you read the docs? You MUST not change anything in the configuration, just add selfDestroying: true, check the DANGER entry: https://vite-pwa-org.netlify.app/guide/unregister-service-worker.html

Zavim commented 1 year ago

I hadn't changed anything in the configuration, just removed localhost:3000 from my browser history. Either way, my case was a practice PWA, not client-facing.

Yankovsky commented 1 year ago

I have the same issue and I didn't change anything in the config.

Yankovsky commented 1 year ago

I think of adding a script to GTM to unregister a service worker, bust the cache and refresh the page for the user. Super hacky and ugly, but I am out of options.

Yankovsky commented 1 year ago

I am also trying to play with downgrading vite-plugin-pwa version, because I have a feeling that something was added to the config on the plugin side, and because of that service workers names or something else don't match.

userquin commented 1 year ago

We haven't change anything about the sw name, check it in local without selfDestroying and then add it again, maybe you have some old tests on your local.

Ensure your original sw precache manifest doesn't include the sw itself.

imagen

Yankovsky commented 1 year ago

Downgrading from ^0.16.4 to 0.12.8 helped. It worked!

userquin commented 1 year ago

uhmm, I'll check changes between those versions, are you using injectManifest strategy?

Yankovsky commented 1 year ago

Yes, I have the following config:

VitePWA({
        strategies: 'injectManifest',
        registerType: 'autoUpdate',
        injectManifest: {
          maximumFileSizeToCacheInBytes: 5_000_000,
        },
        selfDestroying: true,
      }),

Look, maybe it was something else, I didn't do a thorough investigation.

Yankovsky commented 1 year ago

I had version 0.11.13 installed. Then I updated to the latest version of the plugin and added the flag. It didn't work (or maybe I did something incorrectly). Then I downgraded to 0.12.8 and it worked.