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

Question

For my site I have the following htaccess rules     BEGIN Gzip  lt IfModule mod deflate c gt  AddOutputFilterByType DEFLATE text text text html text plain text xml text css application x-javascript application javascript  lt  IfModule gt    END Gzip    BEGIN EXPIRES  lt IfModule mod expires c gt      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   lt  IfModule gt    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

User · Answer

You can tell the browser never cache your site by pasting following code in the header

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

And to prevent js, css cache, you could use tool to minify and obfuscate the scripts which should generate a random file name every time. That would force the browser to reload them from server too.

Hopefully, that helps.

User · Answer

Change the name of the  CSS file  Load the page and then change the file again in the original name it works for me

User · Answer

The most straight forward is to add filetime to the request  eg   myfile txt 2014-10-30-13 12 33  versioning by date

User · Answer

This worked for me   look for this       DirectoryIndex index php   replace with this       DirectoryIndex something php index php   Upload and refresh page  You will get a page error  just change it back to       DirectoryIndex index php   reupload and refresh page again  I checked this on all of my devices and  it worked

User · Answer

Use the mod rewrite with R 301 - where you use a incremental version number  To achieve  gt  css ver file css   gt  css file css v ver  RewriteRule  css   0-9    file css  css file css v  1  R 301 L QSA   so example  css 10 file css   gt  css file css v 10 Same can be applied to js  files  Increment ver to force update  301 forces re-cache I have tested this across Chrome  Firefox  Opera etc PS  the  v ver is just for readability  this does not cause the refresh

User · Answer

Now the following wont help you with files that are already cached  but moving forward  you can use the following to easily force a request to get something new  without changing the actual filename     Rewrite all requests for JS and CSS files to files of the same name  without   any numbers in them  This lets the JS and CSS be force out of cache easily   by putting a number at the end of the filename   e g  a request for static js site-52 js will get the file static js site js instead   lt IfModule mod rewrite c gt    RewriteEngine on   RewriteRule  static  js css    a-z   -  0-9      js css    site  1  2  4  R 302 NC L   lt  IfModule gt    Of course  the higher up in your folder structure you do this type of approach   the more you kick things out of cache with a simple change   So for example  if you store the entire css and javascript of your site in one main folder   assets js  assets css  assets       Then you can could start referencing it as  assets-XXX  in your html  and use a rule like so to kick all assets content out of cache    lt IfModule mod rewrite c gt    RewriteEngine on   RewriteRule  assets-  a-z0-9           2  R 302 NC L   lt  IfModule gt     Note that if you do go with this  after you have it working  change the 302 to a 301  and then caching will kick in  When it s a 302 it wont cache at the browser level because it s a temporary redirect  If you do it this way  then you could bump up the expiry default time to 30 days for all assets  since you can easily kick things out of cache by simply changing the folder name in the login page    lt IfModule mod expires c gt    ExpiresActive on   ExpiresDefault A2592000  lt  IfModule gt

User · Answer

In my case  I change a lot an specific JS file and I need it to be in its last version in all browsers where is being used    I do not have a specific version number for this file  so I simply hash the current date and time  hour and minute  and pass it as the version number    lt script src   js panel app js v    substr md5 date  Y-m-d Hi    10 18      gt  lt  script gt    I need it to be loaded every minute  but you can decide when it should be reloaded

User · Answer

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

User · Answer

Adding  random  numbers to URLs seems inelegant and expensive to me  It also spoils the URL of the pages  which can look like index html t 1614333283241 and btw users will have dozens of URLs cached for only one use  I think this kind of things is what  htaccess files are meant to solve at the server side  between your functional code an the users  I copy paste this code from here that allows filtering by file extension to force the browser not to cache them  If you want to return to normal behavior  just delete or comment it  Create or edit an  htaccess file on every folder you want to prevent caching  then paste this code changing file extensions to your needs  or even to match one individual file  If the file already exists on your host be cautious modifying what s in it   kudos to the link    DISABLE CACHING  lt IfModule mod headers c gt      Header set Cache-Control  quot no-cache  no-store  must-revalidate quot      Header set Pragma  quot no-cache quot      Header set Expires 0  lt  IfModule gt    lt FilesMatch  quot    css flv gif htm html ico jpe jpeg jpg js mp3 mp4 png pdf swf txt   quot  gt       lt IfModule mod expires c gt          ExpiresActive Off      lt  IfModule gt       lt IfModule mod headers c gt          FileETag None         Header unset ETag         Header unset Pragma         Header unset Cache-Control         Header unset Last-Modified         Header set Pragma  quot no-cache quot          Header set Cache-Control  quot max-age 0  no-cache  no-store  must-revalidate quot          Header set Expires  quot jue  1 Jan 1970 00 00 00 GMT quot       lt  IfModule gt   lt  FilesMatch gt

User · Answer

You can set  access plus 1 seconds  and that way it will refresh the next time the user enters the site  Keep the setting for one month

User · Answer

I got your problem     Although we can clear client browser cache completely but you can add some code to your application so that your recent changes reflect to client browser     In your  lt head gt     lt meta http-equiv  Cache-Control  content  no-cache    gt   lt meta http-equiv  Pragma  content  no-cache    gt   lt meta http-equiv  Expires  content  0    gt    Source  http   goo gl JojsO

User · Answer

You can not force the browsers to clear the cache   Your  html file seems to be re-loaded sooner as it expires after 10 days  What you have to do is to update your  html file and move all your files to a new folder such as version-2  or append a version identifier to each file such as mypicture-2 jpg  Then you reference these new files in your  html file and the browser will load them again because the location changed

User · Answer

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    lt link href  assets css style css  rel  stylesheet  type  text css    gt   becomes   lt link href  assets css style css ver 1 1  rel  stylesheet  type  text css    gt   Works great for javascript files also

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

Examples related to .htaccess

Examples related to caching

Examples related to gzip