How to clear client cache the next time you log in

Question

I have an application running on hostgator. When I make changes to js files, my users do not see the changes until they clear their cache. Is this the only option for making changes to my application? Basically, should I make changes, update files, and then ask all users to clear their cache?

Answer 1

You need to use version control in your file. Each time you change the URI of your file, the browser does not find a match in the cache and reloads the include.

For instance:

<script type="text/javascript" src="include/232/init.js"></script> 

Where 232 is your modifiable version number, which must be changed when new code is released.

Alternatively, you can use the query strings:

 <script type="text/javascript" src="include/init.js?232"></script> 

The fact is that you must somehow modify the file with the URI when you want your visitors to re-upload the file.

If you use PHP or another server language, you can configure this version control automatically every time you change your file: http://derek.io/blog/2009/auto-versioning-javascript-and-css-files/

Answer 2

You can add dummy query strings to the resource URL:

 <link href="http://mysite.com/main.css?v=1" rel="stylesheet" /> 

Then, whenever you make any changes to your CSS, just increase the version number.

This method is called busting cache . Find Google for this and you will get many different options.

Answer 3

One trick to get around this is to add a query string with some version or timestamp to your link Javascript calls. For instance:

 <script src="myexternal.js?20130116" type="text/javascript"></script> 

This example is simple, but proves the point. This basically tells the browser to download the file if it does not recognize the full path. Every time you change your javascript file and want your users to download the latest version, just update this timestamp or the value after the question mark (query string).

Answer 4

You cannot clear the cache of your client browsers, but you can use cache iteration methods, such as adding versions to your files.

 <link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" /> 

And then when you make changes

 <link rel="stylesheet" href="/css/example.css?v1.1" type="text/css" /> 

It can be a timestamp or something else, you just need to be different.

Answer 5

A simple trick I sometimes use is to add some dummy parameters to the JavaScript / CSS file path. The browser essentially sees a different URL and will not use it in the cached version.

 $jsFile = '/js/myFile.js'; // probably cached $jsFile = '/js/myFile.js?r='.time(); // won't ever be cached 

You cannot clear the client cache, but you can trick the client browser into thinking that this is the first time that it sees this file and it downloads it again.

Remember to disable this as soon as you reach the stable version. File caching is a great way to speed up application loading time.

Answer 6

The trick I use to avoid this problem is to change the URL of the updated script. This will force the client to load the script again, as the resource name is different.

The easiest way to do this is to use the version number at the end of the URL js/my-script.js?v=1.0 .

The best way to do this (100% supported for all navigators): change the js/my-script.v1.0.js file name itself.