How to check if browser caching disabled

Question

Is there a way in either Javascript or C# to tell if the browser that someone is using has disabled caching of static content?

I need to be able to test whether or not the browser is optimized for caching.

Answer 1

Another approach that involves client and server.

1. Make a call to a page/endpoint, which will set a random unique id in response. Set the cache header for this page/endpoint
2. Make the same call again, which will set a different unique number
3. If the the numbers match it is coming from cache or it is coming from server

Answer 2

UPDATE

I did a bit more investigation of the problem and you can find more detailed answer in my recent post Note, the solution described below (initially) is not cross browser solution.

Not sure if it helps, but you can try the following trick: 1. Add some resource to you page, let's say it will be javascript file cachedetect.js. 2. The server should generate cachedetect.js each time someone request it. And it should contain cache-related headers in response, i.e. if browser's cache is enabled the resource should be cached for long time. Each cachedetect.js should look like this:

var version = [incrementally generated number here];
var cacheEnabled; //will contain the result of our check
var cloneCallback;//function which will compare versions from two javascript files

function isCacheEnabled(){
   if(!window.cloneCallback){
       var currentVersion = version;//cache current version of the file
       // request the same cachedetect.js by adding <script> tag dynamically to <header>
       var head = document.getElementsByTagName("head")[0];
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src = "cachedetect.js";
       // newly loaded cachedetect.js will execute the same function isCacheEnabled, so we need to prevent it from loading the script for third time by checking for cloneCallback existence       
       cloneCallback = function(){
           // once file will be loaded, version variable will contain different from currentVersion value in case when cache is disabled 
           window.cacheEnabled = currentVersion == window.version;        
       };      
       head.appendChild(script);

    }  else {
        window.cloneCallback();
    }   
}

isCacheEnabled();

After that you can simply check for cacheEnabled === true or cacheEnabled === false after some period of time.

Answer 3

I believe this should work: http://jsfiddle.net/pseudosavant/U2hdy/

Basically you have to preload a file twice and check how long it took. The second time should take less than 10ms (in my own testing). You will want to make sure the file you are testing is sufficiently large that it takes at bit to download, it doesn't have to be huge though.

var preloadFile = function(url){
    var start = +new Date();
    var file = document.createElement("img");
    file.src = url;
    return +new Date() - start;
};

var testFile = "http://upload.wikimedia.org/wikipedia/en/thumb/d/d2/Mozilla_logo.svg/2000px-Mozilla_logo.svg.png"
var timing = [];
timing.push(preloadFile(testFile));
timing.push(preloadFile(testFile));

caching = (timing[1] < 10); // Timing[1] should be less than 10ms if caching is enabled