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?
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.
Yes. The resources are still cached. In my opinion a good practice to avoid this is to version your resources files in a url?parameter=value way.
For example you should set the ulr to your js or css file like this:
< ... src="script.js?v=1" .../> < ... href="style.css?v=1 .. />
and when any changes occured just change v=1 to v=2 ...
that will not affect your code but will make your browser/proxy etc to redownload the resource
Use an incognito instance of chrome (ctrl+shift+n) to check the source, this mode won't use any cached files. With this you can check if your file is being cached on the client side.
If it's on the client side make sure your server is not sending cache-control headers along with the JS file.
If it's on the server then there's a ton of possibilities, maybe you have a reverse proxy, a physical load-balancer or some other type of caching mechanism.
Edit (question changed):
Use this chrome extension to check the headers being sent along with your .js files. There's probably a cache-control header set that instructs chrome to cache the resource.
If you're on apache you can override this behaviour using an .htaccess file.
