How to remove or unregister a Service worker?

[ahmedelgabri]

Is there is a way to remove/unregister a service worker created by sw-precache?

[CallumBrankin]

The manual way of doing this is to:

1. Go to your app's url then go into dev tools
2. Click on the Application tab
3. in the list of the left under Application you should find the Service Workers option
4. find the service worker you want to unregister and click Unregister.

[ahmedelgabri]

Maybe I was not very clear, sorry for that. I meant removing the service worker completely from the website & unregister it from all visitors browsers.

[CallumBrankin]

I need the same functionality. I'll look into it and if i find anything i'll post another comment here.

[CallumBrankin]

if ('serviceWorker' in navigator) {

    navigator.serviceWorker.getRegistrations().then(function(registrations) {

    for(let registration of registrations) {

            registration.unregister()

    }}).catch(function(err) {

        console.log('Service Worker registration failed: ', err);

    });

}

Works for me. Found on this stack overflow question.

[jeffposnick]

@CallumBrankin's correct. The service worker generated by sw-precache can be unregistered via the standard Service Worker API methods.

[john-shine]

file: ./node_modules/react-scripts/config/webpack.config.js
comment line isEnvProduction && ... block, will complete delete service-worker.js from your build dirctory:

// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/.map$/, /asset-manifest.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: paths.publicUrlOrPath + 'index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /, as they're likely an API call
new RegExp('^/'),
// Exclude any URLs whose last part seems to be a file extension
// as they're likely a resource and not a SPA route.
// URLs containing a "?" character won't be blacklisted as they're likely
// a route with query params (e.g. auth callbacks).
new RegExp('/[^/?]+\.[^/]+$'),
],
}),

seviceWorker bring disadvantages outweigh it's benefits, should not use it in most cases unless some actual improvement for it.

[psabharwal123]

that does not work if you have 2 tabs open, service worker would get unregistered but after refresh old service worker still controls the page, any recommendations for that @jeffposnick ?