Question: Popular question [How do I uninstall a Service Worker?](https://stackoverflow.com/questions/33704791/how-do-i-uninstall-a-service-worker) has a fine answer for unregistering a service worker using JavaScript. How can I get the service worker to clear any named caches when it unregisters?

From MDN [`unregister`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister), *The service worker will finish any ongoing operations before it is unregistered.* So, it sounds like it should be possible to listen for an `uninstall` event, but no such event exists [as far as I can tell](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope#Event_handlers). For giggles, I tried adding `self.addEventListener('uninstall', ...)` to the service worker, but as expected, it did not fire on unregister. I also tried listening for any [`message`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onmessage) that might be sent on unregister... no dice.

I also considered watching the [service worker state](https://w3c.github.io/ServiceWorker/#update-state-algorithm), but none of `installing`, `installed`, `activating`, `activated`, and `redundant` appear relevant. Not to mention, it doesn't look like message passing to the service worker is possible, so I'm not sure what I'd do with an `uninstalling` state from outside the service worker anyways.

Reaching for straws, while I see references to an [uninstalling flag](https://w3c.github.io/ServiceWorker/#dfn-uninstalling-flag), I haven't seen it exposed anywhere. Suggestions?

Answer: 
The following code should unregister all service workers and clear out everything in the Cache Storage API for your origin:

```
async function unregisterAndClearCaches() {
  const registrations = await navigator.serviceWorker.getRegistrations();
  const unregisterPromises = registrations.map(registration => registration.unregister());

  const allCaches = await caches.keys();
  const cacheDeletionPromises = allCaches.map(cache => caches.delete(cache));

  await Promise.all([...unregisterPromises, ...cacheDeletionPromises]);
}

```

Using the [`Clear-Site-Data` header](https://www.chromestatus.com/feature/4713262029471744) is another option for "forcing" everything to be cleared (service worker registration, caches, etc.) in a single action.
This can be accomplished with message passing. One reason I prefer this to the answer by Jeff Posnick is that the name of the cache does not need to be known outside of the service worker. In the service worker, add a message listener:

```
self.addEventListener('message', (event) => {
    messageHandler(event);
});

```

The `messageHandler()` can then take action on various passed messages. For example:

```
function messageHandler(event) {
    if (event.data === 'purge_cache') {
        caches.delete('mycache')
        .then((success) => {
            console.log("Cache removal status: " + success);
        })
        .catch((err) => {
            console.log("Cache removal error: ", err);
        });
    }
}

```

To trigger this action, *post* the message from your script on a page that is under the service worker's scope. So, for the original question of how to delete the cache and then unregister the service worker, you could do this:

```
navigator.serviceWorker.getRegistration()
.then((registration) => {
    registration.active.postMessage('purge_cache');
    registration.unregister()
    .then((success) => {
        console.log('Service worker unregistration status: ' + success);
    })
    .catch((err) => {
        console.log('Service worker unregistration failed', err);
    });
})
.catch((err) => {
    console.log('Service worker registration not found.');
});

```

Notice, I did not wait for a successful reply from `postMessage('purge_cache')`; from MDN [`unregister`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister), "The service worker will finish any ongoing operations before it is unregistered."