Add offline data sync to your Apache Cordova app

Article
05/05/2021

Note

This product is retired. For a replacement for projects using .NET 8 or later, see the Community Toolkit Datasync library.

This tutorial covers the offline sync feature of Azure Mobile Apps for the Apache Cordova quickstart app. Offline sync allows end users to interact with a mobile app—viewing, adding, or modifying data—even when there is no network connection. Changes are stored in a local database. Once the device is back online, these changes are synced with the remote backend.

Prior to starting this tutorial, you should have completed the Apache Cordova Quickstart Tutorial, which includes creating a suitable backend service.

To learn more about the offline sync feature, see the topic Offline Data Sync in Azure Mobile Apps.

Update the app to support offline sync

In online operation, you use getTable() to get a reference to the online table. When implementing offline capabilities, you use getSyncTable() to get a reference to the offline SQlite store. The SQlite store is provided by the Apache Cordova cordova-sqlite-storage plugin.

Note

Offline synchronization is only available for Android and iOS. It will not work within the browser platform specification.

In the www/js/index.js file:

Update the initializeStore() method to initialize the local SQlite database:

function initializeStore() {
    store = new WindowsAzure.MobileServiceSqliteStore();

    var tableDefinition = {
        name: 'todoitem',
        columnDefinitions: {
            id: 'string',
            deleted: 'boolean',
            version: 'string',
            Text: 'string',
            Complete: 'boolean'
        }
    };

    return store
        .defineTable(tableDefinition)
        .then(initializeSyncContext);
}

function initializeSyncContext() {
    syncContext = client.getSyncContext();
    syncContext.pushHandler = {
        onConflict: function (pushError) {
            return pushError.cancelAndDiscard();
        },
        onError: function (pushError) {
            return pushError.cancelAndDiscard();
        }
    };
    return syncContext.initialize(store);
}

Update the setup() method to use the offline version of the table:

function setup() {
    todoTable = client.getSyncTable('todoitem');
    refreshDisplay();
    addItemEl.addEventListener('submit', addItemHandler);
    refreshButtonEl.addEventListener('click', refreshDisplay);
}

Replace the syncLocalTable() method that will synchronize the data in the offline store with the online store:

function syncLocalTable() {
    return syncContext.push().then(function () {
        return syncContext.pull(new WindowsAzure.Query('todoitem'));
    });
}

Build the app

Run the following commands to build the Android app:

cordova clean android
cordova build android

You can run the app:

cordova run android

Test within Visual Studio Code

You can use the debugger within Visual Studio Code if you have the Cordova Tools extension installed. Click on the debugger, then create a launch.json file. When prompted, select Cordova, then select the configurations (such as Run Android on emulator). Once you have created a launch configuration, you can run the app in the debugger. It will launch on your emulator of choice. However, you will now be able to see the debug output in your debug console.

Test the app

In this section, test the behavior with WiFi on, and then turn off WiFi to create an offline scenario.

Items in the todo list are stored in a SQLite database on the device. When you refresh the data, the changes are sent to the service (push). The app then requests any new items (pull). In the tutorial, the refresh is selected by pressing an icon or by using "pull to refresh".

Place the device or simulator in Airplane Mode.
Add some Todo items, or mark some items as complete.
Quit the device or simulator (or forcibly close the app) and restart the app.
Verify that your changes have been persisted on the device.
View the contents of the Azure TodoItem table. Use a SQL tool such as SQL Server Management Studio, or a REST client such Curl. Verify that the new items haven't been synced to the server
Turn on WiFi in the device or simulator.
Refresh the data, either by "pull to refresh" or by pressing the refresh icon.
Review the TodoItem table data again. The new and changed items should now appear.

Next steps

Continue on to implement authentication.

Share via