This post is a part 21 of Advanced JavaScript APIs post series.
In this article we will be discussing all about HTML5 offline application. Making your websites viewable offline is a good idea to keep users engaging. HTML5 offline capabilities is gained by applicationCache object and Manifest File. In this article we will discuss them in details.
How does offline websites work?
Offline applications allow browsers to store website resources in a cache and use them when web server is down or users internet connection is down.
Cache Manifest file
A website need to provide instructions to browser about which resources needs to be cached. This instructions can be provided using a manifest file. A manifest file can be anywhere in your web direction with any name and extension. But it must be served with text/cache.manifest MIME content type.
Manifest file should be submitted to web browser using manifest attribute of HTML tag.
The html page which points to the manifest file is automatically cached for offline viewing. There is no way to prevent it from getting cached. The resources(js, css, images etc) attached to the html page is not download so needed to be mentioned inside the mainfest file.
You should include the manifest attribute in all those html pages which you want to be cached. Or else URLs to those html pages can be provided inside the manifest file.
A manifest file contains four sections:
- Explicit section: Files listed below the “CACHE MANIFEST” directive are cached for offline viewing.
- Implicit section: Files listed below the “CACHE” directive are also cached for offline viewing.
- Network section: Files listed below the “NETWORK” directive are never cached and needs user to be online to access them.
- Fallback section: Alternative versions of resources are listed below the “FALLBACK” directive.
Caching instructions provided via the manifest file override the instructions provided via web caching headers.
This is an example of manifest file
#comments are written using '#'.
#Below line must be inserted.
CACHE MANIFEST
#cache the below resources for offline viewing.
CACHE:
web-worker.jpg
revel-scroll.jpg
#never cache the below resources. '*' indicates not to cache anything other than the one listed for caching. We can also provide a list of resources.
NETWORK:
*
#here if online.js is not available then offline.js is served to the user during online and offline browsing. If any other file fails to be loaded then offline.html is served because all files fall inside '/' catalog. Here offline.html and offline.js are cached. But online.js is not cached.
FALLBACK:
/ offline.html
online.js offline.js
#Below line must be inserted.
CACHE MANIFEST
#cache the below resources for offline viewing.
CACHE:
web-worker.jpg
revel-scroll.jpg
#never cache the below resources. '*' indicates not to cache anything other than the one listed for caching. We can also provide a list of resources.
NETWORK:
*
#here if online.js is not available then offline.js is served to the user during online and offline browsing. If any other file fails to be loaded then offline.html is served because all files fall inside '/' catalog. Here offline.html and offline.js are cached. But online.js is not cached.
FALLBACK:
/ offline.html
online.js offline.js
Resources cached via manifest file are also used during online viewing and therefore decreases the network round trip.
If you make any change to the manifest file, then browser will download all resources again and replaces old files with new files.
URLs inside the manifest file can point to any domain.
If the manifest itself returns a 404 or 410, the cache is deleted.
If any syntax error or resource loading error(404 or 410) occurs during execution of manifest file then the execution stops and old cache is used if present.
Remember that browsers have a limited cache size for every website. Size of cache is around 5MB.
applicationCache
window.applicationCache object is used to check cache status, programatically update cache, and handle events fired during caching.
We can check the current status of our website cache this way
var appCache = window.applicationCache;
switch (appCache.status) {
//no resources are cached for this website.
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
//The application cache is not currently in the process of being updated.
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
//The manifest is being fetched and checked for updates.
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
//Resources are being downloaded to be added to the cache, due to a changed resource manifest.
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
//There is a new version of the application cache available.
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
//The application cache group is now obsolete.
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
switch (appCache.status) {
//no resources are cached for this website.
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
//The application cache is not currently in the process of being updated.
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
//The manifest is being fetched and checked for updates.
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
//Resources are being downloaded to be added to the cache, due to a changed resource manifest.
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
//There is a new version of the application cache available.
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
//The application cache group is now obsolete.
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
You can also manually force the browser to check for updated manifest and swap the new cache
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}
appCache.update(); // Attempt to update the user's cache.
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}
There are many events triggered during manifest caching.
function handleCacheEvent(e) {
//if manifest returned not found status or any other error manifest execution error occurred.
}
function handleCacheError(e) {
alert('Error: Cache failed to update!');
};
// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);
//if manifest returned not found status or any other error manifest execution error occurred.
}
function handleCacheError(e) {
alert('Error: Cache failed to update!');
};
// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);
Conclusion
I provided a basic overview of offline website development. Leave comments if you have any questions about offline application development. Thanks for reading.
@narayanprusty
