heidloff.net - Building is my Passion
Post
Cancel

Developing Offline Capable Mobile Apps with LoopBack

Today I looked briefly into some experimental functionality of the LoopBack framework to develop offline capable mobile apps. I’d like to add this functionality to my sample of the CLEAN stack (Cloudant, Express, LoopBack, AngularJS, Node) which comes with (hybrid) mobile apps built via AngularJS, Ionic and Cordova.

There is a nice video describing this functionality. In a nutshell data is stored in HTML Local Storage in browsers. The data synchronization is done on the business logic level rather than database level. This allows synchronizing data from various LoopBack data sources, for example from and to Cloudant and MongoDB.

The other advantage of this approach is that business logic developed and defined for your business objects (models), for example access control, is also applied on the client. Essentially the complete LoopBack application is run in the browser via Browserify. The exact same JavaScript APIs to access business objects work remotely and locally.

Here are some screenshots of the offline ToDo sample. For demonstration purposes you can go offline and online manually and trigger synchronization.

image

In the AngularJS controller you can create To Dos in the same way locally as remotely and use the additional offline APIs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
angular.module('loopbackExampleFullStackApp')	
   .controller('TodoCtrl', function TodoCtrl($scope, $routeParams, $filter, Todo,
   $location, sync, network, getReadableModelId) {
      $scope.addTodo = function () {	
         Todo.create({title: $scope.newTodo})
            .then(function() {
               $scope.newTodo = '';
               $scope.$apply();
            });
         };
   $scope.sync = function() {
      sync(); 
   };
   $scope.connected = function() {
      return network.isConnected;
   };
   $scope.connect = function() {
      network.isConnected = true; 
      sync();
   };
   $scope.disconnect = function() {
      network.isConnected = false;
   };
   ...
});

The debug page displays data from the Local Storage, for example which documents haven’t been synchronized with the server as well as potential synchronization conflicts.

image

To find out more watch the video, read the article Open Source Replication and Offline Sync for Node.js and Devices and check out the documentation.

Featured Blog Posts
Disclaimer
The postings on this site are my own and don’t necessarily represent IBM’s positions, strategies or opinions.
Trending Tags