Windows アプリのオフライン同期を有効にするEnable offline sync for your Windows 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

このチュートリアルでは、Azure Mobile App バックエンドを使用して、ユニバーサル Windows プラットフォーム (UWP) アプリにオフライン サポートを追加する方法について説明します。This tutorial shows you how to add offline support to a Universal Windows Platform (UWP) app using an Azure Mobile App backend. オフライン同期を使用すると、エンド ユーザーはネットワークにアクセスできなくても、データの表示、追加、変更など、モバイル アプリケーションとやり取りできます。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.

このチュートリアルでは、「Create a Windows app (Windows アプリの作成)」チュートリアルからの UWP アプリ プロジェクトを更新し、Azure Mobile Apps のオフライン機能をサポートできるようにします。In this tutorial, you update the UWP app project from the tutorial Create a Windows app to support the offline features of Azure Mobile Apps. ダウンロードしたクイック スタートのサーバー プロジェクトを使用しない場合は、データ アクセス拡張機能パッケージをプロジェクトに追加する必要があります。If you do not use the downloaded quick start server project, you must add the data access extension packages to your project. サーバーの拡張機能パッケージの詳細については、「 Work with the .NET backend server SDK for Azure Mobile Apps (Azure Mobile Apps 用の .NET バックエンド サーバー SDK を操作する)」を参照してください。For more information about server extension packages, see Work with the .NET backend server SDK for Azure Mobile Apps.

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

必要条件Requirements

このチュートリアルの前提条件は次のとおりです。This tutorial requires the following pre-requisites:

オフライン機能をサポートするようにクライアント アプリを更新するUpdate the client app to support offline features

Azure モバイル アプリのオフライン機能を使用すると、オフラインになっている状況でも、ローカル データベースとやり取りすることができます。Azure Mobile App offline features allow you to interact with a local database when you are in an offline scenario. アプリケーションでこれらの機能を使用するには、SyncContext to a local store. Then reference your table through the IMobileServiceSyncTable インターフェイスを初期化します。To use these features in your app, you initialize a SyncContext to a local store. Then reference your table through the IMobileServiceSyncTable interface. SQLite は、デバイス上のローカル ストアとして使用されます。SQLite is used as the local store on the device.

  1. ユニバーサル Windows プラットフォーム用の SQLite ランタイムをインストールします。Install the SQLite runtime for the Universal Windows Platform.

  2. Visual Studio で、「Create a Windows app (Windows アプリの作成)」チュートリアルで完了した UWP アプリ プロジェクトの NuGet パッケージ マネージャーを開きます。In Visual Studio, open the NuGet package manager for the UWP app project that you completed in the Create a Windows app tutorial. Microsoft.Azure.Mobile.Client.SQLiteStore NuGet パッケージを検索してインストールします。Search for and install the Microsoft.Azure.Mobile.Client.SQLiteStore NuGet package.

  3. ソリューション エクスプ ローラーで、 [参照] > [参照の追加] > [ユニバーサル Windows] > [拡張機能] の順に右クリックおよびクリックして、 [ユニバーサル Windows プラットフォーム用 SQLite][Visual C++ 2015 Runtime for Universal Windows Platform apps](ユニバーサルWindows プラットフォーム アプリ用 Visual C++ 2015 ランタイム) の両方を有効にします。In Solution Explorer, right-click References > Add Reference... > Universal Windows > Extensions, then enable both SQLite for Universal Windows Platform and Visual C++ 2015 Runtime for Universal Windows Platform apps.

    SQLite UWP リファレンスを追加する

  4. MainPage.xaml.cs ファイルを開き、#define OFFLINE_SYNC_ENABLEDの定義をコメント解除します。Open the MainPage.xaml.cs file and uncomment the #define OFFLINE_SYNC_ENABLED definition.

  5. Visual Studio で、 F5 キーを押してクライアント アプリをリビルドして実行します。In Visual Studio, press the F5 key to rebuild and run the client app. アプリは、オフライン同期を有効にする前と同じように動作します。ただし今度は、オフライン シナリオで使用できるデータがローカル データベースに格納されます。The app works the same as it did before you enabled offline sync. However, the local database is now populated with data that can be used in an offline scenario.

アプリを更新してバックエンドから切断するUpdate the app to disconnect from the backend

ここでは、オフライン状況をシミュレートするために、モバイル アプリ バックエンドへの接続を解除します。In this section, you break the connection to your Mobile App backend to simulate an offline situation. データ項目を追加すると、例外ハンドラーによって、アプリがオフライン モードであることが通知されます。When you add data items, your exception handler tells you that the app is in offline mode. この状態では、新しい項目はローカル ストアに追加され、プッシュが次に接続状態で実行したときに、モバイル アプリ バックエンドに同期されます。In this state, new items added in the local store and will be synced to the mobile app backend when push is next run in a connected state.

  1. 共有プロジェクトで App.xaml.cs を編集します。Edit App.xaml.cs in the shared project. MobileServiceClient の初期化をコメント アウトし、無効なモバイル アプリ URL を使用する次の行を追加します。Comment out the initialization of the MobileServiceClient and add the following line, which uses an invalid mobile app URL:

      public static MobileServiceClient MobileService = new MobileServiceClient("https://your-service.azurewebsites.fail");
    

    また、デバイス上で Wi-Fi および移動体通信ネットワークを無効にしてオフライン動作をデモンストレーションすることも、機内モードを使用することもできます。You can also demonstrate offline behavior by disabling wifi and cellular networks on the device or use airplane mode.

  2. F5 キーを押し、アプリケーションをビルドして実行します。Press F5 to build and run the app. アプリを起動した際の更新時には同期が失敗することに注意してください。Notice your sync failed on refresh when the app launched.

  3. 新しい項目を入力し、 MobileServicePushFailedException をクリックするたびに CancelledByNetworkErrorステータスでプッシュが失敗することを確認します。Enter new items and notice that push fails with a CancelledByNetworkError status each time you click Save. ただし、新しい todo 項目は、モバイル アプリ バックエンドにプッシュされるまでは、ローカル ストア内に存在します。However, the new todo items exist in the local store until they can be pushed to the mobile app backend. 運用アプリでは、これらの例外を抑制した場合、クライアント アプリはモバイル アプリ バックエンドにまだ接続されているかのように動作します。In a production app, if you suppress these exceptions the client app behaves as if it's still connected to the mobile app 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 で、 サーバー エクスプローラーを開きます。(Optional) 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. バックエンド データベース内のデータが変更されていないことを確認します。Verify that the data in the backend database has not changed.

  6. (省略可能) Fiddler や Postman などの REST ツールを使用して、モバイルのバックエンドをクエリします。その際、https://<your-mobile-app-backend-name>.azurewebsites.net/tables/TodoItem の形式で、GET クエリを使用します。(Optional) Use a REST tool such as Fiddler or Postman to query your mobile backend, using a GET query in the form https://<your-mobile-app-backend-name>.azurewebsites.net/tables/TodoItem.

モバイル アプリ バックエンドに再接続するようにアプリケーションを更新するUpdate the app to reconnect your Mobile App backend

ここでは、アプリをモバイル アプリ バックエンドに再接続します。In this section, you reconnect the app to the mobile app backend. これらの変更は、アプリでのネットワークの再接続をシミュレートしています。These changes simulate a network reconnection on the app.

初めてアプリケーションを実行すると、OnNavigatedTo イベント ハンドラーが InitLocalStoreAsync を呼び出します。When you first run the application, the OnNavigatedTo event handler calls InitLocalStoreAsync. このメソッドが次に SyncAsync を呼び出し、ローカル ストアとバックエンドのデータベースを同期します。This method in turn calls SyncAsync to sync your local store with the backend database. アプリは起動時に同期しようとします。The app attempts to sync on startup.

  1. 共有プロジェクトで App.xaml.cs を開き、正しいモバイル アプリ URL を使用するために以前の MobileServiceClient の初期化をコメント解除します。Open App.xaml.cs in the shared project, and uncomment your previous initialization of MobileServiceClient to use the correct the mobile app URL.

  2. F5 キーを押して、アプリケーションをリビルドして実行します。Press the F5 key to rebuild and run the app. アプリは、OnNavigatedTo イベント ハンドラーが実行されると、プッシュとプルの操作によって、ローカルでの変更を Azure Mobile Apps バックエンドに同期します。The app syncs your local changes with the Azure Mobile App backend using push and pull operations when the OnNavigatedTo event handler executes.

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

  4. アプリケーションで、ローカル ストアで完了させる項目の横にあるチェック ボックスをクリックします。In the app, click the check box beside a few items to complete them in the local store.

    UpdateCheckedTodoItemSyncAsync を呼び出し、完了した各項目をモバイル アプリ バックエンドと同期します。UpdateCheckedTodoItem calls SyncAsync to sync each completed item with the Mobile App backend. SyncAsync はプッシュとプルの両方を呼び出します。SyncAsync calls both push and pull. ただし、クライアントが変更したテーブルに対してプルを実行するたびに、プッシュが常に自動的に実行されますHowever, whenever you execute a pull against a table that the client has made changes to, a push is always executed automatically. この動作は、ローカル ストアのすべてのテーブルとリレーションシップの一貫性を確実に保つためです。This behavior ensures all tables in the local store along with relationships remain consistent. この動作によって、予期しないプッシュが行われることがあります。This behavior may result in an unexpected push. この動作については、「 Azure Mobile Apps でのオフライン データ同期」を参照してください。For more information on this behavior, see Offline Data Sync in Azure Mobile Apps.

API の概要API Summary

モバイル サービスのオフライン機能をサポートするために、IMobileServiceSyncTable インターフェイスを使用し、ローカル SQLite データベースで MobileServiceClient.SyncContext を初期化しました。To support the offline features of mobile services, we used the IMobileServiceSyncTable interface and initialized MobileServiceClient.SyncContext with a local SQLite database. オフラインのときは、モバイル アプリに対する通常の CRUD 操作は、アプリケーションはまだ接続されているが、操作はローカル ストアに対して発生したかのように動作します。When offline, the normal CRUD operations for Mobile Apps work as if the app is still connected while the operations occur against the local store. ローカル ストアをサーバーと同期するには、次のメソッドを使用します。The following methods are used to synchronize the local store with the server:

  • PushAsync このメソッドは IMobileServicesSyncContext のメンバーなので、すべてのテーブルに対する変更はバックエンドにプッシュされます。PushAsync Because this method is a member of IMobileServicesSyncContext, changes across all tables are pushed to the backend. ローカルに変更されたレコードのみが、サーバーに送信されます。Only records with local changes are sent to the server.
  • PullAsync プルは IMobileServiceSyncTable から開始されます。PullAsync A pull is started from a IMobileServiceSyncTable. テーブルに追跡されている変更がある場合は、ローカル ストア内のすべてのテーブルとリレーションシップの一貫性が保持されるように、暗黙のプッシュが実行されます。When there are tracked changes in the table, an implicit push is run to make sure that all tables in the local store along with relationships remain consistent. pushOtherTables パラメーターは、コンテキスト内の他のテーブルが暗黙のプッシュでプッシュされるかどうかを制御します。The pushOtherTables parameter controls whether other tables in the context are pushed in an implicit push. query パラメーターは、IMobileServiceTableQuery<T> または OData クエリ文字列を受け取り、返されたデータをフィルター処理します。The query parameter takes an IMobileServiceTableQuery<T> or OData query string to filter the returned data. queryId パラメーターは、増分同期の定義に使用されます。詳細については、「Azure Mobile Apps でのオフライン データ同期」を参照してください。The queryId parameter is used to define incremental sync. For more information, see Offline Data Sync in Azure Mobile Apps.
  • PurgeAsync アプリはこのメソッドを定期的に呼び出して、ローカル ストアから古いデータを消去する必要があります。PurgeAsync Your app should periodically call this method to purge stale data from the local store. まだ同期されていないすべての変更を消去する必要がある場合は、 force パラメーターを使用します。Use the force parameter when you need to purge any changes that have not yet been synced.

これらの概念の詳細については、「 Azure Mobile Apps でのオフライン データ同期」を参照してください。For more information about these concepts, see Offline Data Sync in Azure Mobile Apps.

詳細情報More info

Mobile Apps のオフライン同期機能の詳しい背景情報については、以下のトピックを参照してください。The following topics provide additional background information on the offline sync feature of Mobile Apps: