165

I have a simple html:

<html>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<script src="test.js"></script>
</body>
</html>

In test.js I changed a Javascript function, but my browser is caching this file. How to disable cache for script src?

JJJ
  • 32,902
  • 20
  • 89
  • 102
Bdfy
  • 23,141
  • 55
  • 131
  • 179
  • 1
    I add timestamps to the script-sources but several users still need to fire F5 or Ctrl+F5 to get the new script. How's that? (Intranet not WWW) – Jonathan Aug 05 '14 at 07:20

5 Answers5

237

Add a random query string to the src

You could either do this manually by incrementing the querystring each time you make a change:

<script src="test.js?version=1"></script>

Or if you are using a server side language, you could automatically generate this:

ASP.NET:

<script src="test.js?rndstr=<%= getRandomStr() %>"></script>

More info on cache-busting can be found here:

https://www.curtiscode.dev/post/front-end-dev/what-is-cache-busting

Curtis
  • 101,612
  • 66
  • 270
  • 352
  • 12
    The alternative solution is to use some kind of build number (like number of commits since the beginning, or the revision number / commit hash). This way you will utilize server-side language to do it automatically, yet not lose the advantages of caching when nothing really changed. But this requires, as mentioned: version control (or some other change tracking) and server-side processing. – Tadeck Mar 22 '13 at 11:05
  • 11
    @Tadeck Better than that, use a hashed value of the content so that it updates when needed. A new build might be produced but the JS might not change. ASP.NET Bundling and Minification has this built in. http://curtistimson.co.uk/front-end-dev/what-is-cache-busting/#_hashed – Curtis Jun 18 '15 at 14:39
  • 1
    you ALL wrong! – Alexey Kuznetsov Aug 08 '16 at 00:35
  • Why not using a timestamp ? – TOPKAT Feb 12 '18 at 20:10
  • 1
    @SébastienGarcia-Roméo That's a valid option. It's one of the options I put forward on my linked post https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/ – Curtis Feb 13 '18 at 09:52
  • 4
    An annoying aspect of this solution is that Chrome will treat this as a new file. If you've set breakpoints for instance, you'll lose all of them on the next reload. – Nathan May 17 '18 at 22:01
  • @Curt This answer works, but maybe you can edit it to add an auto generated client side like this: https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript – Roberth Solís Jan 17 '19 at 16:16
  • Second answer (random query parameter) is fabulous. – user875234 Dec 06 '21 at 18:50
  • Adding something statically will not solve the caching trouble for a host that is remaining the same and remotes only are updated.... – jdehaan Jun 29 '22 at 13:06
61
<script src="test.js?random=<?php echo uniqid(); ?>"></script>

EDIT: Or you could use the file modification time so that it's cached on the client.

<script src="test.js?random=<?php echo filemtime('test.js'); ?>"></script>
chim
  • 8,407
  • 3
  • 52
  • 60
Alex Pliutau
  • 21,392
  • 27
  • 113
  • 143
  • 3
    You'd better put the "LastWriteTimeUTC" unix-timestamp in there, that way it stays cached as long as the script doesn't change. – Stefan Steiger Sep 23 '15 at 13:11
  • Simple but great solution, thanks. – Stef Van Looveren Jul 30 '19 at 07:13
  • `uniqid()` would generate new filename every time. I think, the better approach is `filemtime` function. This will change file version only when file is modified and that is the problem when we make changes in the code and we ask the client to clear the cache. – Zaheer Jun 30 '21 at 04:48
18

Configure your webserver to send caching control HTTP headers for the script.

Fake headers in the HTML documents:

  1. Aren't as well supported as real HTTP headers
  2. Apply to the HTML document, not to resources that it links to
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
16

You can append a queryString to your src and change it only when you will release an updated version:

<script src="test.js?v=1"></script>

In this way the browser will use the cached version until a new version will be specified (v=2, v=3...)

daveoncode
  • 18,900
  • 15
  • 104
  • 159
10

You can add a random (or datetime string) as query string to the url that points to your script. Like so: 

<script type="text/javascript" src="test.js?q=123"></script>

Every time you refresh the page you need to make sure the value of 'q' is changed.

Bas Slagter
  • 9,831
  • 7
  • 47
  • 78