IndexedDB and Web Workers

Introduction

indexedDB

HTML5 provides serveral storage mechanisms to let web applications store their data for various purposes, indexedDB is one of the mechanism, it’s a transactional database system with the ability of storing JavaScript objects. Another important character it has is to be usedin conjunction with Web Workers.

By using indexedDB, powerful web applications with query and offline storage abilities can be built.

Web Workers

Web Workers mechanism provides a way for building concurrent web applications, it allows laborious tasks to be performed in a background thread, so the UI can be more responsive to their users.

The way of Inter-thread communication of Web Workers is much like Erlang design principles: message passing, and every thread is in its independent scope, so they are easy to use because no global variables, data sharing and locks.

Basic pattern

Spawning a new Web Workers to represent a server

1 2	//Save the return value for later use. var server = new Worker('server.js');

Listening messages sent from client or UI thread

//Note: the self can be omitted.
//it presented here is to emphasize that the worker thread runs in another score.
self.onmessage = function (event) {
    var msg = event.data[0];
    switch(msg.operation) {
        case 0:
            openDataBase(function(result){
                postMessage([
                    {
                        status: result
                    }
                ]);
            });
            break;
        case 1:
            addRecord(msg.contact, function(result) {
                postMessage([
                    {
                        status: result
                    }
                ]);
            });
            break;
    }
}

Opening the indexedDB on demand

function openDataBase(callback) {
    //the callback parameter is used to send feedback to client threads.

    //Open the contacts database with the version 1.
    var request = indexedDB.open('contacts', 1);
    request.onsuccess = function(event) {
        //Save the instance of indexedDB to variable global to current worker's scope for later use.
        db = event.target.result;
        callback(0);  //call the call back function with some status code.
    }
    request.onerror = function(event) {
        callback(-1);
    }
    //Upgrade contacts database if the specific version requested does not exist.
    request.onupgradeneeded = function(event) {
        var db = event.target.result;
        //Create an object store to hold contacts.
        var objectStore = db.createObjectStore('object-store-name', {autoIncrement: true});
        //Create an index to search contact by last name.
        //the last name can be dumplicated, so an unique index can not be used.
        objectStore.createIndex('index-name', 'index-key', {unique: false});
        objectStore.transaction.oncomplete = function() {
           callback(0);
        };
    }
}

Adding, retrieving, and removing data

function addRecord(record, callback) {
    if(!!!db) {
            callback(-1);
            return;
    }

    var request = db.transaction('object-store-name', 'readwrite')
                    .objectStore('object-store-name')
                    .add(record);

    request.onsuccess = function() {
        callback(0);
    };

    request.onerror = function() {
        callback(-1);
    }
}

Conclusion

IndexedDB and Web Workers are new ways to build powerful and high performance web applications. They are offering opportunities for introducing traditional native applications to the web platform, in other words, applications using threads and database systems running in windows or *nix systems can now be migrated into browsers!