Service Worker: files are updated on the server but old version showing in browser

Question

I am building a static app with PouchDB on Google AppEngine.

When I open the site in a browser window, it is showing a version I uploaded several hours ago.

If I open the site in an incognito window, the updated version is displayed (therefore I don't think it is actually an error in the console).

I put a new version number in app.yaml

I have migrated all traffic to the new version.

I have cleared my cache, deleted cookies, checked my application data, everything. I even reinstalled Chrome and Firefox.

I updated my Python version and my Google AppEngine Launcher yesterday; the problem pre-dated that update.

Also: just discovered that if I go to the URL of the updated version http://4.[app-id].appspot.com, it displays the correct, updated version.

This is happening in Chrome, Firefox, and Edge.

Edit: probably should have mentioned that my site uses Service Workers and IndexedDB. I assume my service workers are caching the previous version, but I would have thought that Ctrl + F5 would clear the cache and show the new version.

Milker

@dan-cornilescu thanks for suggesting the cache issue - it was a caching issue, but the application cache rather than the browser cache. – Milker

Answer 1

I think it must be the Service Workers caching the pages (which is, after all, what they are supposed to do). This is actually really annoying when you are developing though.

A guy called Rich Harris has documented this behaviour and some workarounds on a Github Gist.

Reloading the page doesn't behave as you'd expect

If you make a change to your service worker, then reloading the page won't kill the old one and activate the new one (it detects the change by requesting the service worker file each time and comparing the old and the new byte-for-byte), leaving you somewhat confused as to why your changes haven't taken effect. This is because the old window is never actually closed, meaning there's never a time to swap them out – you need to kill the tab completely then reopen it.

Or you can have the browser do that for you by going to the Application tab in devtools (in Canary, not stable Chrome yet), going to the Service Workers section, and checking 'Update on reload'.

UPDATE (13 Nov 2017): This functionality is now available in Chrome, so you don't even need to download Canary.

And here's which bits of the application cache to clear:

Milker

If you clear the cache manually, saddly you don't test if the cache will be updated correctly for your users. Unless I'm missing a detail about this chrome feature. – Syllable