Question

I recently made a website and I made a change to a .js file, but when I delete the .js file from the FTP server and upload the new one, the new file doesn’t show up on the website. I checked the source code behind the .js file on the website and it’s not right, it’s showing the source for the old file, not the new one even though the old one is gone. Is that because my browser cached the .js file?

Note: I have this source

<meta http-equiv="cache-control" content="no-cache" />

on my page to stop the browser from caching my page, and I know that works on the HTML, but with that source there, do the resource files still get cached?

I don’t have that line of code on my other pages, just my home page, but the .js file is still referenced on the other pages so perhaps that is how it is getting cached?

Furthermore, is there a way to check your browsers cache? I use chrome.

Edit: I just cleared my browsers cache and reloaded the website and the file worked as it should now, so that means the file did get cached. So now my question becomes how to I prevent a resource file from being cached?

Answer 1

I am not positive that no-cache meta tag is the way to go. It negates all caching and kind defeats the purpose of quickly accessible pages.

Also, AFAIK, meta tag works per page, so if you have a page without it that references your JS – it will be cached.

The widely acceptable way of preventing JS files (and, again, CSS) from being cached is to differentiate the requests for them:

Say, you have:

<script type=”text/JavaScript” src=”somescript.js″></script>

this one will cache it (unless the above meta-tag is present.

What you want to have is that on each page load the above line looks different (URL-wise) like so:

<script type=”text/JavaScript” src=”somescript.js?some-randomly-generated-string″></script>

Same goes for CSS.

If you were using some sort of JS network – it would take care of that for you had you given it some sort of “no-cache” configuration option.

You, of course, can do it in pure JS too. Some sort of Date related string is an option.

---

Now, normally, you would not want to negate all the caching, so the way to do so is to add a version parameter to your URL:

<script type=”text/JavaScript” src=”somescript.js?version=1.0.0″></script>

and manage your scripts from there.

EDIT

There is no need for any additional extension. Unless I am sorely mistaken, “Chrome Developer Tools” is built in in all Chrome versions (in beta and dev, for sure) and is accessible by pressing Ctrl-Shift-I. There, in “Network” tab, you can see all your requests, there content and headers.