Reputation: 8943
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
Reputation: 20518
You can remove service workers programmatically like this:
navigator.serviceWorker.getRegistrations().then(registrations => {
for (const registration of registrations) {
registration.unregister();
}
});
Docs: getRegistrations, unregister
You can also remove service workers under the Application tab in Chrome Devtools.
Upvotes: 478
Reputation: 31250
You can delete all service workers in Chrome in a second:
Go to chrome://serviceworker-internals
or if using brave then go to brave://serviceworker-internals
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
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
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 pendingnavigator.serviceWorker.ready
is fulfilled immediately unless there is no service worker registered for the current pageI used this:
(await navigator.serviceWorker.ready).unregister()
Upvotes: 2
Reputation: 736
If You want to unregister all of the registered service workers in Browser, you can do it by opening ex.
open DevTools > Console and paste this:
$$('.unregister').forEach(b => b.click())
Upvotes: 2
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
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
Reputation: 1648
Open in Chrome
chrome://serviceworker-internals/?devtools
then F12 in Console
$$('.unregister').forEach(b => b.click())
Upvotes: 1
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))
});
});
Upvotes: 6
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
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.
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
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
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:
Upvotes: 7
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
Reputation: 1043
You can do this through Chrome Developer Tool as well as Programatically.
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.
Open Developer Tools (F12) and Select Application. Then Either
Select Clear Storage -> Unregister service worker
or
Select Service Workers -> Choose Update on Reload
Programatically
if(window.navigator && navigator.serviceWorker) {
navigator.serviceWorker.getRegistrations()
.then(function(registrations) {
for(let registration of registrations) {
registration.unregister();
}
});
}
Upvotes: 53
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
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):
Note: In addition to service workers, this also will erase all caches, cookies, and databases for this domain.
Upvotes: 10
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
Reputation: 17583
You can also go to the URL: chrome://serviceworker-internals/ and unregister a serviceworker from there.
Upvotes: 130
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.
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