4

I've been using quite a bit of JQuery, KnockoutJS and other JavaScript stuff for a web app I am building. Most of the JS is off in its own nice separate files. The issue I have is that the browsers cache those files so when I push a change people have to refresh a few times before they get the updated file. Recently I made a significant change to how some data was passed and the cached versions of the files caused some errors and worse, some data to get erased.

How do people handle this? Is there a way to force refresh of files?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
MikeD
  • 923
  • 4
  • 12
  • 24

3 Answers3

6

Different dev's do different things. The official way is to play nicley and use HTTP headers. Google for http heads and caching issues and you should be fine to continue on your own way.

However some browsers just ignore you so if im developing in a live environment, i use version numbers to ensure everyone gets the latest file. So you might call your original "something.js?v=1.0". Make a small change then change it to "?v=1.1".. you get the idea. Because the link is different, it should completely ignore caching in most cases.

I tend to use both methods just to be as sure as possible

Lee
  • 10,496
  • 4
  • 37
  • 45
  • Note that when using ? that not all browsers will cache, essentially no caching for that file. Ideally you would rename the js file on each change to the file to support caching when the file has not changed and invalidate the cache when it did. – Adam Caviness Aug 15 '13 at 15:18
5

The only way I know of to force all browsers to ignore cache is to add some sort of unique identifier to the script tag.

One thing you could do is add a timestamp or version number via a GET param that won't mean anything to the server, or just change the filename of the script itself if that is feasible:

<script type="text/javascript" src="myscript.js?version=2.0"></script>
<script type="text/javascript" src="myscript.js?ts=9342038423048"></script>
<script type="text/javascript" src="myscript.2.0.js"></script>

If significant changes have been made to the JS file though most browsers should be smart enough to fetch a fresh copy... you can also tweak your response headers if you have access to the server (cache-expire etc)

mattacular
  • 1,849
  • 13
  • 17
1

The trouble is that a browser will cache when you perform a GET request against the same URL. As others have said, you can append a timestamp as a query parameter. This forces a new GET request as the URL has changed.

For ajax specifically, there is a jQuery.ajax parameter that does this for you

cacheBoolean Default: true, false for dataType 'script' and 'jsonp'

If set to false, it will force requested pages not to be cached by the browser. Setting cache to false also appends a query string parameter, "_=[TIMESTAMP]", to the URL.

When using AJAX you should use this method. Otherwise, append your own timestamp or modify the headers (which should work in modern browsers).

P.Brian.Mackey
  • 43,228
  • 68
  • 238
  • 348