DataSync PhoneGap/Web applications using LocalStorage


Recently I have developed a PhoneGap application in which I wanted to synchronize data with server. In this post we will see a simple method to send data from PhoneGap application / Web application using LocalStorage as a queue.
Conditions were like below:
  • Store data in queue locally in LocalStorage
  • Sync data with server if online
  • when application comes online it should start syncing the data again if any
  • upon successful sync remove from queue else try again
  • synching one item at a time
I have developed this solution using Backbone and Backbone LocalStorage plugin.

Lets start understanding the solution.

1. Backbone Model
var QueueModel = Backbone.Model.extend({
  defaults:{
    'url': null,
    'method': null //http method like GET, PUT, POST etc.
  }
});
This model is nothing but representation of ajax settings that can be found here.
2. Backbone Collection used as a Queue which is using Backbone.LocalStorage plugin. You should use singleton pattern for following backbone class.
var SyncQueue = Backbone.Collection.extend({
  
  model: QueueModel,
  
  currentModel: null, 
  
  timeOutVar: null,
  
  localStorage: new Backbone.LocalStorage(QUEUE_NAME),
  
  initialize: function() {
    setSelf(this);
  },
  
  setSyncTimer: function(milliSeconds) {
    milliSeconds = typeof milliSeconds !== 'undefined' ? milliSeconds : 5000;
    if(self.timeOutVar) { clearTimeout(self.timeOutVar); }
    setTimeout(self.startSync, milliSeconds);
  },
  
  //add model into queue 
  enqueue: function (model) {
    self.localStorage.create(model);
    self.setSyncTimer(1000);    
  },  

  //when syncing is done
  syncSuccess: function () {
    self.localStorage.destroy(self.currentModel);
    self.currentModel = null;
    self.setSyncTimer(1000);
  },
  
  //when error occurred while syncing
  syncError: function () {
    self.currentModel = null;
    setTimeout(self.startSync, 1000);
  },
  
  //sync init method
  startSync: function () {
    console.log('startSync '+ 'models length: ' + self.models.length);
    self.localStorage = new Backbone.LocalStorage(QUEUE_NAME);
    self.fetch();   
    if (self.models.length > 0 && self.currentModel === null) {
      self.currentModel = self.models[0];
      self.send();
    }
  },
  
  send: function() {   
    var ajaxJSON = self.currentModel.toJSON();
    $.ajax(ajaxJSON)
    .done(function(){
      self.syncSuccess();
    })
    .fail(function(){
      self.syncError();
    });
  }
});

Understanding above Backbone Collection

model: QueueModel = Set Backbone collection model
currentModel: null = currentModel being synced
timeOutVar: null = holds reference to timeout id
  enqueue: function (model) {
    self.localStorage.create(model);
    self.setSyncTimer(1000);    
  },  
Above function will add ajax settings model in the queue. As I said earlier this is essentially jquery ajax settings like url, method, contentType, dataType etc.
  syncSuccess: function () {
    self.localStorage.destroy(self.currentModel);
    self.currentModel = null;
    self.setSyncTimer(1000);
  },
Success callback after ajax is successful. It will remove currentModel from queue and will start synching method again.
  syncError: function () {
    self.currentModel = null;
    setTimeout(self.startSync, 1000);
  },
Error callback when ajax is unsuccessful. It will again try to sync the same model again.
  startSync: function () {
    console.log('startSync '+ 'models length: ' + self.models.length);
    self.localStorage = new Backbone.LocalStorage(QUEUE_NAME);
    self.fetch();   
    if (self.models.length > 0 && self.currentModel === null) {
      self.currentModel = self.models[0];
      self.send();
    }
  }
Above is the function which will fetch collection from localStorage and it will try to sync first model from queue.
  send: function() {   
    var ajaxJSON = self.currentModel.toJSON();
    $.ajax(ajaxJSON)
    .done(function(){
      self.syncSuccess();
    })
    .fail(function(){
      self.syncError();
    });
  }
This function will execute ajax on currentModel and will call respective callback function.
I am using above code as is in one of my application which is currently in beta mode. Improvement to above synching code can be done. If you have any suggestions please let me know.
You can find demo of above code at http://jsfiddle.net/bharatpatil/EeNH2/3/

Comments

I'm genuinely impressed with your knowledge about patient management software. You have such great knowledge of dressing. Please share more information like this. I really appreciate your blog. Thank you for sharing this. 
Your information is really amazing. Definitely those things are very useful for us. I'm impressed with your article. Please share more information with us. top mobile app development company
App Majlis said…
Clearly, It is an engaging article for us which you have provided here about web application dubai This is a great resource to enhance knowledge about it. Thank you.
Robert steveson said…
It is what I was searching for is really informative.Seo Services Specialist Hong Kong It is a significant and useful article for us. Thankful to you for sharing an article like this.
Robert steveson said…
You have done good work by publishing this article here.Mobile App Development Company Hong Kong I found this article too much informative, and also it is beneficial to enhance our knowledge. Grateful to you for sharing an article like this.
Extremely useful blog which you have shared here about Web Page Design This is a great way to enhance knowledge for us, and also beneficial for us. Thank you for sharing a blog like this.

Popular posts from this blog

How to get local time from UTC using Moment.JS

Measure the height of keyboard on PhoneGap app using jQuery

Step by step Cordova calabash-ios automation