Windows アプリにプッシュ通知を追加する

2019-06-25

概要

このチュートリアルでは、 Windows クイックスタートプロジェクトにプッシュ通知を追加して、レコードが挿入されるたびにプッシュ通知がデバイスに送信されるようにします。

ダウンロードしたクイックスタートサーバープロジェクトを使用しない場合は、プッシュ通知拡張機能パッケージが必要です。詳細については、 Azure Mobile Apps 用の .NET バックエンドサーバー SDK の操作に関するページを参照してください。

通知ハブを構成する

Azure App Service の Mobile Apps 機能では、Azure Notification Hubs #C1 #B0 を使用してプッシュを送信するため、モバイルアプリの通知ハブを構成します。

Azure ポータルで、アプリサービスに移動し、アプリのバックエンドを選択します。 [#B0 設定] で、[プッシュ] を選択してください。
アプリに通知ハブリソースを追加するには、接続を選択します。ハブを作成するか、既存のハブに接続できます。

#B0 #A1 ハブ #A2 #C3 を設定する

これで、通知ハブが Mobile Apps バックエンドプロジェクトに接続されました。後で、デバイスにプッシュするプラットフォーム通知システム (PNS) に接続するようにこの通知ハブを構成します。

アプリケーションをプッシュ通知に登録する

アプリを Microsoft Store に送信し、プッシュを送信するために Windows プッシュ通知サービス (WNS) と統合するようにサーバープロジェクトを構成する必要があります。

Visual Studio ソリューションエクスプローラーで、UWP アプリプロジェクトを右クリックし、[ストア>ストアにアプリを関連付けます...] をクリックします。
ウィザードで [次] をクリックし、Microsoft アカウントでサインインして、[新しいアプリ名の予約]でアプリの名前を入力し、[予約] をクリックします。
アプリの登録が正常に作成されたら、新しいアプリ名を選択し、[ 次へ] をクリックし、[ 関連付け] をクリックします。これにより、必要な Microsoft Store 登録情報がアプリケーションマニフェストに追加されます。
アプリケーション登録ポータルに移動し、Microsoft アカウントでサインインします。前の手順で関連付けられた Windows ストアアプリをクリックします。
登録ページで、[ アプリケーションシークレット ] と [パッケージ SID] の値を書き留めます。この値は、次にモバイルアプリバックエンドの構成に使用します。

重要

クライアントシークレットとパッケージ SID は重要なセキュリティ資格情報です。これらの値を他のユーザーと共有したり、アプリに配布したりしないでください。 アプリケーション ID は、Microsoft アカウント認証を構成するためにシークレットと共に使用されます。

App Center には、プッシュ通知用に UWP アプリを構成する手順もあります。

プッシュ通知を送信するようにバックエンドを構成する

Azure portal で、すべてを参照>App Services を選択します。次に、Mobile Apps バックエンドを選択します。設定でApp Service プッシュを選択します。次に、通知ハブ名を選択します。
Windows (WNS) に移動します。次に、Live Services サイトから取得したセキュリティキー（クライアントシークレット）とパッケージ SID を入力します。次に「保存」を選択してください。

これで、WNS を使用してプッシュ通知を送信するようにバックエンドが構成されました。

プッシュ通知を送信するようにサーバーを更新する

バックエンドプロジェクトの種類に合わせて、.NET バックエンドまたは Node.js バックエンドに一致する手順を使用します。

.NET バックエンドプロジェクト

Visual Studio で、サーバープロジェクトを右クリックし、[ NuGet パッケージの管理] をクリックし、Microsoft.Azure.NotificationHubs を検索して、[ インストール] をクリックします。これにより、Notification Hubs クライアントライブラリがインストールされます。
[コントローラー] を展開し、TodoItemController.csを開き、次の using ステートメントを追加します。
```
using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;
```

PostTodoItemメソッドの中で、InsertAsyncの呼び出しの後に次のコードを追加します。

// Get the settings for the server project.
HttpConfiguration config = this.Configuration;
MobileAppSettingsDictionary settings =
    this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();

// Get the Notification Hubs credentials for the Mobile App.
string notificationHubName = settings.NotificationHubName;
string notificationHubConnection = settings
    .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;

// Create the notification hub client.
NotificationHubClient hub = NotificationHubClient
    .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);

// Define a WNS payload
var windowsToastPayload = @"<toast><visual><binding template=""ToastText01""><text id=""1"">"
                        + item.Text + @"</text></binding></visual></toast>";
try
{
    // Send the push notification.
    var result = await hub.SendWindowsNativeNotificationAsync(windowsToastPayload);

    // Write the success result to the logs.
    config.Services.GetTraceWriter().Info(result.State.ToString());
}
catch (System.Exception ex)
{
    // Write the failure result to the logs.
    config.Services.GetTraceWriter()
        .Error(ex.Message, null, "Push.SendAsync Error");
}

このコードは、新しい項目が挿入された後にプッシュ通知を送信するように通知ハブに指示します。

サーバープロジェクトを再公開します。

Node.js バックエンドプロジェクト

バックエンドプロジェクトを設定します。

todoitem.js ファイル内の既存のコードを次のコードに置き換えます。

var azureMobileApps = require('azure-mobile-apps'),
promises = require('azure-mobile-apps/src/utilities/promises'),
logger = require('azure-mobile-apps/src/logger');

var table = azureMobileApps.table();

table.insert(function (context) {
// For more information about the Notification Hubs JavaScript SDK,
// see https://aka.ms/nodejshubs
logger.info('Running TodoItem.insert');

// Define the WNS payload that contains the new item Text.
var payload = "<toast><visual><binding template=\ToastText01\><text id=\"1\">"
                            + context.item.text + "</text></binding></visual></toast>";

// Execute the insert.  The insert returns the results as a Promise,
// Do the push as a post-execute action within the promise flow.
return context.execute()
    .then(function (results) {
        // Only do the push if configured
        if (context.push) {
            // Send a WNS native toast notification.
            context.push.wns.sendToast(null, payload, function (error) {
                if (error) {
                    logger.error('Error while sending push notification: ', error);
                } else {
                    logger.info('Push notification sent successfully!');
                }
            });
        }
        // Don't forget to return the results from the context.execute()
        return results;
    })
    .catch(function (error) {
        logger.error('Error while running context.execute: ', error);
    });
});

module.exports = table;

これにより、新しい todo 項目が挿入されたときに item.text を含む WNS トースト通知が送信されます。

ローカルコンピューターでファイルを編集するときは、サーバープロジェクトを再発行します。

アプリにプッシュ通知を追加する

次に、アプリは起動時にプッシュ通知に登録する必要があります。既に認証を有効にしている場合は、プッシュ通知に登録する前にユーザーがサインインしていることを確認してください。

App.xaml.cs プロジェクトファイルを開き、次のusingステートメントを追加します。
```
using System.Threading.Tasks;
using Windows.Networking.PushNotifications;
```

同じファイルで、次の InitNotificationsAsync メソッド定義を App クラスに追加します。

private async Task InitNotificationsAsync()
{
    // Get a channel URI from WNS.
    var channel = await PushNotificationChannelManager
        .CreatePushNotificationChannelForApplicationAsync();

    // Register the channel URI with Notification Hubs.
    await App.MobileService.GetPush().RegisterAsync(channel.Uri);
}

このコードは、WNS からアプリの ChannelURI を取得し、その ChannelURI を App Service モバイルアプリに登録します。

App.xaml.csの OnLaunched イベントハンドラーの上部で、非同期修飾子をメソッド定義に追加し、次の例のように、新しい InitNotificationsAsync メソッドに次の呼び出しを追加します。
```
protected async override void OnLaunched(LaunchActivatedEventArgs e)
{
    await InitNotificationsAsync();

    // ...
}
```
これにより、アプリケーションが起動されるたびに、有効期間の短い ChannelURI が登録されます。
UWP アプリプロジェクトをリビルドします。これで、アプリでトースト通知を受信する準備ができました。

アプリでプッシュ通知をテストする

Windows ストアプロジェクトを右クリックし、[ スタートアッププロジェクトとして設定] をクリックし、F5 キーを押して Windows ストアアプリを実行します。

アプリの起動後、デバイスはプッシュ通知に登録されます。
Windows ストアアプリを停止し、Windows Phone ストアアプリの前の手順を繰り返します。

この時点で、両方のデバイスがプッシュ通知を受信するように登録されます。
Windows ストアアプリをもう一度実行し、[ TodoItem の挿入] にテキストを入力し、[ 保存] をクリックします。

挿入が完了すると、Windows ストアアプリと Windows Phone アプリの両方が WNS からプッシュ通知を受け取ります。アプリが実行されていない場合でも、Windows Phone に通知が表示されます。

次のステップ

プッシュ通知の詳細については、以下をご覧ください。

Azure Mobile Apps でマネージドクライアントを使用する方法テンプレートを使用すると、クロスプラットフォームプッシュとローカライズされたプッシュを柔軟に送信できます。テンプレートを登録する方法について説明します。
プッシュ通知の問題を診断する通知が削除されたり、デバイスに表示されたりしない理由はさまざまです。このトピックでは、プッシュ通知エラーの根本原因を分析して把握する方法について説明します。

次のいずれかのチュートリアルに進んでください。

アプリに認証を追加する ID プロバイダーを使用してアプリのユーザーを認証する方法について説明します。
アプリのオフライン同期を有効にするモバイルアプリバックエンドを使用してアプリのオフラインサポートを追加する方法について説明します。オフライン同期を使用すると、エンドユーザーは、ネットワーク接続がない場合でも、モバイルアプリを操作できます (データの表示、追加、変更)。