Cordova モバイルアプリのオフライン同期を有効にする

2019-06-25

概要

このチュートリアルでは、Cordova 用 Azure Mobile Apps のオフライン同期機能について説明します。オフライン同期を使用すると、エンドユーザーは、ネットワーク接続がない場合でも、モバイルアプリを操作できます (データの表示、追加、変更)。変更はローカルデータベースに格納されます。デバイスがオンラインに戻ると、これらの変更はリモートサービスと同期されます。

このチュートリアルは、チュートリアル Apache Cordova クイックスタートを完了したときに作成する Mobile Apps の Cordova クイックスタートソリューションに基づいています。このチュートリアルでは、クイックスタートソリューションを更新して、Azure Mobile Apps のオフライン機能を追加します。また、アプリ内のオフライン固有のコードも強調表示します。

オフライン同期機能の詳細については、「Azure Mobile Apps でのオフラインデータ同期」を参照してください。 API の使用方法の詳細については、 API のドキュメントを参照してください。

クイックスタートソリューションにオフライン同期を追加する

オフライン同期コードをアプリに追加する必要があります。オフライン同期には cordova-sqlite-storage プラグインが必要です。このプラグインは、Azure Mobile Apps プラグインがプロジェクトに含まれるときに自動的にアプリに追加されます。クイックスタートプロジェクトには、これらの両方のプラグインが含まれています。

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);

上記のコードは同期コンテキストを初期化し、getTable ではなく getSyncTable を呼び出してローカルテーブルへの参照を取得します。

このコードでは、すべての作成、読み取り、更新、および削除 (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 を呼び出します。

オフライン同期に関する考慮事項

このサンプルでは、syncContext のプッシュ メソッドは、ログイン用のコールバック関数でアプリの起動時にのみ呼び出されます。実際のアプリケーションでは、この同期機能を手動でトリガーしたり、ネットワークの状態が変化したりすることもできます。

保留中のローカル更新がコンテキストによって追跡されているテーブルに対してプルが実行されると、そのプル操作によってプッシュが自動的にトリガーされます。このサンプルの項目を更新、追加、完了するときに、明示的な プッシュ 呼び出しは冗長である可能性があるため省略できます。

指定されたコードでは、リモートの todoItem テーブル内のすべてのレコードがクエリされますが、クエリ ID と プッシュするクエリを渡してレコードをフィルター処理することもできます。詳細については、「Azure Mobile Apps でのオフラインデータ同期での増分同期」セクションを参照してください。

(省略可能)認証を無効にする

オフライン同期をテストする前に認証を設定しない場合は、ログイン用のコールバック関数をコメントアウトしますが、コールバック関数内のコードはコメントを解除したままにします。ログイン行をコメントアウトした後、コードは次のようになります。

  // 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 バックエンドと同期されます。

クライアントアプリを実行する

オフライン同期が有効になったので、各プラットフォームでクライアントアプリケーションを少なくとも 1 回実行して、ローカルストアデータベースを設定できます。後でオフラインシナリオをシミュレートし、アプリがオフラインの間にローカルストア内のデータを変更します。

(省略可能)同期動作をテストする

このセクションでは、バックエンドの無効なアプリケーション 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 を使用して Azure SQL Database テーブルを表示し、バックエンドデータベース内のデータが変更されていないことを確認します。

Visual Studio で、 サーバーエクスプローラーを開きます。 Azure->SQL データベース内のデータベースに移動します。データベースを右クリックし、[ SQL Server オブジェクトエクスプローラーで開く] を選択します。これで、SQL データベーステーブルとその内容を参照できます。

(省略可能)モバイルバックエンドへの再接続をテストする

このセクションでは、アプリをモバイルバックエンドに再接続します。これにより、オンライン状態に戻るアプリがシミュレートされます。ログインすると、データはモバイルバックエンドに同期されます。

index.js 再度開き、アプリケーションの URL を復元します。
index.html 再度開き、CSP <meta> 要素のアプリケーション URL を修正します。
クライアントアプリをリビルドして実行します。アプリは、ログイン後にモバイルアプリバックエンドとの同期を試みます。デバッグコンソールに例外が記録されていないことを確認します。
(省略可能)SQL Server オブジェクトエクスプローラーまたは Fiddler などの REST ツールを使用して、更新されたデータを表示します。バックエンドデータベースとローカルストアの間でデータが同期されていることに注意してください。

データがデータベースとローカルストアの間で同期され、アプリが切断されている間に追加した項目が含まれていることに注意してください。

その他のリソース

Azure Mobile Apps におけるオフラインデータ同期
Visual Studio Tools for Apache Cordova

次のステップ

オフライン同期サンプルの競合解決など、より高度なオフライン同期機能を確認する
API ドキュメントのオフライン同期 API リファレンスを確認します。

次の方法で共有

Cordova モバイル アプリのオフライン同期を有効にする

概要

クイック スタート ソリューションにオフライン同期を追加する

オフライン同期に関する考慮事項

(省略可能)認証を無効にする

クライアント アプリを実行する

(省略可能)同期動作をテストする

(省略可能)モバイル バックエンドへの再接続をテストする

その他のリソース

次のステップ

その他のリソース

Cordova モバイルアプリのオフライン同期を有効にする

クイックスタートソリューションにオフライン同期を追加する

クライアントアプリを実行する

(省略可能)モバイルバックエンドへの再接続をテストする