Tag: ApplicationCache

Debuggin html5 offline application

There are amazing features of html5 and one of them is offline application using creating manifest file.
using manifest attribute in html tag makes your web page accessible offline.

 <html manifest="cache.manifest">
 </html>

content of cache.manfiest file looks like

CACHE MANIFEST
# rev 2.0

CACHE:
html5_appcache.html
image.jpg

NETWORK:
*

FALLBACK
/index.html /offline.html

where all resource under cache will get cache locally and served locally when application is offline and all resources under network will require internet connection when they requested by browser.
According to above example the resource html file and jpg file will get cached and served offline.This is great feature however the pain is to debug the offline application.

I have found one article from here http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/

which create and binds events on each applicationCache object and writing in log file which goes like as below.
By putting following code in debugging mode you can easily find out what is going on with offline resource and how they get requested on offline mode.

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);

there are other resource you can follow to gain more understanding about accessing html5 website offline
here are:
http://diveintohtml5.info/offline.html
http://www.w3schools.com/html/html5_app_cache.asp
Manifest file validator
Manifest file validator
Hope you find this post useful. Happy blogging.