Force browser to clear cache

Question

Is there a way I can put some code on my page so when someone visits a site  it clears the browser cache  so they can view the changes   Languages used  ASP NET  VB NET  and of course HTML  CSS  and jQuery

User · Answer

If you are a Wordpress developer I have some great news for you.

Just search for, install and activate the Wordpress plugin called: reBusted.

No configuration is necessary.

It will automatically force cache refresh if the content has been updated and it solves this issue completely and reliably. Tested and used on hundreds of clients Wordpress sites – works perfectly everywhere.

Cannot recommend it enough.

If you use Wordpress, this is by far your best option and most elegant resolution for this issue.

Enjoy!

User · Answer

Not sure if that might really help you but that s how caching should work on any browser  When the browser request a file  it should always send a request to the server unless there is a  offline  mode  The server will read some parameters like date modified or etags    The server will return a 304 error response for NOT MODIFIED and the browser will have to use its cache  If the etag doesn t validate on server side or the modified date is below the current modified date  the server should return the new content with the new modified date or etags or both    If there is no caching data sent to the browser  I guess the behavior is undetermined  the browser may or may not cache file that don t tell how they are cached  If you set caching parameters in the response it will cache your files correctly and the server then may choose to return a 304 error  or the new content    This is how it should be done  Using random params or version number in urls is more like a hack than anything    http   www checkupdown com status E304 html http   en wikipedia org wiki HTTP ETag http   www xpertdeveloper com 2011 03 last-modified-header-vs-expire-header-vs-etag   After reading I saw that there is also a expire date  If you have problem  it might be that you have a expire date set up  In other words  when the browser will cache your file  since it has a expiry date  it shouldn t have to request it again before that date  In other words  it will never ask the file to the server and will never receive a 304 not modified  It will simply use the cache until the expiry date is reached or cache is cleared   So that is my guess  you have some sort of expiry date and you should use last-modified etags or a mix of it all and make sure that there is no expire date    If people tends to refresh a lot and the file doesn t get changed a lot  then it might be wise to set a big expiry date    My 2 cents

User · Answer

I had similiar problem and this is how I solved it    In index html file I ve added manifest    lt html manifest  cache manifest  gt   In  lt head gt  section included script updating the cache    lt script type  text javascript  src  update cache js  gt  lt  script gt   In  lt body gt  section I ve inserted onload function    lt body onload  checkForUpdate    gt   In cache manifest I ve put all files I want to cache  It is important now that it works in my case  Apache  just by updating each time the  version  comment  It is also an option to name files with   ver 001  or something at the end of name but it s not needed  Changing just   version 1 01 triggers cache update event   CACHE MANIFEST   version 1 01 style css imgs logo png  all other files   It s important to include 1   2  and 3  points only in index html  Otherwise  GET http   foo bar resource ext net  ERR FAILED   occurs because every  child  file tries to cache the page while the page is already cached  In update cache js file I ve put this code   function checkForUpdate         if  window applicationCache    undefined  amp  amp  window applicationCache    null                window applicationCache addEventListener  updateready   updateApplication           function updateApplication event        if  window applicationCache status    4  return      window applicationCache removeEventListener  updateready   updateApplication       window applicationCache swapCache        window location reload         Now you just change files and in manifest you have to update version comment  Now visiting index html page will update the cache   The parts of solution aren t mine but I ve found them through internet and put together so that it works

User · Answer

A lot of answers are missing the point - most developers are well aware that turning off the cache is inefficient  However  there are many common circumstances where efficiency is unimportant and default cache behavior is badly broken   These include nested  iterative script testing  the big one   and broken third party software workarounds  None of the solutions given here are adequate to address such common scenarios  Most web browsers are far too aggressive caching and provide no sensible means to avoid these problems

User · Answer

In addition to setting Cache-control  no-cache  you should also set the Expires header to -1 if you would like the local copy to be refreshed each time  some versions of IE seem to require this    See HTTP Cache - check with the server  always sending If-Modified-Since

User · Answer

Here is the MDSN page on setting caching in ASP NET   Response Cache SetExpires DateTime Now AddSeconds 60   Response Cache SetCacheability HttpCacheability Public  Response Cache SetValidUntilExpires False  Response Cache VaryByParams  Category     True  If Response Cache VaryByParams  Category   Then         End If

User · Answer

For static resources right caching would be to use query parameters with value of each deployment or file version  This will have effect of clearing cache after each deployment     Content css Site css version  FileVersionNumber    Here is ASP NET MVC example    lt link href   Url Content    Content Css Reset css   version  this GetType   Assembly GetName   Version  rel  stylesheet  type  text css    gt    Don t forget to update assembly version

User · Answer

Not as such  One method is to send the appropriate headers when delivering content to force the browser to reload   Making sure a web page is not cached  across all browsers   If your search for  cache header  or something similar here on SO  you ll find ASP NET specific examples   Another  less clean but sometimes only way if you can t control the headers on server side  is adding a random GET parameter to the resource that is being called   myimage gif random 1923849839

User · Answer

If this is about  css and  js changes  one way is to to  cache busting  is by appending something like   versionNo  to the file name for each release   For example     script 1 0 css    This is the URL for release 1 0 script 1 1 css    This is the URL for release 1 1 script 1 2 css    etc    Or alternatively do it after the file name   script css v 1 0    This is the URL for release 1 0 script css v 1 1    This is the URL for release 1 1 script css v 1 2    etc    You can check out this link to see how it could work

User · Answer

Force browsers to clear cache or reload correct data  I have tried most of the solutions described in stackoverflow  some work  but after a little while  it does cache eventually and display the previous loaded script or file  Is there another way that would clear the cache  css  js  etc  and actually work on all browsers   I found so far that specific resources can be reloaded individually if you change the date and time on your files on the server   Clearing cache  is not as easy as it should be  Instead of clearing cache on my browsers  I realized that  touching  the server files cached will actually change the date and time of the source file cached on the server  Tested on Edge  Chrome and Firefox  and most browsers will automatically download the most current fresh copy of whats on your server  code  graphics any multimedia too   I suggest you just copy the most current scripts on the server and  do the touch thing  solution before your program runs  so it will change the date of all your problem files to a most current date and time  then it downloads a fresh copy to your browser    lt  php    touch   www sample file1 css       touch   www sample file2 js      gt    then     the rest of your program     It took me some time to resolve this issue  as many browsers act differently to different commands  but they all check time of files and compare to your downloaded copy in your browser  if different date and time  will do the refresh   If you can t go the supposed right way  there is always another usable and better solution to it  Best Regards and happy camping  By the way touch    or alternatives work in many programming languages inclusive in javascript bash sh php and you can include or call them in html

User · Answer

lt meta http-equiv  pragma  content  no-cache    gt    Also see https   stackoverflow com questions 126772 how-to-force-a-web-browser-not-to-cache-images

User · Answer

Update 2012  This is an old question but I think it needs a more up to date answer because now there is a way to have more control of website caching   In Offline Web Applications  which is really any HTML5 website  applicationCache swapCache   can be used to update the cached version of your website without the need for manually reloading the page   This is a code example from the Beginner s Guide to Using the Application Cache on HTML5 Rocks explaining how to update users to the newest version of your site      Check if a new cache is available on page load  window addEventListener  load   function e       window applicationCache addEventListener  updateready   function e        if  window applicationCache status    window applicationCache UPDATEREADY             Browser downloaded a new app cache           Swap it in and reload the page to get the new hotness        window applicationCache swapCache          if  confirm  A new version of this site is available  Load it               window location reload                  else            Manifest didn t changed  Nothing new to server             false       false     See also Using the application cache on Mozilla Developer Network for more info   Update 2016  Things change quickly on the Web  This question was asked in 2009 and in 2012 I posted an update about a new way to handle the problem described in the question  Another 4 years passed and now it seems that it is already deprecated  Thanks to cgaldiolo for pointing it out in the comments   Currently  as of July 2016  the HTML Standard  Section 7 9  Offline Web applications includes a deprecation warning      This feature is in the process of being removed from the Web platform     This is a long process that takes many years   Using any of the   offline Web application features at this time is highly discouraged    Use service workers instead    So does Using the application cache on Mozilla Developer Network that I referenced in 2012      Deprecated This feature has been removed from the Web standards    Though some browsers may still support it  it is in the process of   being dropped  Do not use it in old or new projects  Pages or Web apps   using it may break at any time    See also Bug 1204581 - Add a deprecation notice for AppCache if service worker fetch interception is enabled

User · Answer

Updating the URL to the following works for me    custom js id 1  By adding a unique number after  id  and incrementing it for new changes  users do not have to press CTRL   F5 to refresh the cache  Alternatively  you can append hash or string version of the current time or Epoch after  id   Something like  id 1520606295

User · Answer

Look into the cache-control and the expires META Tag    lt META HTTP-EQUIV  CACHE-CONTROL  CONTENT  NO-CACHE  gt   lt META HTTP-EQUIV  EXPIRES  CONTENT  Mon  22 Jul 2002 11 12 01 GMT  gt   Another common practices is to append constantly-changing strings to the end of the requested files  For instance    lt script type  text javascript  src  main js v 12392823  gt  lt  script gt

User · Answer

I had a case where I would take photos of clients online and would need to update the div if a photo is changed  Browser was still showing the old photo  So I used the hack of calling a random GET variable  which would be unique every time  Here it is if it could help anybody   lt img src   photos userid 73 jpg random  lt  php echo rand     gt         EDIT As pointed out by others  following is much more efficient solution since it will reload images only when they are changed  identifying this change by the file size    lt img src   photos userid 73 jpg modified  lt   filemtime   photos userid 73 jpg    gt

User · Answer

I implemented this simple solution that works for me  not yet on production environment    function verificarNovaVersio         var sVersio   localStorage  gcf versio   location pathname      v00 0 0000         ajax           url     versio txt            dataType   text            cache  false           contentType  false           processData  false           type   post          done function sVersioFitxer            console log  Versi   App     sVersioFitxer     Versi   Cach       sVersio           if  sVersio  lt   sVersioFitxer     v00 0 0000                  localStorage  gcf versio   location pathname    sVersioFitxer              location reload true                         I ve a little file located where the html are    versio txt    v00 5 0014   This function is called in all of my pages  so when loading it checks if the localStorage s version value is lower than the current version and does a   location reload true        to force reload from server instead from cache    obviously  instead of localStorage you can use cookies or other persistent client storage   I opted for this solution for its simplicity  because only mantaining a single file  versio txt  will force the full site to reload   The queryString method is hard to implement and is also cached  if you change from v1 1 to a previous version will load from cache  then it means that the cache is not flushed  keeping all previous versions at cache    I m a little newbie and I d apreciate your professional check  amp  review to ensure my method is a good approach   Hope it helps

User · Answer

There is one trick that can be used The trick is to append a parameter string to the file name in the script tag and change it when you file changes    lt script src  myfile js version 1 0 0  gt  lt  script gt   The browser interprets the whole string as the file path even though what comes after the     are parameters  So wat happens now is that next time when you update your file just change the number in the script tag on your website  Example  lt script src  myfile js version 1 0 1  gt  lt  script gt   and each users browser will see the file has changed and grab a new copy

User · Answer

Do you want to clear the cache  or just make sure your current  changed   page is not cached   If the latter  it should be as simple as    lt META HTTP-EQUIV  Pragma  CONTENT  no-cache  gt

[html] Force browser to clear cache

Examples related to html

Examples related to caching

Examples related to browser

Examples related to meta-tags