Facebook Twitter Gplus LinkedIn RSS
Home Manifest Cache Statuses

Cache Statuses

Whenever you visit a page, your browser will try to update the cache.  To do this, it checks your last copy of the manifest and compares it to the current manifest online.  If the new manifest is even one byte different, the manifest file will begin firing events on the ApplicationCache object in order to update your files.  There are several different events, and each has a pretty self explanatory name when it comes to what the event is listening for.  A list of events and their meanings(as paraphrased from the W3 HTML5 specification) is as follows:

checking Always fired first, checks to see if the manifest is different(which results in the need to update), or if it’s attempting to download the manifest for the first time.
noupdate There is no update, since the manifest hasn’t changed.
downloading The user has found a new manifest and is now going to begin attempting to download it.
progress The files are currently being downloaded.
cached The files listed in the manifest have been downloaded, and the app is successfully cached.
updateready The files are now downloaded, and the script can use the swapCache() function to switch to the new cache.
obsolete The manifest is either a 404 or 410 page, so the app cache is going to be deleted. This basically means it wasn’t found.
error Some form of an error has occurred, and the caching wasn’t successful.

As noted above, in order for your browser to notice that it needs to fetch the new manifest file as the source of what files to download and cache, the new manifest needs to be at least one byte different than the previously used manifest. This can be done by changing anything, even a comment, to something else, in order for the browser to recognize the difference. This is something to keep in mind if you implement the offline functionality while you are developing your web application, since every time you update any file listed in the CACHE MANIFEST section, you will need to change your manifest file in some way so that your browser will fire a re-downloading process.

Thanks to Jonathan Stark, I was able to get a pretty good grasp of how the manifest statuses work during development. Below is some javascript code that you can place into your main HTML page that will console.log() the online status, current cache status, and whether or not you are cached or have an error. I ended up placing a modified version of the code in a function in my javascript file which I called on document ready(using jQuery). Here’s the original code:

<script type="text/javascript">

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
var online, status, type, message;
online = (navigator.onLine) ? 'yes' : 'no';
status = cacheStatusValues[cache.status];
type = e.type;
message = 'online: ' + online;
message+= ', event: ' + type;
message+= ', status: ' + status;
if (type == 'error' && navigator.onLine) {
message+= ' (prolly a syntax error in manifest)';
}
console.log(message);
}

window.applicationCache.addEventListener(
'updateready',
function(){
window.applicationCache.swapCache();
console.log('swap cache has been called');
},
false
);

setInterval(function(){cache.update()}, 10000);

</script>

src: Jonathan Stark’s blog

With this function, you can debug your manifest file to check whether or not it’s playing nice with your browser. One error that you might get(although hopefully not if you’ve followed all the instructions so far!) is the INVALID_STATE_ERR: DOM Exception 11 error. This refers to the setInterval() section of the code, which fetches and compares the manifest files every 10 seconds. If you receive this error, it’s because your manifest never cached anything successfully in the first place, so when the function is trying to re-compare manifest files, it has no way of doing so since nothing was cached. Check to make sure you’ve configured the manifest MIME type correctly in your server, change at least one byte in your manifest file, and then refresh the page.. This should solve your problem.

One last thing. You might notice that this function calls the swapCache() function whenever the status is updateready. This function swaps the caches when a new manifest file is found, allowing the web app to use the newly downloaded and cached files. However, you’ll have to refresh the page before the new files are used.

Well, that’s about the last bit of information you will need regarding the manifest file and how it works in conjunction with your offline web application. Click on to read the next portion of the guide regarding the specific HTML tags you will need in order to hit the ground running, and how implementing those can help make your offline web application look and feel even more like a native application. Next ->

 

One Response

  1. Mauricio Soares

    hello! i’m reading a book called build web apps for iphone with html/javascript and i’m stuck in an error…

    basically, i incremented the offline style for my webapp… i didnt create the htaccess file cause in the book said there was another way…

    in the html tag i used

    and in my manifest.php is like:
    IsFile() &&
    $file != “./manifest.php” &&
    substr($file->getFilename(), 0, 1) != “.”)
    {
    echo $file . “\n”;
    $hashes .= md5_file($file);
    }
    }
    echo “# Hash: ” . md5($hashes) . “\n”;
    ?>

    so that way i get all folders dinamically. my problem is:

    everytime when i load the page for the first time, it downloads all the necessary folders files for my application to run offline. and loads the page normally, with all funcionalities working

    but whenever i RELOAD the page, it simply cant get my files.js and .css..
    i’m debugging using safari… and i have no ideia of why is this happening, and in the book dont mention that.

    do you know any possibility of why is that happening???

    (sorry for the bad english, i’m from brazil)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>