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.

Monitory

A nice solution or workaround to "clear cache" can be found here: https://mcmap.net/q/93489/-how-to-programmatically-empty-browser-cache – Unlay

In 2023, you can use the Clear-Site-Data HTTP header; see this answer for details. – Collettecolletti

Answer 1

If this is about .css and .js changes, then one way is "cache busting" 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 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 this link to see how it could work.

Mastermind

This is a fairly good solution, and can even be automated by your build system (and should be). Stackoverflow, for example, uses this approach. – Sternforemost

SO is using GET arguments now. – Dispensary

Better yet is to keep the filename as-is, but append the version number as a querystring parameter, i.e. script.js?v=1.2. (Or if you're not keeping track of versions, just use the file last-modified time, which is even easier to do). Not sure if that's what the previous commenter meant! – Hillaryhillbilly

How does everyone do this with version control? Seems like a real pain. – Nodical

@Nodical Version-control wise you could render the <link /> tags dynamically and inject the application's version as a query string parameter. Alternatively, some CMSes will have a "client resources version" as a CMS-wide setting that is appended - the site's admin can manually increase that version nr, and updates of the CMS could also automatically update it. Bottom line: you need to render the file URLs dynamically. – Ribeiro

@Doin, I briefly tested that technique, and it seemed to prevent Firefox and Chrome from caching the files altogether. – Jospeh

@Jospeh It shouldn't; it's a very widely used technique, so I can say so with some confidence. How did you test this? Note that (a) the cache record includes the querystring parameter, so requests for "script.js?v=2" and "script.js" will be treated as entirely distinct (one won't cache for the other). And (b) the headers your server supplies with the files can prevent caching: Check what the response headers are. Perhaps it's set up to cache specific files (e.g. "script.js") but not the same file with a querystring attached. Or perhaps caching is disabled for all URLS with querystrings?... – Hillaryhillbilly

@Doin, I tested this with an ASP.NET website running on IIS 7.5 serving a static PNG image file. I used Fiddler4 and, from memory, found that the server always returned 200 when the query string was present, whereas otherwise it would return 304 with Firefox and Chrome. IE was fine. It's also possible that the problem was with IIS or ASP.NET, so I might be wrong. – Jospeh

@Mastermind What about html files – Shea

@ShwetaGulati - see Sampson's answer about cache-control and expires headers as these will work for html files. – Mastermind

Is it needed to write whole js and css versions? or just put put the latest code? – Spectroscopy

If you add the version numbers it ensures that the browser won't cache the resources. If version 1, 1.1 and 1.2 of a file are named the same thing then the browser may be serving an older version. – Mastermind

Do we have to add this version to every single custom .css file in our project? Or can it go in a single place (ie add it once)? – Unbuild

I have a question: Can the md5 file's checksum be the cache key? Like this: <script src="myfile.js?v=38128xs8128e8ads81d2"></script> – Christyna

Yeah that would be a viable solution as it would change whenever the file changes – Mastermind

Answer 2

Look into the cache-control and the expires META Tag.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

Another common practices is to append constantly-changing strings to the end of the requested files. For instance:

<script type="text/javascript" src="main.js?v=12392823"></script>

Eddi

This won't help much in the case that it's already cached—since its cached, the server won't be queried, and thus can't responsd with no-cache. Also, that meta tag really shouldn't be used, as the note says, it'll break with web caches. – Sternforemost

I am a beginner but I noticed the following the MDN Cache-Control doc: "If you mean to not store the response in any cache, use no-store instead. This directive is not effective in preventing caches from storing your response." But when I searched this page for "no-store", it seems nobody mentioned it. I must be misunderstanding something, what is it? – Abut

Answer 3

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.

Bannockburn

Does this imply you need to use and maintain a cache manifest file? – Jospeh

Warning: the Application Cache (AppCache) interface has been deprecated – Ruhr

the main problem ive seen on this topic is when the device that the viewer is using keeps using the cached versions because the internal memory of the users device is getting full. it seems to get stuck on a cached version of the page and wont update any elements on the document. does this only happen in chrome?? thats the only browser iver experienced it on. – Marra

2017: Use Service Workers. – Albumose

Service Workers on Mozilla MDN allows finer control and management of the cache. – Hostel

@AY-杨志强 Use a service worker. It can literally control the browser settings (Not literally). – Freeliving

2023: use the Clear-Site-Data HTTP header; see this answer for details. – Collettecolletti

Answer 4

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

Anaesthesia

It's really better to properly version the files. This is a pretty big waste of bandwidth, and, probably more importantly, slows your site down a lot. – Sternforemost

That really depends on the situation, doesn't it? If you are programming a CMS and need to make sure all changed resources are properly updated, there sometimes is no way around one of these two options. – Anaesthesia

Solutions like this should be voted into the negative. It's up to us to keep the CO2 footprint of the internet as low as possible. – Leftwich

as @Sternforemost said, this is completely waste of bandwidth and also slows down page loading, because in each refresh you force the client to load the resource again, even if it's not changed, better way is to hash the file and send it as the query parameter, so it just change when file changes. – Ardatharde

Answer 5

I had similiar problem and this is how I solved it:

1. In index.html file I've added manifest:

   <html manifest="cache.manifest">
   

2. In <head> section included script updating the cache:

   <script type="text/javascript" src="update_cache.js"></script>
   

3. In <body> section I've inserted onload function:

   <body onload="checkForUpdate()">
   

4. 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.

5. In update_cache.js file I've put this code:

   function checkForUpdate()
   {
       if (window.applicationCache != undefined && 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.

Ingraham

Can I know where CACHE.MANIFEST is written. – Shea

Shweta Gulati The manifest file should be in same folder as "index" file. What are the times it doesn't work? – Ingraham

For my change in html files. – Shea

@ShwetaGulati Yes, cache doesn't detect changes in html files - that's why You have to update version number in manifest file, because it is the one which is being checked for changes. It's really hard to help You, because I don't know details. Please, tell me if You have put all desired to be cached files in manifest? The path's should be relative to the manifest file. You can give me adress of Your website and I can tell what is the matter :) – Ingraham

if i want to cache all files what should i mention in cache manisfest file . My requirement is to reload files whenever their update is available. – Shea

the onw situation i have encountered is change in index.js was not reflected but change in other js files was reflected. I have chache manifest empty. – Shea

@ShwetaGulati It's because browser caches some files automaticaly to make loading the page faster. It's default behavior and is dependednt on browser only so You can't set it in any way. Especially js files are on the scope of browser, because they are used usually on all pages on website so it's wise to cache them. There is no other way than write all file's names in manifest file to cache all the files. If You find any, tell me, because I need it too :) – Ingraham

please help me with the path of files the way they should be mentioned in cache manifest.mf my folder structure is WebContent>external>folderOne>OneOne.js WebContent>external>folderOne>OneTwo.js WebContent>external>folderOne>OneThree.js WebContent>external>folderTwo>TwoOne.js WebContent>external>folderTwo>TwoTwo.js WebContent>METAINF>CACHE MANIFEST.MF Now what should be the path of all js files as mentioned in the problem relative to cache manifest mf file and should i also write cache_update.js file in cache manifest.mf – Shea

We can <a href="chat.stackoverflow.com/rooms/125565/…"> continue discussion in chat </a> – Shea

The absolute path to your files doesn't matter. Relative path from adress matters 'cause browser sends the request for files. F.ex: I have domain example.com and it's on serwer names.com. My space on it is example.names.com. So I join my example.com domain to my server space example.names.com as redirect. To do that I need to set folder as a goal of this redirect. So If I want to have several sites on example.names.com I create folder "name1", set redirect to it and put all my files inside. Paths are counted from here. If I have name1\scripts\test.js in manifest file I write scripts\test.js. – Ingraham

can we please continue on chat : chat.stackoverflow.com/rooms/125565/… – Shea

@WojtekMazurek i am facing similar issue. i changed some html text content but its not reflecting for users. Can i find the your full chat which you started above. May be i find some solution. – Aldos

For future reference, browsers have removed/depricated/disabled this. – Illdefined

Answer 6

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.

<link href="@Url.Content("~/Content/Css/Reset.css")[email protected]().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

Don't forget to update assembly version.

Phosphorylase

Thanks for this answer but how to do that when we add resources in the BundleTable please ? – Featherhead

In my case, this was returning "0.0.0.0" as the version. To get the version of the dll of your MVC app, use this instead: [email protected]().Assembly.GetName().Version – Decurved

I found that this prevents Firefox and Chrome from caching the content altogether. – Jospeh

Answer 7

2023 onward

At the time of writing, most mainstream web browsers (except Safari) support the Clear-Site-Data HTTP header [MDN reference].

To instruct a client web browser to clear the browser cache for the website's domain and subdomains, set the following header in the HTTP response from the server:

Clear-Site-Data: "cache"

Alternatively, the following header may be better supported across browsers, but it clears other website data, such as localStorage and cookies, in addition to the browser cache.

Clear-Site-Data: "*"

Collettecolletti

This is no longer supported in FF v94+ ;_; – Chacon

Answer 8

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

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

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:

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

Tenstrike

This is not elegant at all, it would make the site reload the image every time wasting a lot of time downloading resources, a better solution would be to use filesize instead of a random number, this will make the cache only revalidate when the file actually changes – Kktp

Or a hash of the image bytes – Spandau

It all depends upon a user's requirements. For large number of photos scenario would be different than a few photos. Checking file size would save bandwidth, but would also add extra processing, potentially slowing down page load. In my case where pictures were changing quite frequently and it was critical business decision that user would get the most up-to-date ones, this was a perfect solution. – Tenstrike

You could make it a static value in configuration even, this is by no means an ideal approach. – Gullible

<img src="/photos/userid_73.jpg?modified=<?= filemtime("/photos/userid_73.jpg") ?>" would be much more useful! – Mckay

Answer 9

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.

Sherrell

Answer 10

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

Greenhorn

Answer 11

<meta http-equiv="pragma" content="no-cache" />

Also see https://mcmap.net/q/47915/-how-to-force-a-web-browser-not-to-cache-images

Lucielucien

Answer 12

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

Needlecraft

Answer 13

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!

Tenorrhaphy

Answer 14

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 < (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 & review to ensure my method is a good approach.

Hope it helps.

Astronomical

Answer 15

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.

<script src="myfile.js?version=1.0.0"></script>

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 <script src="myfile.js?version=1.0.1"></script>) and each users browser will see the file has changed and grab a new copy.

Overlying

Answer 16

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

Lambent

Answer 17

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:

<?php
   touch('/www/sample/file1.css');
   touch('/www/sample/file2.js');
?>

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.

Transnational

if the file is modified the timestamp is already changed anyway, so there is no benefit of forcing it again. – Mckay

The touch command does not change the file at all. It changes the attribute of date and time, converting it to a newer version fooling the browser to download it as new copy. – Transnational

Answer 18

For webpack users:-

I added time with chunkhash in my webpack config. This solved my problem of invalidating cache on each deployment. Also we need to take care that index.html/ asset.manifest is not cached both in your CDN or browser. Config of chunk name in webpack config will look like this:-

fileName: [chunkhash]-${Date.now()}.js

or If you are using contenthash then

fileName: [contenthash]-${Date.now()}.js

Quieten

Please format your answer, for a better visualization. We use markdown. You can edit your answer. – Allen

Answer 19

This is the simple solution I used to solve in one of my applications using PHP.

All JS and CSS files are placed in a folder with version name. Example : "1.0.01"

root\1.0.01\JS
root\1.0.01\CSS

Created a Helper and Defined the version Number there

<?php
function system_version()
{
    return '1.0.07';
}

And Linked JS and SCC Files like below

<script src="<?= base_url(); ?>/<?= system_version();?>/js/generators.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>/<?= system_version(); ?>/css/view-checklist.css" />

Whenever I make changes to any JS or CSS file, I change the System Verson in Helper and rename the folder and deploy it.

Loraleeloralie

Answer 20

I had the same problem, all i did was change the file names which are linked to my index.html file and then went into the index.html file and updated their names, not the best practice but if it works it works. The browser sees them as new files so they get redownloaded on to the users device.

example: I want to update a css file, its named styles.css, change it to styless.css

Go into index.html and update , and change it to

Jory

Answer 21

in case interested I've found my solution to get browsers refreshing .css and .js in the context of .NET MVC (.net fw 4.8) and the use of bundles. I wanted to make browsers refresh cached files only after a new assembly is deployed.

Buinding on Paulius Zaliaduonis response, my solution is as follows:

1. store your application base url in the web config app settings (the HttpContext is not yet available at runtime during the RegisterBundle...), then make this parameter changing according to the configuration (debug, staging, release...) by the xml transform
2. In BundleConfig RegisterBundles get the assembly version by the means of reflection, and...
3. ...change the default tag format of both styles and scripts so that the bundling system generates link and script tags appending a query string parameter on them.

Here is the code

public static void RegisterBundles(BundleCollection bundles)
{
   string baseUrl = system.Configuration.ConfigurationManager.AppSettings["by.app.base.url"].ToString();
       
   string assemblyVersion = Assembly.GetExecutingAssembly().GetName().Version.ToString();
   
   Styles.DefaultTagFormat = $"<link href='{baseUrl}{{0}}?v={assemblyVersion}' rel='stylesheet'/>";
   Scripts.DefaultTagFormat = $"<script src='{baseUrl}{{0}}?v={assemblyVersion}'></script>";
}

You'll get tags like

<script src="https://example.org/myscriptfilepath/script.js?v={myassemblyversion}"></script>

you just need to remember to to build a new version before deploying.

Ciao

Zebedee

Answer 22

in workers js

self.addEventListener('message', function(event){
    msg = event.data;
    if (msg==='clearCache') {
        console.log('Starting to cache clean.');
        deleteCacheAndMetadata("WebFontFiles"); 
        deleteCacheAndMetadata("Static");
        deleteCacheAndMetadata("WebFontCss");
        deleteCacheAndMetadata("Assets");
        deleteCacheAndMetadata("Tweets");
        console.log('Cache Cleaned');
    }
});

async function deleteCacheAndMetadata(cacheName) {
  await caches.delete(cacheName);
  const cacheExpiration = new CacheExpiration(cacheName);
  cacheExpiration.delete();
}

then add your this js variable in your header code.`

<script>
var updateRequire = false; // or true
</script>

at last add this footer code

window.addEventListener('load', function(e) {
 if (updateRequire) {
   navigator.serviceWorker.controller.postMessage('clearCache');
   if (confirm("Application updated! Please confirm to reload page!")) window.location.reload();
 }
},false);

Zygo

Answer 23

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

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Kiley

I read about this approach recently in a Chrome posting, and I only found consistent results on a handful of live servers, localhost and Windows fileshares... with Firefox 3.6. – Nichani