Monday, 10 January 2011

HTML5: Offline SQL Database

HTML5: Offline SQL Database

HTML5 solves the problem of building offline apps by providing support for SQLite at the browser level. The main focus however is not merely to create offline apps, since the applications which don't require internet connection or desktop apps have been there in existence for decades and don't require to be migrated to browser level. The main purpose of this feature is to add offline flavor to the existing online apps!

Before HTML5 got introduced there were applications using Flash, Java Applets, Google Gears etc for making it accessible in the offline mode. But frankly speaking it was a pain for developers as well as users to deal with all kinds of plugin-based storage and/or use browser specific storage techniques.

Thanks to building it on top of SQLite as it is open-source and most of the application developers are very much familiar with the syntax!

Here are a few simple yet powerful code snippets:


//Create Database
documentManager.webdb.open = function() {
 var dbSize = 5 * 1024 * 1024; // 5MB
 documentManager.webdb.db = openDatabase("DOCUMENT_MASTER", "1.0", 
            "Document Manager", dbSize);
}


//Create Table
documentManager.webdb.createTable = function() {
 var db = documentManager.webdb.db;
 db.transaction(function(tx) {
  tx.executeSql("CREATE TABLE IF NOT EXISTS document_manager(
      ID INTEGER PRIMARY KEY ASC, doc_name TEXT, title TEXT, 
      doc_description TEXT, doc_category TEXT, 
      added_on DATETIME)", []);
 });
} 


//DB Transaction 
documentManager.webdb.addDocs = function(title,doc_description,doc_category) {
 var db = documentManager.webdb.db;
 db.transaction(function(tx){
 var addedOn = new Date();
 tx.executeSql("INSERT INTO document_manager(....,title, 
   doc_description, doc_category, added_on) VALUES (?,?,?,?,?,?,?,?)", 
    [...., title, doc_description, doc_category, addedOn],
     function() {
      documentManager.webdb.getAllDocs(loadDocuments);
     },
     documentManager.webdb.displayErrorMessage);
 });
} 
 

No comments:

Post a Comment