• We Code
  • We Design
  • We Develope
  • We Write
  • We Share


Tuesday, January 21, 2014

Offline App Capability In HTML5

HTML5 Offline Apps
Html5 Offline Apps
Offline app capability in HTML5 bought all the power to store data offline .When we talks about offline people ask offline means without internet ? First take the term ONLINE first . online and Web are kind of synonyms.
So why the term Offline is getting use for web technology . The offline here means run the webpage from file:// uri. But hang on it does not mean the web page will never get connected to server.The term offline will make more sense if we will take it like the web page could survive at the server downtime.There are various apps who connects the cloud server and survives at downtime. Gmail Mobile app and gmail offline are examples
In the Older time devs used the technique like cookies,Plugin Based Storage for storage. But the era of HTML5 bought more power to the client side for storage.
 . You can check the application for online/offline using navigator.onLine(). And it works everywhere in latest browser even in IE also.
You can also listen the events for it using.

document.body.addEventListener("online", function () {console.log("Now you are online !!!")}
document.body.addEventListener("offline", function () {console.log("Now you are offline !!!!")}

HTML5 bought many features to make application offline .Few Technique to make app offline
1.Application Cache : CACHE MANIFEST file make you able to store the resourse files locally for offline usage.Make a reference of manifest file inside <html> tag.
<html manifest="MyManifest.appcache">.

The mime type of the manifest must be text/cache-manifest.Manifest file is a simple text file . It looks like this


2.Web Storage : Web storage have two sub category. One is persistent called local storage . In local storage we can set a value to a key using localstorage.key="value"
And we can retrieve it later . The other category of web storage is session storage we use it similar but the data gets lost once the browser gets closed .
We can just match the strings using the web storage.Simplicity is for calling the API is good part of this and bad performance is bad part of it.

3.Web SQL Database : Web sql database is a relational database .It has all the power of storing the complex relational database. it is well supported in all mobile browser the performance is really good .It has robustness. And the best part it is really easy to maintain.One have good command over sql can play with it with lot of ease.

4.Indexed database : Indexed Database is a collection of  stores of objects . Where you can keep the objects for future use.In indexed Db you don't need to define a schema before like  web sql database . In Index db you can have multiple databases and in each database you can have multiple stores.Indexed Database have good search performance and have robustness


Post a Comment