1

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?

alexandernst
  • 14,352
  • 22
  • 97
  • 197
  • are You sure that there is no CloudFlare or something alike service (cdn) that caches Your content? also try to simply do like: `registerServiceWorker.js?v1` to force to load different url or remove that non-existent file and load page like: `index.html?v1` – num8er Feb 04 '19 at 22:54
  • @num8er Yes, I'm sure. The cache is coming from a service worker, not from the backend. Also I can't ask all visitors that visited the website while it was "broken" to type "index.html?v1" in their address bar in order to visit my website again. – alexandernst Feb 04 '19 at 23:04
  • Funny, I still don't have it down in my PWA, but this article helped me understand the problem a little better: https://medium.com/progressive-web-apps/pwa-create-a-new-update-available-notification-using-service-workers-18be9168d717 . basically, service workers serve your PWA cached first, then the service worker goes and fetches the new version, and that is when you can prompt the user to refresh. – sec0ndHand Feb 04 '19 at 23:07
  • @alexandernst try to rebuild js bundle with timestamp part in js, css inclusions – num8er Feb 04 '19 at 23:07
  • @num8er I'm not sure you're understanding the problem. The problem is hat the `index.html` is being server by a service worker, instead of being fetched from my server. This means that no matter how many random arguments I add to the URL of the `.js` files, the website will still fetch the old files, because the web browser is not getting my latest `index.html` – alexandernst Feb 04 '19 at 23:10
  • @sec0ndHand I found that post, but safari doesn't seem to be fetching the new service worker because of the 404 that I'm describing in my question. – alexandernst Feb 04 '19 at 23:11
  • @alexandernst ok, just put empty js file as temporary workaround – num8er Feb 04 '19 at 23:16

1 Answers1

0

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

Anticom
  • 975
  • 13
  • 29
  • That would work for my phone, but anybody who visited my website while it was "broken", would have to do the same in order to make the website work on his/her browser again. – alexandernst Feb 05 '19 at 13:48
  • Didn't know your website was deployed and visited by customers already. In that case no idea how to fix it. – Anticom Feb 06 '19 at 15:59