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.

Advertisements
About

hi there, I am software engineer, working in e-commerce company and passionate about all thing digital. On this blog, I share my experiments with different technology.

Tagged with: , , , , ,
Posted in html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What people say about post?
seo hizmeti on Awesome wordpress ecommerce…

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 38 other followers

%d bloggers like this: