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.
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.
Anonymous said…
I read the above article and got some knowledge from your article which is about..... It's actually great and useful data for us. Thanks for sharing it.web development
Cisin said…
This is a great article you've shared because it offers some great information that will be very helpful to me. I'm grateful that you said that. Work well done; continue.artificial intelligence

Popular posts from this blog

How to get local time from UTC using Moment.JS

6 steps to create local copy of your live WordPress site

Partially rendering Handlerbars from Backbone view