How to remove a service worker registered in previous deploy from users' browsers with the newly deployed version of site (Firebase)?

unregister service worker
service worker update cache
react remove service worker
firefox disable service worker
unregister service worker vuejs
service worker registration
service worker update on reload
service worker onupdatefound

I've deployed a new version of my site (It was on Polymer, now on Vue.js) to Firebase over an existing project.

I'm using default Vue.js template with Webpack (vue init webpack my-project) in the new project


Now that I've deployed the new version, when I open the site I see just a cached shell, I assume that's the service worker's fault

In order to get actual current files from Firebase I (and all the previous visitors) have to now hard refresh the site every time (Ctrl+F5 in firefox)

Console

Now, in browser console (network tab) I see:

  • The service worker in red, it says: (failed) net::ERR_INSECURE_RESPONSE when I normally open the site (without hard refresh)

  • Some of the files have size property of (from ServiceWorker) - these files have cache-control:max-age=3600 but it's been more than an hour since I've deployed new version of the site. It looks like the service worker itself doesn't have any headers, maybe that's why it keeps loading the old files


I've added this code to firebase.json, then npm run build trying to remove the service worker, but I still have the issue

Firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      { "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
    ]
  }
}
Service worker code from the previous project

I don't use any service workers on the newly deployed version. But the previous deploy registered a service worker

I was using the default sw-precache component from Polymer 1.0 framework's library that was built in the pre-configured Polymer starter kit template that I used. Service worker was generated at build time

Bundled > service-worker.js: https://jsfiddle.net/uydjzw13/

Unbundled > service-worker.js: https://jsfiddle.net/t42fdgow/


Question:

Is there a way to remove that old service worker from all the site visitors' browsers so that they always get the newly deployed version? Maybe I can do that with Webpack or Firebase somehow?


Is it going to get fixed if I just delete the previously deployed version with the service worker from Firebase?

Or maybe I could deploy another version with a service worker that has the only function that deletes all previous cache and unregisters previous service worker, if that's possible?

Or can I use something like this maybe?: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister

I'm not sure how to do that correctly and not accidentally register any more service workers that I also won't be able to get rid of.


I finally found the solution!

So if you have the same problem, just do this:

1 Install this webpack plugin (if you're using webpack in your project)

npm install webpack-remove-serviceworker-plugin

2 Create the constant in webpack.prod.conf.js file (or whatever your production config is called)

const RemoveServiceWorkerPlugin = require('webpack-remove-serviceworker-plugin')

3 Add the plugin into plugins: [ ] in that file (don't put ; there if you don't use them in your project):

new RemoveServiceWorkerPlugin({ filename: 'service-worker.js' });

4 change that service-worker.js filename to whatever your service worker was called previously (the one you need to remove. You can find its name in the network tab of developer tools when page is loaded)

5 Build the project again and deploy


If you don't use webpack, you can try to do this - replace the old service worker with one that unregisters itself:

registration.unregister().then(async () => {
  // optionally, get controlled pages to refresh:
  for (const client of await clients.matchAll()) {
    client.navigate(client.url);
  }
});

How To Uninstall, Unregister Or Remove A Service Worker ⚙️ [With , We often cover registering and updating service workers, but neglect And no one wants their application to deliver a poor user experienceespecially from a bug. Before committing your code or deploying to a server you should an update in the past 24 hours it will check the server for a new version. The preceding guidance also applies when service worker assets are in use. Remove or recompress wwwroot/service-worker-assets.js.br and wwwroot/service-worker-assets.js.gz. Otherwise, file integrity checks fail in the browser. The following Windows example uses a PowerShell script placed at the root of the project. ChangeDLLExtensions.ps1::


I think it depends on what your service worker is doing and how it is doing it. This item from Google talks about the difficulties relating to service workers that cache code, and they recommend using this library.

What is a service worker?

A service worker sits between the client and the server and resides inside of the users browser. They have several roles and can perform many tasks. One of those tasks is to cache the script/code from a website (it's shell).

A historical comparison

In many ways caching code looks like how the internet worked back in the late 1990s. Back then you could go into the folder's browser history and open the folders and get a partially working website even when offline.

A risk

Service workers can do that same task as looking into a websites folders stored on a computer, by doing this before calling back to the server for files makes your site look and feel super fast, because the service worker delivered the locally stored version of your site.

However, there is a huge risk. If a service worker is not set up correctly when a user visits a url the service worker will always point to the cached version of a website first. That means no matter what code you change or deliver the client never actually asks for it.

This is the worst situation as the only way to fix this is for the user to go into the developers panel and delete the service worker, or clear their browsers data, but they may never know to do this, and just believe a website is broken.

A way to immediately unregister a service worker · Issue #614 · w3c , If we want a protocol solution to removing a service worker, using HTTP 410 seems Ah, I see the SW would run self.registration.unregister({immediate: true​}), so that If an evil user has managed to install a SW on another site, the other site  Once a service worker has successfully installed, it transitions into the activation stage. If there are any open pages controlled by the previous service worker, the new service worker enters a waiting state. The new service worker only activates when there are no longer any pages loaded that are still using the old service worker.


Take a look at this merged Pull Request where it was implemented the flag --skip-plugins where you can specify the name of the plugins you want to ignore during npm run build or something like that. It seems a good idea the PWA plugin off.

Self-destroying ServiceWorker - Arthur Stolyar, Is it easy to remove ServiceWorker from a website? most cases effect of that removal won't be applied to the users on the next visit of the website. Any previous registration or unregistration code has to be removed from the After the next deploy of the website, everyone who is visiting your website will  In Firefox, Service Worker APIs are hidden and cannot be used when the user is in private browsing mode. Install and activate: populating your cache. After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site. The install event is fired when an install is successfully completed.


The Service Worker Lifecycle | Web Fundamentals, Without service workers, users can load one tab to your site, then later open another. The install event is the first event a service worker gets, and it only happens once. The default scope of a service worker registration is . the activate event I get rid of any others, which removes the old static-v1 cache. As the page loads, you can see that a service worker is registered. Next to the Source label you can see a link to the source code of the registered service worker. If you ever want to inspect the currently-installed service worker for a page, click on the link. This will show you the source code of the service worker in the Sources panel of


Service Workers: an Introduction, Before service worker, there was one other API that gave users an offline To install a service worker for your site, you need to register it, which you do in of old caches, which we'll cover during the service worker update section. and in the activate step we'd want to delete our older 'my-site-cache-v1' . Add your users to these groups to either make the app availabe, install the app, or remove the app from their Microsoft Managed Desktop device. Step 3: Assign apps to your users. To assign the app to your users. Sign in to Microsoft Managed Desktop Admin portal. In Managed Desktop pane, select Apps.


Using Service Workers, The best web app in the world will provide a terrible user experience if you can't download it. The previous attempt — AppCache — seemed to be a good idea because it workers, including basic architecture, registering a service worker, the install The service worker URL is fetched and registered via  Console. installutil /u <yourproject>.exe. After the executable for a service is deleted, the service might still be present in the registry. If that's the case, use the command sc delete to remove the entry for the service from the registry.