Add offline data sync to your Windows (UWP) app

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

Before starting this tutorial, you should have completed the Windows (UWP) 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.

In online operation, you read to and write from a MobileServiceTable. When using offline sync, you read to and write from a MobileServiceSyncTable instead. The MobileServiceSyncTable is backed by an on-device SQLite database, and synchronized with the backend database.

Update your service class

In the DataModel/TodoService.cs class:

  1. Update the definition of the mTable variable, and add a definition for the local store. Comment out the current definition, and uncomment the offline sync version.

    // private IMobileServiceTable<TodoItem> mTable;
    private IMobileServiceSyncTable<TodoItem> mTable;
    private MobileServiceSQLiteStore mStore;
    

    Ensure you add relevant imports using Alt+Enter.

  2. Update the InitializeAsync() method to define the offline version of the table:

    private async Task InitializeAsync()
    {
        using (await initializationLock.LockAsync())
        {
            if (!isInitialized)
            {
                // Define the offline store.
                mStore = new MobileServiceSQLiteStore("todoitems.db");
                mStore.DefineTable<TodoItem>();
                await mClient.SyncContext.InitializeAsync(mStore).ConfigureAwait(false);
    
                // Get a reference to the table.
                mTable = mClient.GetSyncTable<TodoItem>();
                isInitialized = true;
            }
        }
    }
    
  3. Replace the SynchronizeAsync() method that will synchronize the data in the offline store with the online store:

    public async Task SynchronizeAsync()
    {
        await InitializeAsync().ConfigureAwait(false);
    
        IReadOnlyCollection<MobileServiceTableOperationError> syncErrors = null;
        try
        {
            await mClient.SyncContext.PushAsync().ConfigureAwait(false);
            await mTable.PullAsync("todoitems", mTable.CreateQuery()).ConfigureAwait(false);
        }
        catch (MobileServicePushFailedException error)
        {
            if (error.PushResult != null)
            {
                syncErrors = error.PushResult.Errors;
            }
        }
    
        if (syncErrors != null)
        {
            foreach (var syncError in syncErrors)
            {
                if (syncError.OperationKind == MobileServiceTableOperationKind.Update && syncError.Result != null)
                {
                    // Prefer server copy
                    await syncError.CancelAndUpdateItemAsync(syncError.Result).ConfigureAwait(false);
                }
                else
                {
                    // Discard local copy
                    await syncError.CancelAndDiscardItemAsync().ConfigureAwait(false);
                }
            }
        }
    }
    

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".

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

Next steps

Continue on to implement authentication.