Включение автономной синхронизации для мобильного приложения Cordova

Обзор

В этом руководстве представлена функция автономной синхронизации мобильных приложений Azure для Cordova. Автономная синхронизация позволяет конечным пользователям взаимодействовать с мобильным приложением — просматривать, добавлять или изменять данные, даже если сетевое подключение отсутствует. Изменения хранятся в локальной базе данных. После восстановления соединения устройства с сетью эти изменения синхронизируются с дистанционным сервисом.

Это руководство основано на решении быстрого старта Cordova для мобильных приложений, которое вы создаёте при выполнении руководства быстрого старта Apache Cordova. В этом руководстве описано, как обновить решение быстрого запуска, чтобы добавить автономные функции мобильных приложений Azure. Мы также выделяем код, специфичный для оффлайн режима, в приложении.

Дополнительные сведения о функции автономной синхронизации см. в статье автономной синхронизации данных в мобильных приложениях Azure. Дополнительные сведения об использовании API см. в документации по API .

Добавление автономной синхронизации в решение быстрого запуска

Код автономной синхронизации должен быть добавлен в приложение. Для синхронизации в автономном режиме требуется плагин cordova-sqlite-storage, который автоматически добавляется в приложение, когда плагин мобильных приложений Azure включен в проект. Проект Quickstart включает оба этих подключаемых модуля.

В обозревателе решений Visual Studio откройте index.js и замените следующий код

 var client,            // Connection to the Azure Mobile App backend
    todoItemTable;      // Reference to a table endpoint on backend

с помощью этого кода:

 var client,            // Connection to the Azure Mobile App backend
    todoItemTable,      // Reference to a table endpoint on backend
    syncContext;        // Reference to offline data sync context

Затем замените следующий код:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
```
с помощью этого кода:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
 var store = new WindowsAzure.MobileServiceSqliteStore('store.db');

 store.defineTable({
   name: 'todoitem',
   columnDefinitions: {
       id: 'string',
       text: 'string',
       complete: 'boolean',
       version: 'string'
   }
 });

 // Get the sync context from the client
 syncContext = client.getSyncContext();
```
Предыдущие дополнения кода инициализируют локальное хранилище и определяют локальную таблицу, которая соответствует значениям столбцов, используемым в серверной части Azure. (В этот код не нужно включать все значения столбцов.) Поле version поддерживается серверной частью мобильного устройства и используется для разрешения конфликтов.

Вы получите ссылку на контекст синхронизации, вызвав getSyncContext. Контекст синхронизации помогает сохранять связи таблиц путем отслеживания и отправки изменений во всех таблицах клиентского приложения при вызове .push().
Измените URL-адрес на URL-адрес вашего мобильного приложения.

Затем замените этот код:

 todoItemTable = client.getTable('todoitem'); // todoitem is the table name

с помощью этого кода:

 // Initialize the sync context with the store
 syncContext.initialize(store).then(function () {

 // Get the local table reference.
 todoItemTable = client.getSyncTable('todoitem');

 syncContext.pushHandler = {
     onConflict: function (pushError) {
         // Handle the conflict.
         console.log("Sync conflict! " + pushError.getError().message);
         // Update failed, revert to server's copy.
         pushError.cancelAndDiscard();
       },
       onError: function (pushError) {
           // Handle the error
           // In the simulated offline state, you get "Sync error! Unexpected connection failure."
           console.log("Sync error! " + pushError.getError().message);
       }
 };

 // Call a function to perform the actual sync
 syncBackend();

 // Refresh the todoItems
 refreshDisplay();

 // Wire up the UI Event Handler for the Add Item
 $('#add-item').submit(addItemHandler);
 $('#refresh').on('click', refreshDisplay);

Предыдущий код инициализирует контекст синхронизации, а затем вызывает getSyncTable (вместо getTable), чтобы получить ссылку на локальную таблицу.

Этот код использует локальную базу данных для всех операций CRUD: создания, чтения, обновления и удаления.

В этом примере выполняется простая обработка ошибок при конфликтах синхронизации. Реальное приложение будет обрабатывать различные ошибки, такие как сетевые условия, конфликты сервера и другие. Примеры кода см. в примере автономной синхронизации.

Затем добавьте эту функцию для выполнения фактической синхронизации.
```
 function syncBackend() {

   // Sync local store to Azure table when app loads, or when login complete.
   syncContext.push().then(function () {
       // Push completed

   });

   // Pull items from the Azure table after syncing to Azure.
   syncContext.pull(new WindowsAzure.Query('todoitem'));
 }
```
Вы решите, когда следует отправлять изменения в серверную часть мобильного приложения, вызвав syncContext.push(). Например, можно вызвать syncBackend в обработчике событий, связанного с кнопкой синхронизации.

(Необязательно) Отключение проверки подлинности

Если вы не хотите настраивать аутентификацию перед тестированием автономной синхронизации, закомментируйте функцию обратного вызова для входа в систему, но оставьте код внутри неё без изменений. После закомментирования строк логина код выглядит следующим образом:

  // Login to the service.
  // client.login('twitter')
  //    .then(function () {
    syncContext.initialize(store).then(function () {
      // Leave the rest of the code in this callback function  uncommented.
            ...
    });
  // }, handleError);

Теперь приложение синхронизируется с серверной частью Azure при запуске приложения.

Запуск клиентского приложения

Благодаря автономной синхронизации теперь можно запустить клиентское приложение по крайней мере один раз на каждой платформе, чтобы заполнить базу данных локального хранилища. Позже смоделируйте автономный сценарий и измените данные в локальном хранилище, пока приложение находится в автономном режиме.

(Необязательно) Проверка поведения синхронизации

В этом разделе вы изменяете клиентский проект, чтобы имитировать автономный сценарий, используя недопустимый URL-адрес приложения для вашей серверной части. При добавлении или изменении элементов данных эти изменения хранятся в локальном хранилище, но не синхронизируются с серверным хранилищем данных, пока подключение не будет восстановлено.

В обозревателе решений откройте файл проекта index.js и измените URL-адрес приложения на недопустимый URL-адрес, например следующий код:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');
```

В index.htmlобновите элемент CSP <meta> с тем же недопустимым URL-адресом.

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://yourmobileapp.azurewebsites.net-fail; style-src 'self'; media-src *">

Создайте и запустите клиентское приложение и обратите внимание, что исключение регистрируется в консоли, когда приложение пытается синхронизироваться с серверной частью после входа. Все новые добавляемые элементы существуют только в локальном хранилище, пока они не будут отправлены в серверную часть мобильного устройства. Клиентское приложение работает так, как если бы оно было подключено к серверной части.
Закройте приложение и перезапустите его, чтобы убедиться, что созданные элементы сохраняются в локальном хранилище.
(Необязательно) Используйте Visual Studio для просмотра таблицы Базы данных SQL Azure, чтобы увидеть, что данные в серверной базе данных не изменились.

В Visual Studio откройте Обозреватель серверов. Перейдите к базе данных в Azure—>базах данных SQL. Щелкните базу данных правой кнопкой мыши и выберите Открыть в обозревателе объектов SQL Server. Теперь вы можете перейти к таблице базы данных SQL и ее содержимому.

(Необязательно) Тестирование повторного подключения к серверной части мобильного приложения

В этом разделе вы повторно подключите приложение к мобильному серверу, который имитирует приложение, возвращающееся в онлайн-состояние. При входе данные синхронизируются с серверной частью мобильного устройства.

Повторно откройте index.js и восстановите URL-адрес приложения.
Повторно откройте index.html и исправьте URL-адрес приложения в элементе CSP <meta>.
Перестройте и запустите клиентское приложение. Приложение пытается синхронизироваться с серверной частью мобильного приложения после входа. Убедитесь, что исключения не регистрируются в консоли отладки.
(Необязательно) Просмотр обновленных данных с помощью обозревателя объектов SQL Server или средства REST, например Fiddler. Обратите внимание, что данные синхронизированы между серверной базой данных и локальным хранилищем.

Обратите внимание, что данные синхронизированы между базой данных и локальным хранилищем и содержат элементы, добавленные во время отключения приложения.

Дополнительные ресурсы

Дальнейшие действия

Ознакомьтесь с более расширенными функциями автономной синхронизации, такими как разрешение конфликтов в примере автономной синхронизации
Ознакомьтесь со ссылкой на API автономной синхронизации в документации по API .

Last updated on 2019-06-25

Поделиться через

Включение автономной синхронизации для мобильного приложения Cordova

Обзор

Добавление автономной синхронизации в решение быстрого запуска

Рекомендации по автономной синхронизации

(Необязательно) Отключение проверки подлинности

Запуск клиентского приложения

(Необязательно) Проверка поведения синхронизации

(Необязательно) Тестирование повторного подключения к серверной части мобильного приложения

Дополнительные ресурсы

Дальнейшие действия

Дополнительные ресурсы