Syncing IndexedDB with Sql Server

Question

I am doing offline DB connectivity in my page using HTML5 IndexedDB concepts.. But Initially, I want to fetch large datas to store it in my IndexedDb, so for that purpose, I

Answer 1

In addition to Editor and Kristof answers, I would like to add few more things since I've worked on a similar solution.

• First of as Editor said IndexedDB is a document-oriented database while SQL is relational database which means that the you should convert your data to a object model before storing them locally
• Avoid using multiple tables in IndexedDB and trying to create joins.
• Additional tables in IndexedDB should be used if you store different objects in the database or you have additional data for your main object (example list of articles in one table - article text in the second table).

Next thing is data synchronization - this can get really complicated if you update the data on both sides (client & server). The main problem that you'll be facing in the data synchronization is the fact that you'll have one main SQL database and a lot of local client databases.

Here are couple things you should also consider:

• You'll need to pick when to do the synchronization timed or by client request.
• One other question that pops up is: What if the user works a lot of the time in the offline mode and updates an object which has been previously deleted by another user and that's stored to the SQL database.
• And of course when you sync the data, split it into chunks, this will reduce the size of each response and IndexedDB works faster with smaller transactions.
• I currently sync 500 items at a time (adjust this to the size of your objects)
• Also in Chrome you can access IndexedDB from web-workers and make parallel requests - this can really speed things up.

This are just some facts you'll need to consider before you start implementing the solution, hope it helps.

Answer 2

From what I understand in your question, you are just using indexeddb like a cache layer in case the db goes done. What I would do is the following.

In case you are working online a save of your data should exist out af 2 actions. Saving to your service (SQL server) and save to your indexeddb.

In case when you are offline I would do 2 operation. On is still updating your indexeddb, but I would add an extra object store where you save all of your operation that have to be preformed on your service. Once back online, you can processes them one by one.

Answer 3

SQL is relational database. IndexedDB is an indexed key/value store similar to a document-oriented database. There's no out of the box way to sync data from a breed of SQL to IndexedDB. You'll have to write that code manually (perhaps using a Polyfill like this one as an example), but note that inserting large amounts of data consecutively is not a good idea.

Answer 4

We have implemented crud operation on HTML5 and IndexedDB database to provide offline support. The next step is to synchronize offline and online databases. In this article, we are going to implement synchronization of IndexedDB and SQL Server databases using ASP.NET Web API.

To sync local DB from Server DB:

$('#btnSyncLocal').click(function () {
    $.ajax({
        url: 'api/service?revision=' + localStorage.customerRevision,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            if (data.Revision == localStorage.customerRevision) {
                alert('You are already working on the latest version.');
            }
            else {
                syncData(data);
            }
        }
    });
});

To sync server DB from Local DB:

$('#btnSyncServer').click(function () {
    var customers = [];
    db.linq.from(config.objectStoreName).select().then(function () {
        if (customers.length > 0) {
            var postData = { revision: parseInt(localStorage.customerRevision, 10), appID: config.appID, customers: customers };
            $.ajax({
                url: 'api/service',
                type: 'POST',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(postData),
                success: function (data) {
                    if (data.Revision == localStorage.customerRevision) {
                        alert('There is newer version on the server. Please Sync from server first.');
                    }
                    else {
                        syncData(data);
                    }
                }
            });
        }
        else {
            alert('There is no change in data after your last synchronization.');
        }
    }, handleError, function (data) {
        if (data.Revision == -1) {
            customers.push(data);
        }
    });
});

For complete implementation for this example refer this link :

A sample implementation is here : Syncing Offline Database (HTML5 IndexedDB) with Online Database using Asp.Net Web API