Completely forcing a SPA refresh, ignoring cache, service workers and so on

Question

I have a website built with Vue (SPA). I was playing with service workers and it seems that I completely screwed something, because now I can't see anything but a blank website in Safari on my iPhone.

I debugged the problem by plugging my phone into my Mac and using Safari's inspector tool see what's going on. It seems that a service worker is providing an old index.html file, which then tries to pull an old .js file (which doesn't exist anymore on the server). Because the server is returning a text/plain reply (a 404 page), safari on my phone is halting everything, because the content type of that 404 page doesn't match the expected content type of a .js file.

The website still works fine on other devices, so at this point I'm not 100% sure if I'm the one to blame, or is it Safari's fault.

Either way, I want to, somehow, force a complete cache removal (including service workers). Is that possible? If not, how can I fix this problem?

Answer 1

Not knowing the capabilities of remote debugging on your phone assuming you can inject js to run on it using the dev tools you could unregister the service worker using something like:

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

Please note credits go to: https://stackoverflow.com/a/33705250/966530