Offline Support for Hybrid, Web and NativeScript Apps

If you are building mobile apps today, and you have an alert box somewhere in your code with the following message “Please check your internet connection” that occurs exactly at the moment when a user wants to use your app, please read on.

The chances are that your users are already aware when they don’t have internet connection, but they need to do something with your app! I am glad to announce that with the new Telerik Platform support for offline apps you can now do full CRUD operations on top of your data locally, and synchronize everything with a single method when a connection is restored.

It’s all about user experience

telerik-backend-services-offline

Presenting your users with full offline capabilities means that you have to do a lot under the covers. You need a full-blown solution for persisting the information at the device, preferably directly on the device file system instead of browser local storage to avoid storage limits. You will also need to abstract your service calls that require internet connection to a layer that talks to the file system, and lastly you will need to take care of synchronization of the data to the server when the connection is re-established.

It’s no wonder that my session for Building Offline Ready Mobile Apps at TelerikNEXT was standing room only (sorry about that :)). Why? Because building offline apps involves two of the biggest pitfalls in software development. First, it is a requirement that your users expect to have, but never explicitly ask for. They assume it will be there – wrong! Second, it’s not the type of feature that you can easily add if you haven’t designed the app for it early on.

Let’s see how we have made this much easier with our JavaScript SDK along with the supported capabilities.

Full Support for Hybrid, Web and NativeScript

Using a single JavaScript library and the same API, you can build hybrid, web and NativeScript apps. Just integrate our JavaScript SDK in your hybrid or NativeScript app, and you are ready to roll.

https://bs-static.cdn.telerik.com/1.3.1/everlive.all.min.js

Global Setting for Online/Offline mode

There is a global setting for the JS SDK to either perform all operations against the server (online) or against the local file storage (offline). You can make full create, delete and update operations on items that have been already retrieved from the device, and read operations have full query support on any item that has been already retrieved from the device.

//Assume that you have the Everlive instance as a global variable
var el = new Everlive({
    apiKey: 'your-api-key-here',
    offlineStorage: true
});
//Switch to online mode
el.online();
//Switch to offline mode
el.offline();

Per Request Setting for Online/Offline mode

You can also decide to handle specific requests differently. For example, you can make a read request of a type that you know does not change often directly from the local storage if it has been previously retrieved. This can save you many roundtrips to the server. We will be soon introducing caching capabilities with expirations that will make such scenarios even easier!

var el = new Everlive({
    apiKey: 'your-api-key-here',
    offlineStorage: true
});

el.data('MyContentType').useOffline(true).getById(...);

Support for Multiple Offline Storage Providers

When you enable the offline mode, the SDK needs to store the data locally. If you are in the browser or in a hybrid app relying on Cordova, you can always use the browser’s local storage. However, it has just a 5 MB size limitation. That is why, we made it possible to easily configure the storage provider to use the file system if you are in a hybrid or NativeScript app. Using the file system, your app has unlimited access to the device storage.

var el = new Everlive({
    apiKey: 'your-api-key-here',
    offlineStorage: {
        storage: {
            //provider: Everlive.Constants.StorageProvider.LocalStorage
          provider: Everlive.Constants.StorageProvider.FileSystem
        }
    }
});

Note that if you choose to use the file system in Cordova app, you will also need to enable the Device plug-in, since it’s a dependency.

Data Synchronization with the Server

Once you enable offline mode, all changes to the items are persisted locally. You can easily synchronize these changes with the server when your app is already online. Note that we rely on you to tell the SDK when it’s online or offline and when to synchronize the data in order to leave this behavior up to you and your UI scenarios.

var el = new Everlive({
    apiKey: 'your-api-key-here',
    offlineStorage: true
});

el.sync();

Conflict resolution with three built in policies

When data is synchronized with the server, it’s possible that conflicts can arise. Since you are dealing with a highly distributed systems where multiple devices might interact with the same data items, you should be prepared to handle this. We have created three built-in policies that you can use in the following ways:

Client-wins strategy

Override changes on the server with the most recent client data.

var el = new Everlive({
    apiKey: 'your-api-key-here',
    offlineStorage: {
        conflicts: {
            strategy: Everlive.Constants.ConflictResolutionStrategy.ClientWins
        }
    }
});

Server-wins streategy

Override the changes of the client with the most recent server data.

var el = new Everlive({
    apiKey: 'your-api-key-here',
    offlineStorage: {
        conflicts: {
            strategy: Everlive.Constants.ConflictResolutionStrategy.ServerWins
        }
    }
});

Custom

Implement your own client side function to handle the resolution based on custom logic as shown below:

var el = new Everlive({
    apiKey: 'your-api-key-here',
    offlineStorage: {
        conflicts: {
            strategy: Everlive.Constants.ConflictResolutionStrategy.Custom,
            implementation: function(conflicts) { ... }
        }
    }
});

Offline data encryption

By default, the data you store on the device is stored as plain text. In case the device is lost or stolen, this data can be retrieved. We have accounted for this scenario, and you have ability to encrypt any data that is stored locally using an encryption key and Advanced Encryption Standard (AES) implementation built into the SDK.

var el = new Everlive({
    apiKey: 'your-api-key-here',
    offlineStorage: {
        encryption: {
            key: 'your-encryption_key_here'
        }
    }
});

Kendo UI DataSource integration

We have made it possible for customers who are using our Backend Services together with a Kendo UI DataSource to feel at home. However, since both Kendo UI and the JS SDK of the Backend Services support offline, you should first understand the difference to decide which one you should use. We have a dedicated article in our documentation to help you make most of the integration between the two products.

Data Connectors and offline

This is my favorite feature because you can easily connect your own SQL Server, Postgre SQL, MySQL Enterprise and Oracle database, and directly use all of the features above without any limitation. The beauty is that we are supporting absolutely the same API layer when working with existing data or data stored in the cloud in our MongoDB infrastructure. This gives you a nice abstraction on the client, so you don’t have to care where the data is coming from.

Conclusion

We cannot wait to see all of the nice apps you create using this new capability. If you have any issues or questions, get back with us and we will be able to help you integrate the Offline capabilities in your existing apps powered by the Telerik Platform.

Comments