How to make sure browsers load the most recent version of a file after updating? [duplicate]

Question

When rolling out a new website change or web application change, sometimes browsers load old javascript or image files when you navigate to the site. Oftentimes it takes a manual refresh of the page for the browser to load in the newly updated files.

How can I make sure that after an update, users receive the most up-to-date files the first time they load the page, rather than having to manually refresh to clear out any cached files. Is there a very reliable way to do this through sending expires headers or last modified?

Answer 1

I assume you have a build script or a bunch of task scripts to help you with the repetitive process of updating the website/application . Since you tagged your question with javascript tag ,i will offer you a javascript based solution .

You could use (or alredy using) a task runner like Grunt or Glup or any other , and then run a cache busting task that will update your url's from this :

<script src="testing.js"></src>
<link href="testing.css" rel="stylesheet">
<img src="testing.png">

to this :

<script src="testing.js?v=123456"></src>
<link href="testing.css?v=123456" rel="stylesheet">
<img src="testing.png?v=123456">

This will prevent the browser from reusing your assets .

Answer 2

I know only one way how to do that - add some parameters to the end of the file URL. E.g. you have image picture.png and instead of write it in html like this

<img src="path/to/picture.png">

you have to write it like this:

<img src="path/to/picture.png?specific_parameter_123">

So, changing of this parameter after '?' will force browser to load your picture (or something else) again because for browser the exact path was changed.

You can do it manually by changing parameter (or even generate it random every time by JS) or use something like Grunt and grunt-cache-breaker and it will generate unique URL of file based on md5 hash. So, once file was changed url will be also changed.

Also it is possible to do the same on server side. E.g. if you are using PHP you can try something like this: hash css and js files to break cache. Is it slow?.

More about query string here.