HTML5 Offline Application

Question

I am trying to apply html5 offline application in a single html page. Is there any one line link API(like we use Google map link) by Google, Jquery or some other service provider which can easily enable offline cache? I am new to html5 and Javascript please help me out.

Thanks a lot.

Answer 1

in general the html5 offline capabilities are enabled by creating a manifest file that describes what resource in your app should be cached by the browser.

Read this

http://www.webreference.com/authoring/languages/html/HTML5-Application-Caching/

and also general google search for 'html5 manifest'.

I don't know how much benefit a one page application will benefit; your app needs to be able to function offline to gain a benefit. So for example, an email RIA might allow you to compose a message offline, and would store it in local storage until you are online and could send the message. similarly, it might load and store your emails when online so you could review your messages while offline...

Answer 2

It's not really as easy as a one-link inclusion. At bare minimum, you need a manifest file. This file tells your application what files should be cached. You can read more on that here. Here is a sample of a manifest files contents:

Manifest content

CACHE MANIFEST
/clock.css
/clock.js
/clock-face.jpg

You can also read this pretty good tutorial on manifest/offline applications, here.

Once you have a manifest file in place, you can use the following code to test your manifest and what is and isn't caching, cached, etc..

Debug code:

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

// Listeners for all possible events
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);

// Log every event to the console
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);
}

// Swap in newly downloaded files when update is ready
window.applicationCache.addEventListener(
    'updateready', 
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    }, 
    false
);

Hope this helps.