5

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?

jrthib
  • 1,319
  • 1
  • 12
  • 17
  • Add a querystring with a timestamp to the url. – adeneo Dec 11 '14 at 19:10
  • 1
    @adeneo Ugh, no. That prevents the resource from *ever* being cached. – Madbreaks Dec 11 '14 at 19:13
  • 1
    Agree with @Madbreaks. Why not append a git (or static, if you must) version number to the query string so each version is cached by your visitor's browsers but updates when you deploy a new set of changes. – Cristian Dec 11 '14 at 19:15
  • @Madbreaks then vote to close it with a reference to another question here on SO – Stephen P Dec 11 '14 at 19:22

4 Answers4

5

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 .

Alexander
  • 12,424
  • 5
  • 59
  • 76
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.

Community
  • 1
  • 1
Ihor
  • 3,219
  • 2
  • 18
  • 20
1

I have used a hash in some projects. That hash (md5 or something fast) is computed from the file contents of the used LESS/SASS files or JS modules. Each time something is changed, e.g. in the LESS source, the compiled CSS file will have a new filename.

You should enable client-side caching with a long caching time. The browser will store the CSS files locally. It only loads a new CSS file after a live-deploy.

feeela
  • 29,399
  • 7
  • 59
  • 71
-7

Check the data you have available per the system.

user1789573
  • 515
  • 2
  • 8
  • 23