Cordova モバイル アプリのオフライン同期を有効にするEnable offline sync for your Cordova mobile app

注意

Visual Studio App Center では、モバイル アプリ開発の中心となるエンドツーエンドの統合サービスをサポートしています。Visual Studio App Center supports end to end and integrated services central to mobile app development. 開発者は、ビルドテスト配布のサービスを使用して、継続的インテグレーションおよびデリバリー パイプラインを設定できます。Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. アプリがデプロイされたら、開発者は分析および診断のサービスを利用してアプリの状態と使用状況を監視し、プッシュ サービスを利用してユーザーと関わることができます。Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. また、開発者は Auth を利用してユーザーを認証し、データ サービスを利用してクラウド内のアプリ データを保持および同期することもできます。Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

モバイル アプリケーションにクラウド サービスを統合することを検討している場合は、今すぐ App Center にサインアップしてください。If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

概要Overview

このチュートリアルでは、Cordova 向けの Azure Mobile Apps のオフライン同期機能について説明します。This tutorial introduces the offline sync feature of Azure Mobile Apps for Cordova. オフライン同期を使用すると、エンド ユーザーはネットワークにアクセスできなくても、—データの表示、追加、変更など、—モバイル アプリとやり取りできます。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 service.

このチュートリアルは、チュートリアル「 Apache Cordova クイック スタート」を完了した際に作成される Mobile Apps 用の Cordova クイック スタート ソリューションに基づいています。This tutorial is based on the Cordova quickstart solution for Mobile Apps that you create when you complete the tutorial Apache Cordova quick start. このチュートリアルでは、クイックスタート ソリューションを更新して、Azure Mobile Apps のオフライン機能を追加します。In this tutorial, you update the quickstart solution to add offline features of Azure Mobile Apps. また、アプリのオフライン固有のコードについても取り上げます。We also highlight the offline-specific code in the app.

オフラインの同期機能の詳細については、トピック「 Azure Mobile Apps でのオフライン データ同期」をご覧ください。To learn more about the offline sync feature, see the topic Offline Data Sync in Azure Mobile Apps. API 使用量の詳細については、API ドキュメントをご覧ください。For details of API usage, see the API documentation.

クイック スタート ソリューションへのオフライン同期の追加Add offline sync to the quickstart solution

オフライン同期コードは、アプリに追加する必要があります。The offline sync code must be added to the app. オフライン同期には、cordova-sqlite-storage プラグインが必要です。このプラグインは、Azure Mobile Apps プラグインがプロジェクトに含まれる場合に、自動的にアプリに追加されます。Offline sync requires the cordova-sqlite-storage plugin, which automatically gets added to your app when the Azure Mobile Apps plugin is included in the project. クイック スタート プロジェクトには、これらの両方のプラグインが含まれています。The Quickstart project includes both of these plugins.

  1. Visual Studio のソリューション エクスプローラーで index.js を開き、次のコードをIn Visual Studio's Solution Explorer, open index.js and replace the following code

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

    次のコードに置き換えます。with this code:

     var client,            // Connection to the Azure Mobile App backend
        todoItemTable,      // Reference to a table endpoint on backend
        syncContext;        // Reference to offline data sync context
    
  2. 次に、次のコードをNext, replace the following code:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
    

    次のコードに置き換えます。with this code:

     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 バックエンドで使用される列の値が一致するローカル テーブルが定義されますThe preceding code additions initialize the local store and define a local table that matches the column values used in your Azure back end. (このコードにすべての列の値を含める必要はありません)。version フィールドは、モバイル バックエンドが管理し、競合の解決に使用します。(You don't need to include all column values in this code.) The version field is maintained by the mobile backend and is used for conflict resolution.

    同期コンテキストへの参照を取得するには、 getSyncContextを呼び出します。You get a reference to the sync context by calling getSyncContext. 同期コンテキストは、 .push() が呼び出されたときに、クライアント アプリが変更を行ったすべてのテーブルで、変更を追跡およびプッシュすることで、テーブルの関係を保持するのに役立ちます。The sync context helps preserve table relationships by tracking and pushing changes in all tables a client app has modified when .push() is called.

  3. アプリケーションの URL を Mobile App アプリケーションの URL に更新します。Update the application URL to your Mobile App application URL.

  4. 次に、次のコードをNext, replace this code:

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

    次のコードに置き換えます。with this code:

     // 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 の代わりに) 呼び出して、ローカル テーブルへの参照を取得します。The preceding code initializes the sync context and then calls getSyncTable (instead of getTable) to get a reference to the local table.

    このコードでは、作成、読み取り、更新、削除 (CRUD) のすべてのテーブル操作にローカル データベースを使用します。This code uses the local database for all create, read, update, and delete (CRUD) table operations.

    このサンプルでは、同期の競合に対して、単純なエラー処理を実行します。This sample performs simple error handling on sync conflicts. 実際のアプリケーションでは、ネットワーク状態、サーバーの競合などの各種エラーが処理されます。A real application would handle the various errors like network conditions, server conflicts, and others. コード例については、 オフライン同期サンプルを参照してください。For code examples, see the offline sync sample.

  5. 次に、実際の同期を実行する関数を追加します。Next, add this function to perform the actual sync.

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

    変更をいつ Mobile App バックエンドにプッシュするかは、syncContext.push() を呼び出すことによって決定します。You decide when to push changes to the Mobile App backend by calling syncContext.push(). たとえば、同期ボタンに関連付けられているボタンのイベント ハンドラーで syncBackend を呼び出すことが可能です。For example, you could call syncBackend in a button event handler tied to a sync button.

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

サンプルでは、syncContextpush メソッドが、アプリの起動時だけにログインのコールバック関数で呼び出されます。In the sample, the push method of syncContext is only called on app startup in the callback function for login. 実際のアプリケーションでは、手動で、またはネットワークの状態が変更されたときに、この同期機能がトリガーされるように設定することもできます。In a real-world application, you could also make this sync functionality triggered manually or when the network state changes.

コンテキストによって追跡された保留中のローカル更新のあるテーブルに対してプルが実行された場合、そのプル操作は自動的にプッシュをトリガーします。When a pull is executed against a table that has pending local updates tracked by the context, that pull operation automatically triggers a push. このサンプルの項目を更新、追加、完了するとき、明示的な push の呼び出しは省略できます。冗長であるためです。When refreshing, adding, and completing items in this sample, you can omit the explicit push call, since it may be redundant.

提供されたコードでは、リモートの todoItem テーブルのすべてのレコードが照会されますが、クエリ ID とクエリを pushに渡すことでレコードをフィルター処理することも可能です。In the provided code, all records in the remote todoItem table are queried, but it is also possible to filter records by passing a query id and query to push. 詳細については、「 Azure Mobile Apps でのオフライン データ同期 」の「 Azure Mobile Apps でのオフライン データ同期」セクションを参照してください。For more information, see the section Incremental Sync in Offline Data Sync in Azure Mobile Apps.

(省略可能) 認証の無効化(Optional) Disable authentication

オフライン同期のテスト前に認証をセットアップしない場合は、ログインのコールバック関数をコメント アウトします。ただし、コールバック関数内のコードはコメント化しないままにしておきます。If you don't want to set up authentication before testing offline sync, comment out the callback function for login, but leave the code inside the callback function uncommented. ログイン行をコメント アウトすると、コードは次のようになります。After commenting out the login lines, the code follows:

  // 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 バックエンドと同期するようになります。Now, the app syncs with the Azure backend when you run the app.

クライアント アプリの実行Run the client app

オフライン同期が有効になったので、各プラットフォームで少なくとも 1 回クライアント アプリケーションを実行すると、ローカル ストア データベースにデータが設定されるようになりました。With offline sync now enabled, you can run the client application at least once on each platform to populate the local store database. この後、オフラインのシナリオをシミュレートし、アプリがオフラインの間にローカル ストアのデータを変更します。Later, simulate an offline scenario and modify the data in the local store while the app is offline.

(省略可能) 同期の動作のテスト(Optional) Test the sync behavior

このセクションでは、バックエンドに無効なアプリケーション URL を使用することで、クライアント プロジェクトを変更して、オフラインのシナリオをシミュレートします。In this section, you modify the client project to simulate an offline scenario by using an invalid application URL for your backend. データ項目を追加または変更すると、これらの変更はローカル ストアに保持されますが、接続が再確立されるまでは、バックエンドのデータ ストアには同期されません。When you add or change data items, these changes are held in the local store, but are not synced to the backend data store until the connection is re-established.

  1. ソリューション エクスプローラーで index.js プロジェクト ファイルを開き、次のコードのように、アプリケーション URL が無効な URL を指すように変更します。In the Solution Explorer, open the index.js project file and change the application URL to point to an invalid URL, like the following code:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');
    
  2. index.html で、CSP <meta> 要素を同じ無効な URL に更新します。In index.html, update the CSP <meta> element with the same invalid URL.

     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://yourmobileapp.azurewebsites.net-fail; style-src 'self'; media-src *">
    
  3. クライアント アプリをビルドして実行し、アプリがログイン後にバックエンドと同期を試みるたびに、コンソールに例外がログ記録されることを確認してください。Build and run the client app and notice that an exception is logged in the console when the app attempts to sync with the backend after login. 追加した新しい項目は、モバイルのバックエンドにプッシュされるまでローカル ストアにのみ存在します。Any new items you add exist only in the local store until they are pushed to the mobile backend. クライアント アプリは、バックエンドに接続されているかのように動作します。The client app behaves as if it is connected to the backend.

  4. アプリケーションを終了し、再起動して、作成した新しい項目がローカル ストアに保存されていることを確認します。Close the app and restart it to verify that the new items you created are persisted to the local store.

  5. (省略可能) Visual Studio を使用して、Azure SQL Database テーブルを表示し、バックエンドのデータベースのデータが変更されていないことを確認します。(Optional) Use Visual Studio to view your Azure SQL Database table to see that the data in the backend database has not changed.

    Visual Studio で、 サーバー エクスプローラーを開きます。In Visual Studio, open Server Explorer. [Azure] -> [SQL Databases] を選択して、データベースに移動します。Navigate to your database in Azure->SQL Databases. データベースを右クリックし、 [SQL Server オブジェクト エクスプローラーで開く] を選択します。Right-click your database and select Open in SQL Server Object Explorer. これで SQL データベースのテーブルとその内容を参照できます。Now you can browse to your SQL database table and its contents.

(省略可能) モバイル バックエンドへの再接続のテスト(Optional) Test the reconnection to your mobile backend

このセクションでは、アプリケーションをモバイル バックエンドに再接続して、アプリケーションがオンライン状態に戻ったときの動作をシミュレーションします。In this section, you reconnect the app to the mobile backend, which simulates the app coming back to an online state. ログインすると、データがモバイル バックエンドに同期されます。When you log in, data is synced to your mobile backend.

  1. index.js をもう一度開き、アプリケーション URL を復元します。Reopen index.js and restore the application URL.

  2. index.html をもう一度開き、CSP <meta> 要素のアプリケーション URL を修正します。Reopen index.html and correct the application URL in the CSP <meta> element.

  3. クライアント アプリの再構築と実行Rebuild and run the client app. ログイン後、アプリはモバイル アプリ バックエンドとの同期を試みます。The app attempts to sync with the mobile app backend after login. デバッグ コンソールに例外がログ記録されていないことを確認してください。Verify that no exceptions are logged in the debug console.

  4. (省略可能) SQL Server Object Explorer または Fiddler などの REST ツールを使用して、更新データを表示します。(Optional) View the updated data using either SQL Server Object Explorer or a REST tool like Fiddler. バックエンド データベースとローカル ストアの間でデータが同期されていることを確認します。Notice the data has been synchronized between the backend database and the local store.

    データがデータベースとローカル ストアの間で同期されており、アプリが接続されていない状況で追加した項目が含まれていることを確認してください。Notice the data has been synchronized between the database and the local store and contains the items you added while your app was disconnected.

その他のリソースAdditional resources

次の手順Next steps