次の方法で共有

Azure Notification Hubs を使用した Web プッシュ通知

この記事では、Azure Notification Hubs を使用してブラウザープッシュ通知を単一ユーザーに送信する方法について説明します。

大まかに言えば、プロセスは次のとおりです。

  1. 資格情報を設定します。

  2. 登録とインストールを作成します。

  3. プッシュ通知を送信する:

概要

Web プッシュ (または ブラウザー プッシュ) は、お客様がデスクトップ ブラウザーまたは場合によってはモバイル ブラウザーで Web サイトごとに受信する通知の一種です。

Azure Notification Hubs では、Microsoft Edge、Google Chrome、Mozilla Firefox など、すべての主要ブラウザーの ブラウザー プッシュ がサポートされるようになりました。 Apple Safari は含まれていません。 Apple Safari では、「証明書ベースの認証を使用して Safari プッシュ通知を構成する」の説明に従って、既存の APNS サポートを使用できます。

ブラウザー プッシュは、次のオペレーティング システムとブラウザーを使用するデバイス上のプラットフォーム間でサポートされます。

ラップトップ コンピューターでのブラウザー プッシュのサポート:

オペレーティング システム ブラウザー
Windows オペレーティング システム Google Chrome v48+
Microsoft Edge v17 以降
Mozilla Firefox v44+
Safari v7 以降
Opera v42+
macOS Chrome v48+
Firefox v44 以降
Safari v7 以降
Opera v42+
Linuxオペレーティングシステム Chrome v48+
Firefox v44 以降
Safari v7 以降
Opera v42+

タブレット PC でのブラウザー プッシュのサポート:

オペレーティング システム ブラウザー
Windows オペレーティング システム Chrome v48+
Firefox v44 以降
Opera v42+
iOS サポートされていません。
Android OS Chrome v48+
Firefox v44 以降
Opera v42+

モバイル デバイスでのブラウザー プッシュのサポート:

オペレーティング システム ブラウザー
iOS サポートされていません。
Android OS Chrome v48+
Firefox v44 以降
Opera v42+

資格情報を設定する

Web サイトでブラウザー プッシュ通知をサブスクライブするには、 VAPID キーを使用できます。 VAPID キー ジェネレーターなどのサービスを使用して 、VAPID 資格情報を生成できます。 資格情報は次の例のようになります。

{ 
    "location": "South Central US", 
    "properties": { 
        "browserCredential": { 
            "properties": { 
                "subject": "mailto:email@microsoft.com", 
                "vapidPublicKey": "some-vapid-public-key", 
                "vapidPrivateKey":"some-vapid-private-key" 
            } 
        } 
    } 
}

Azure portal で資格情報を設定する

Azure portal でブラウザープッシュ資格情報を設定するには、次の手順に従います。

  1. Azure portal で、通知ハブのブラウザー (Web プッシュ) ブレードを開きます。

    Notification Hubs の [ブラウザー (Web プッシュ)] ブレードを示すスクリーンショット。

  2. 既存の VAPID キーを入力するか、VAPID キー ジェネレーターなどのサービスを使用して新しい VAPID キー ペアを生成します。

  3. 保存 を選択します。

REST API を使用して資格情報を設定する

Create または update Hub REST API メソッド、Azure Resource Manager API、V2 RP などの REST API を使用して、ブラウザー プッシュのブラウザー資格情報を設定することもできます。

サブスクリプション ID、リソース グループ、名前空間、通知ハブを指定して、次の形式で資格情報を入力します。

https://management.azure.com/subscriptions/{subscription}/resourceGroups/{resource-group}/providers/Microsoft.NotificationHubs/namespaces/{namespace}/notificationHubs/{hub}api-version=2016-03-01

Azure SDK を使用して資格情報を設定する

ブラウザー プッシュの資格情報は、Azure SDK を使用して設定できます。 .NET SDK の使用例を次に示します。

var browserCreds = new BrowserCredential 
{ 
    Subject = "<subject>", 
    VapidPublicKey = "<vapid public key>", 
    VapidPrivateKey = "<vapid private key>", 
}

そして：

await nhManagementClient.NotificationHubs.CreateOrUpdateAsync(config.ResourceGroupName, config.NamespaceName, config.HubName, new NotificationHubCreateOrUpdateParameters(config.Location) 
{ 
   BrowserCredential = browserCreds 
});

登録とインストールを作成する

一括送信には登録またはインストールが必要です。 登録とインストールをデバッグ送信で使用することもできます。

次の例は、ネイティブ登録、テンプレート登録、およびブラウザーインストールの登録要求本文を示しています。

ネイティブ登録の要求本文

<?xml version="1.0" encoding="utf-8"?><entry xmlns="http://www.w3.org/2005/Atom"><content type="application/xml"><BrowserRegistrationDescription xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/netservices/2010/10/servicebus/connect"><Endpoint></Endpoint><P256DH></P256DH><Auth></Auth></BrowserRegistrationDescription></content></entry>

ブラウザー テンプレート登録要求本文

<?xml version="1.0" encoding="utf-8"?> 
<entry xmlns="http://www.w3.org/2005/Atom"> 
    <content type="application/xml"> 
        <BrowserTemplateRegistrationDescription xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/netservices/2010/10/servicebus/connect"> 
            <Endpoint></Endpoint> 
            <P256DH></P256DH> 
            <Auth></Auth> 
            <BodyTemplate><![CDATA[{"title":"asdf","message":"xts"}]]></BodyTemplate> 
        </BrowserTemplateRegistrationDescription> 
    </content> 
</entry>

インストールリクエスト本文

{  
    "installationId": "installation-id", 
    "platform": "browser", 
    "pushChannel": { 
            "endpoint": "", 
            "p256dh": "", 
            "auth": "" 
        } 
}

ネイティブ登録の作成 (SDK)

await notificationHubClient.CreateBrowserNativeRegistrationAsync(subscriptionInfo, tagSet);

テンプレート登録の作成 (SDK)

await notificationHubClient.CreateBrowserTemplateRegistrationAsync(subscriptionInfo, template, tagSet);

ブラウザー インストールの作成 (SDK)

var browserPushSubscription = new BrowserPushSubscription 
            { 
                Endpoint = "", 
                P256DH = "", 
                Auth = "", 
            }; 

var browserInstallation = new BrowserInstallation 
            { 
                InstallationId = installationId, 
                Tags = tags, 
                Subscription = browserPushSubscription, 
                UserId = userId, 
                ExpirationTime = DateTime.UtcNow.AddDays(1), 
            }; 

await notificationHubClient.CreateOrUpdateInstallationAsync(browserInstallation);

プッシュ通知を送信する

ブラウザー プッシュの資格情報を設定し、デバイスの登録とインストールを作成したら、プッシュ通知を作成する準備ができました。 このセクションでは、 直接送信|、 対象ユーザーの送信、 デバッグ (テスト) 送信の通知を作成する方法について説明します。

直接送信を作成する

直接送信するには、ブラウザー サブスクリプションのエンドポイント URI、p25DH キー、および認証シークレットが必要です。 直接送信通知の詳細については、「 直接送信」を参照してください。

直接送信通知を作成するには、次の手順に従います。

  1. ブラウザー プッシュ用に次のヘッダーを設定します。

    • ServiceBusNotification-Format - browser
    • ServiceBusNotification-DeviceHandle - endpoint: サブスクリプションの endpoint フィールド
    • P256DH: サブスクリプションの p256dh フィールド
    • Auth: サブスクリプションの auth フィールド

  2. メッセージ本文を作成します。 通常、メッセージ本文は次の形式です。

    { 
  "title": "Some Title", 
  "body": "Some body of a message" 
}

    本文で他のフィールドを指定できます。たとえば、メッセージごとにアイコンを変更するには、 iconします。

  3. 通知を送信します。

.NET SDK を使用して直接送信を作成することもできます。

var browserSubscriptionEndpoint = ""; 
var browserPushHeaders = new Dictionary<string, string> 
            { 
               { "P256DH", "" }, 
               { "Auth", "" }, 
            }; 

var directSendOutcome = await notificationHubClient.SendDirectNotificationAsync(new BrowserNotification("payload", browserPushHeaders), browserSubscriptionEndpoint);

オーディエンス向けの送信を作成する

対象ユーザー送信の場合は、直接送信に使用されるのと同じ ServiceBus Notification-Format ヘッダーを使用し、必要に応じてメッセージ ペイロードを変更します。 必要に応じて、 ServiceBusNotification-Tags ヘッダーを使用してタグ式を指定します。 対象ユーザーの送信の作成の詳細については、「 APNS ネイティブ通知を送信する」を参照してください。

SDK を使用して対象ユーザー送信を作成するには、次のステートメントを使用します。

var outcome = await notificationHubClient.SendNotificationAsync(new BrowserNotification(payload, tagExpression);

デバッグ/テスト送信を作成する

デバッグ送信は Azure portal で作成され、登録とインストールが必要です。

デバイスの登録を作成したら、次の手順に従ってデバッグ送信通知を作成します。

  1. Azure portal で、通知ハブの [テスト送信] ブレードを開きます。

    テスト/デバッグ通知を送信するための通知ハブの [テスト送信] ブレードを示すスクリーンショット。

  2. [ プラットフォーム ] フィールドで、[ ブラウザー] を選択します。

  3. [送信先タグの式] を指定します。

  4. ペイロードを目的のメッセージに変更します。

  5. [Send] を選択します。

次のステップ