.NET MAUI アプリにオフライン データ同期を追加する

  • [アーティクル]

このチュートリアルでは、.NET MAUI 向けの Azure Mobile Apps のオフライン同期機能について説明します。 オフライン同期を使用すると、エンド ユーザーはネットワーク接続がないときにもモバイル アプリを操作できます。 変更は、ローカル データベースに格納されます。 デバイスが再びオンラインになると、これらの変更がリモート バックエンドと同期されます。

このチュートリアルを開始する前に、適切なバックエンド サービスを作成することを含む .NET MAUI クイックスタート チュートリアルを完了している必要があります。

オフラインの同期機能の詳細については、トピック「Azure Mobile Apps でのオフライン データ同期」を参照してください。

オフライン同期をサポートするようにアプリケーションを更新する

オンライン操作では、IRemoteTable<T> に対して読み取りと書き込みを行います。 オフライン同期を使用する場合は、代わりに IOfflineTable<T> に対して読み取りと書き込みを行います。 IOfflineTable は、デバイス上の SQLite データベースによってサポートされ、バックエンド データベースと同期されます。

Visual Studio:

  1. TodoAppソリューションを右クリックし、[ソリューションの NuGet パッケージの管理] を選択します。

  2. 新しいタブで [参照] を選択し、検索ボックスに「Microsoft.Datasync.Client」と入力します。

    Screenshot of adding the offline NuGet in Visual Studio.

  3. Microsoft.Datasync.Client.SQLiteStore パッケージを選択します。

  4. 右側のウィンドウで、(TodoAppService.NET6プロジェクトを除く) すべてのクライアント プロジェクトを選択します。

  5. [インストール] を選択します。

  6. メッセージが表示されたら、使用許諾契約書に同意します。

リモート サービス クライアントを更新する

TodoApp.Dataプロジェクトを開き、RemoteTodoService.csクラス(Servicesディレクトリ内) を選択します。 このクラスを次のように更新します。

  1. 次の using ステートメントをファイルの先頭に追加します。

    using Microsoft.Datasync.Client.SQLiteStore;

  2. _table の定義を IOfflineTable<TodoItem> に変更します。

    /// <summary>
/// Reference to the table used for datasync operations.
/// </summary>
private IOfflineTable<TodoItem> _table = null;

  3. オフライン データベースの保存先となる新しいプロパティを追加します。

    /// <summary>
/// The path to the offline database
/// </summary>
public string OfflineDb { get; set; }

  4. InitializeAsync メソッドを更新して、オフライン データベースを定義します。

    // Create the offline store definition
var connectionString = new UriBuilder { Scheme = "file", Path = OfflineDb, Query = "?mode=rwc" }.Uri.ToString();
var store = new OfflineSQLiteStore(connectionString);
store.DefineTable<TodoItem>();
var options = new DatasyncClientOptions
{
    OfflineStore = store,
    HttpPipeline = new HttpMessageHandler[] { new LoggingHandler() }
};

// Create the datasync client.
_client = TokenRequestor == null 
    ? new DatasyncClient(Constants.ServiceUri, options)
    : new DatasyncClient(Constants.ServiceUri, new GenericAuthenticationProvider(TokenRequestor), options);

// Initialize the database
await _client.InitializeOfflineStoreAsync();

// Get a reference to the offline table.
_table = _client.GetOfflineTable<TodoItem>();

// Set _initialized to true to prevent duplication of locking.
_initialized = true;

  5. RefreshItemsAsync() を更新して、オフライン同期を実行します。

    /// <summary>
/// Refreshes the TodoItems list manually.
/// </summary>
/// <returns>A task that completes when the refresh is done.</returns>
public async Task RefreshItemsAsync()
{
    await InitializeAsync();

    // First, push all the items in the table.
    await _table.PushItemsAsync();

    // Then, pull all the items in the table.
    await _table.PullItemsAsync();

    return;
}

オフライン データベースの保存先を設定する

TodoApp.MAUI プロジェクトで、MainPage.xaml.cs ファイルを編集します。 RemoteTodoService の定義を次のように変更します。

TodoService = new RemoteTodoService(GetAuthenticationToken)
{
    OfflineDb = FileSystem.CacheDirectory + "/offline.db"
};

認証チュートリアルを完了していない場合、定義は上記ではなく、次のようになります。

TodoService = new RemoteTodoService()
{
    OfflineDb = FileSystem.CacheDirectory + "/offline.db"
};

アプリをテストする

更新アイコンを押さない限り、アプリはバックエンドと同期しません。 テストは、次のようにします。

  1. Azure Portalを開きます。

  2. クイック スタートのリソースが含まれているリソース グループを開きます。

  3. quickstart データベースを選択します。

  4. [クエリ エディター (プレビュー)] を選択します。

  5. データベース用に設定したのと同じ資格情報を使用して、SQL サーバー認証でログインします。

    • 必要に応じて、お使いの IP アドレスへのアクセス許可についてのプロンプトが表示されます。 許可リストを更新するリンクを選択し、OK を押して再びログインします。

  6. クエリ エディターで「SELECT * FROM [dbo].[TodoItems]」と入力します。 その後、実行 を選択します。

現在の TodoItems の一覧が表示されます。

Screenshot of the results in the S Q L query editor.

今度は、アプリを使用していくつかの変更を行います。 [最新の情報に更新] を押さないでください (ここではまだ)。

Azure portal で SQL ステートメントを繰り返し、データベース内のデータに変更が加えられていないことを確認します。

アプリの [最新の情報に更新] アイコンを選択して、キュー内のデータをバックエンド サービスにプッシュします。 HTTP トランザクションが実行されているのが [出力デバッグ] ウィンドウに表示されます。

Azure portal で SQL ステートメントを繰り返し、行った変更がリモート サービスにプッシュされたことを確認します。

リソースをクリーンアップする

別のクイック スタート チュートリアルを実行していない限り、バックエンド サービスに関連付けられているリソースを削除できます。

  1. Azure Portalを開きます。
  2. クイック スタート リソースを含むリソース グループを選択します。
  3. [リソース グループの削除] を選択します。
  4. 指示に沿って、削除を確認します。

Azure CLI を使うこともできます。

az group delete -g quickstart

Azure Developer CLI を使用してリソースをデプロイした場合は、代わりに azd down コマンドを使用できます。

この削除は完了までに数分かかります。

次のステップ