CODEWITHSUNDEEP
htmlgoogle-chromeservice-worker
Mark Tomlin
Mark Tomlin

Reputation: 8943

How do I uninstall a Service Worker?

After deleting /serviceworker.js from my root directory, Chrome still runs the service worker that I removed from my webroot. How do I uninstall the service worker from my website and Chrome so I can log back into my website?

I've tracked the issue down to Service Work's cache mechanism and I just want to remove for now until I have time to debug it. The login script that I'm using redirects to Google's servers for them to login to their Google account. But all I get from the login.php page is an ERR_FAILED message.

Upvotes: 252

Views: 172191

Answers (21)

Daniel Herr
Daniel Herr

Reputation: 20518

Removing Service Workers Programmatically:

You can remove service workers programmatically like this:

navigator.serviceWorker.getRegistrations().then(registrations => {
    for (const registration of registrations) {
        registration.unregister();
    } 
});

Docs: getRegistrations, unregister

Removing Service Workers Through The User Interface

You can also remove service workers under the Application tab in Chrome Devtools.

Upvotes: 478

Mahmoud Zalt
Mahmoud Zalt

Reputation: 31250

You can delete all service workers in Chrome in a second:

  1. Go to chrome://serviceworker-internals
    or if using brave then go to brave://serviceworker-internals

  2. In the console, enter the following code:

    $$('.unregister').forEach(b => b.click())

This code will click on the "unregister" button for each service worker, effectively deleting all of them :)

Upvotes: 2

jstaab
jstaab

Reputation: 3885

If, like me, you need to unregister a service worker after deploying an entirely new codebase at the same domain (without a service worker), the solution is to create a new service worker at the same location and disable all caching:

self.addEventListener('fetch', event => event.respondWith(fetch(event.request)))

This way, when the browser asks for sw.js (or whatever you named it), it will get the new one, then load your new site from the network. After an indeterminate time (i.e. after all your users have loaded the new service worker), you can remove the service worker.

Upvotes: 3

SgtPooki
SgtPooki

Reputation: 11679

I'm using Brave. None of the provided answers worked for me on a page with a single service worker.

  • navigator.serviceWorker.getRegistrations() stays pending.
  • navigator.serviceWorker.getRegistration() stays pending.
  • navigator.serviceWorker.getRegistration(navigator.serviceWorker.controller.scriptURL) stays pending
  • navigator.serviceWorker.ready is fulfilled immediately unless there is no service worker registered for the current page

I used this:

(await navigator.serviceWorker.ready).unregister()

Upvotes: 2

devzom
devzom

Reputation: 736

If You want to unregister all of the registered service workers in Browser, you can do it by opening ex.

  • Chrome: chrome://serviceworker-internals/
  • Brave brave://serviceworker-internals/

open DevTools > Console and paste this:

$$('.unregister').forEach(b => b.click())

Upvotes: 2

Jeff Luyet
Jeff Luyet

Reputation: 502

Typical JavaScript loop thats compatible with everything:

navigator.serviceWorker.getRegistrations().then(function(registrations) {
    var registrationslength = registrations.length;
    for (var i = 0; i < registrationslength; i++) {
        registrations[i].unregister();
    }
})

Upvotes: 0

danny wang
danny wang

Reputation: 39

as for me , i just use a new nonexistent scope service worker to replace old one,

ServiceWorker: {
        events: true,
        // what range of URLs a service worker can control. Use a nonexistent path to disable ServiceWorker
        scope: '/disable-service-worker/',
      },

as for the app.js, i add below code to unregister old sw:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations().then(registrations => {
    for (const registration of registrations) {
      // keep only serviceWorker which scope is /disable-service-worker/, The purpose is to make serviceWorker useless
      if (registration.scope.includes('/disable-service-worker/') === false) {
        registration.unregister()
      }
    }
  });
  // clear cache of service worker
  caches.keys().then(keyList => {
    return Promise.all(
      keyList.map(key => {
        return caches.delete(key);
      }),
    );
  });
}

Upvotes: 3

Valentin Petkov
Valentin Petkov

Reputation: 1648

Open in Chrome

chrome://serviceworker-internals/?devtools

then F12 in Console

$$('.unregister').forEach(b => b.click())

Upvotes: 1

Daniel Jose Padilla Pe&#241;a
Daniel Jose Padilla Pe&#241;a

Reputation: 602

IF your service worker don't let you update your files. You will need to replace serviceworker file (sw.js / ServiceWorker.js) with the next code:

self.addEventListener('install', function(e) {
  self.skipWaiting();
});

self.addEventListener('activate', function(e) {
  self.registration.unregister()
    .then(function() {
      return self.clients.matchAll();
    })
    .then(function(clients) {
      clients.forEach(client => client.navigate(client.url))
    });
});

Source here

Upvotes: 6

Kadir
Kadir

Reputation: 96

Open this page: chrome://serviceworker-internals and click to unregister button.

If you want to unregister all service worker open the developer tools and run this code on above page.

document.querySelectorAll("button.unregister").forEach(item=>{ item.click()})

Upvotes: 0

Michael Nelles
Michael Nelles

Reputation: 6032

It can also be done in Chrome through application tab: enter image description here

Upvotes: 2

Kevin Cox
Kevin Cox

Reputation: 3233

The other answers all add code to the live website to remove the service worker. However I didn't want to leave that live code running forever so I developed a solution that works from within the service worker itself. The steps are below, I posted more detail and explanation on my blog.

  1. Delete the code that registers the service worker.
  2. Replace the service worker script with the following file. The new code must be available from the same URL the previous service worker was at. If you had multiple service worker URLs in the past you should duplicate the code at all of them.
console.log("Cleanup Service Worker Starting");

caches.keys()
    .then(keys =>
        Promise.all(
            keys.map(async key => console.log("caches.delete", key, await caches.delete(key)))))
    .then(async () => {
        console.log("registration.unregister", await registration.unregister());
    })
    .then(() => console.log("DONE"))
    .catch(console.error);

This code is fairly straight forward. First it deletes all the caches, then it unregisters itself.

Users' browsers will automatically check for an updated service worker the next time they load your website, or the next event 24h after the last service worker check. This means that existing users will run this cleanup on their next visit.

Upvotes: 2

Sergei Beloglazov
Sergei Beloglazov

Reputation: 362

This code is compatible with Internet Explorer:

if (navigator.serviceWorker) {
    navigator.serviceWorker.getRegistrations().then(                
        function(registrations) {
            for (let idx in registrations) {
                registrations[idx].unregister()
            }
        })
}

IE doesn't support 'for...of' and 'for...of' construction may lead to "'SCRIPT1004: Expected ';'" error

Upvotes: 1

Francesco
Francesco

Reputation: 10870

In addition to the already correct answers given, if you want also to delete the SW cache you can invoke the following method:

if ('caches' in window) {
    caches.keys()
      .then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
              return caches.delete(key);
          }));
      })
}


More in this article (Paragraph: "Unregister a service worker")


Another possibility, via Browser, is by accessing the "Cache Storage" section and click on the "Clear Site Data" button:

enter image description here

Upvotes: 7

Vitalij
Vitalij

Reputation: 680

to detect service worker:

navigator.serviceWorker.controller

Code to for deletion of service worker:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister();
    })
  });

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

  if(window.navigator && navigator.serviceWorker) {
    navigator.serviceWorker.getRegistrations()
    .then(function(registrations) {
      for(let registration of registrations) {
        registration.unregister();
      }
    });
  }

  if ('caches' in window) {
      caches.keys()
        .then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
                return caches.delete(key);
            }));
        })
  }

  if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function (registrations) {
          for (const registration of registrations) {
            // unregister service worker
            console.log('serviceWorker unregistered');
            registration.unregister();

            setTimeout(function(){
              console.log('trying redirect do');
              window.location.replace(window.location.href); // because without redirecting, first time on page load: still service worker will be available
            }, 3000);
          }
        });
      }

Upvotes: 3

Sakshi Nagpal
Sakshi Nagpal

Reputation: 1043

You can do this through Chrome Developer Tool as well as Programatically.

  1. Find all running instance or service worker by typing

    chrome://serviceworker-internals/

    in a new tab and then select the serviceworker you want to unregister.

  2. Open Developer Tools (F12) and Select Application. Then Either

    Select Clear Storage -> Unregister service worker

    or

    Select Service Workers -> Choose Update on Reload

  3. Programatically 

if(window.navigator && navigator.serviceWorker) {
  navigator.serviceWorker.getRegistrations()
  .then(function(registrations) {
    for(let registration of registrations) {
      registration.unregister();
    }
  });
}

Upvotes: 53

Pankaj Rupapara
Pankaj Rupapara

Reputation: 780

safely uninstall Service Worker

if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function (registrations) {
        for (const registration of registrations) {
          // unregister service worker
          console.log('serviceWorker unregistered');
          registration.unregister();
        }
      });
    }

Upvotes: 3

terrymorse
terrymorse

Reputation: 7096

FYI, in case you are using MacOS Safari browser, there is one way to forcibly unregister a service worker (steps and images for Safari 12.1):

  1. Safari > Preferences... > Privacy > Manage Website Data… Safari Preferences : Privacy

  2. Enter domain name (ex. 'localhost'), click "Remove" Safari Preferences : Privacy : manage website data

Note: In addition to service workers, this also will erase all caches, cookies, and databases for this domain.

Upvotes: 10

GuoX
GuoX

Reputation: 421

You should detecte two API in your devices: getRegistrations and getRegistration. The service-worker not has a unique set of APIs in all platforms. For example, some browsers only have a navigator.serviceWorker.getRegistration, no navigator.serviceWorker.getRegistrations. So you should consider with both.

Upvotes: 5

k00k
k00k

Reputation: 17583

You can also go to the URL: chrome://serviceworker-internals/ and unregister a serviceworker from there.

Upvotes: 130

Asim K T
Asim K T

Reputation: 18164

In Google Chrome, you can go to Developer tools (F12) -> Application -> Service worker and unregister the service workers from the list for that specific domain.

Screenshot

This method is effective in development mode of a site and mostly they run on localhost which is you may need for other project's development.

Upvotes: 24

Related Questions