htaccess - How to force the client's browser to clear the cache?

Question

For my site I have the following htaccess rules:

# BEGIN Gzip <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </IfModule> # END Gzip  # BEGIN EXPIRES <IfModule mod_expires.c>     ExpiresActive On     ExpiresDefault "access plus 10 days"     ExpiresByType text/css "access plus 1 month"     ExpiresByType text/plain "access plus 1 month"     ExpiresByType image/gif "access plus 1 month"     ExpiresByType image/png "access plus 1 month"     ExpiresByType image/jpeg "access plus 1 month"     ExpiresByType application/x-javascript "access plus 1 month"     ExpiresByType application/javascript "access plus 1 month"     ExpiresByType application/x-icon "access plus 1 year" </IfModule> # END EXPIRES 

I've just updated my site and it looked all screwy until I cleared my cache. How can I force the client's browser to clear the cache after an update so that the user can see the changes?

Answer 1

You can force browsers to cache something, but

You can't force browsers to clear their cache.

Thus the only (AMAIK) way is to use a new URL for your resources. Something like versioning.

Answer 2

As other answers have said, changing the URL is a good cache busting technique, however it is alot of work to go through a bigger site, change all the URLs and also move the files.

A similar technique is to just add a version parameter to the URL string which is either a random string / number or a version number, and target the changed files only.

For instance if you change your sites CSS and it looks wonky until you do a force refresh, simply add ?ver=1.1 to the CSS import at the head of the file. This to the browser is a different file, but you only need to change the import, not the actual location or name of the file.

e.g:

<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

becomes

<link href="assets/css/style.css?ver=1.1" rel="stylesheet" type="text/css" />

Works great for javascript files also.