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

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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.