0

Everytime I deploy an update to our web application customers ring in with issues where their browser hasnt picked up that index.html has changed and since the name of the .js file has changed they run into errors. Presumably because their index.html still points to the old javascript file which no longer exists.

What is the correct way to ensure that users always get the latest version when the system is updated.

We have a HTML5 + AngularJS web application. It uses WebPack to bundle the vendor and app javascript into two js files. The files contain a hashname to ensure they are different once released.

Some other information

  • I can never replicate this issue locally (and by that I mean in debug, on our staging site or our production site)
  • We use CloudFlare but purge the entire cache after release
  • We have a mechanism in JS that checks on page load or every 5 minutes to see if the version of our API has changed, and if so show up a "Please refresh your browser" message. Clicking this runs window.location.reload(true);
  • Our backend is IIS
Chris
  • 26,744
  • 48
  • 193
  • 345
  • Just purging CloudFlare cache does not circumvent Browser cache. Either disable it using a Page Rule, or tell your customers to CTRL+Shift+R, when loading your website – Luca Kiebel Sep 07 '18 at 07:58
  • you can try to append a timestamp to your javascript file which will cause the browser to always fetch the latest version check out [add a timestamp to javascript filename](https://stackoverflow.com/questions/11467873/how-to-append-timestamp-to-the-javascript-file-in-script-tag-url-to-avoid-cach) for more info – vikscool Sep 07 '18 at 08:01
  • @vikscool - The OP's already using a hash in the filename. The issue is an outdated `index.html`, not an outdated JavaScript file. – T.J. Crowder Sep 07 '18 at 08:03

1 Answers1

2

If you need users to pick up the latest index.html when they load your site immediately after you've updated the file, make index.html non-cacheable. That will mean the browser, CloudFlare, and any intermediate proxies aren't allowed to cache it, and that one file will always be served from your canonical server.

Naturally, that has a traffic and latency impact (for you and them), but if that's really your requirement, I don't see any other option.

There are spins on this. It might not be index.html itself that isn't cacheable, you could insert another resource (a tiny JavaScript file that writes out the correct script tags) if index.html is really big and it's important to cache it, etc. But if you need the change picked up immediately, you'll need a non-cacheable resource that identifies the change.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • If it's clear to the developer when the HTML changes, CloudFlare can still keep their cache, it just needs to be purged whenever changes should roll out. – Luca Kiebel Sep 07 '18 at 08:14
  • @LucaKiebel - True. It's the browser (and intermediate proxies btw. browser and CloudFlare, if any) that need to be kept from caching it. – T.J. Crowder Sep 07 '18 at 08:17