Web-Pushbenachrichtigungen mit Azure Notification Hubs

In diesem Artikel wird beschrieben, wie Sie Browser-Pushbenachrichtigungen mithilfe von Azure Notification Hubs an einzelne Benutzer senden.

Auf hoher Ebene lautet der Prozess:

  1. Festlegen von Anmeldeinformationen:

  2. Erstellen Sie Registrierungen und Installationen.

  3. Pushbenachrichtigungen senden:

Überblick

Web-Push (oder Browser-Push) ist eine Art von Benachrichtigung, die Kunden auf ihren Desktopbrowsern oder, in einigen Fällen, auf mobilen Browsern pro Website erhalten.

Azure Notification Hubs unterstützt jetzt browser push für alle gängigen Browser, einschließlich Microsoft Edge, Google Chrome und Mozilla Firefox. Apple Safari ist nicht enthalten. Für Apple Safari können Sie vorhandene APNS-Unterstützung verwenden, wie unter Konfigurieren von Safari-Pushbenachrichtigungen mit zertifikatbasierter Authentifizierung beschrieben.

Browser-Push wird auf allen Plattformen auf Geräten mit den folgenden Betriebssystemen und Browsern unterstützt.

Browser-Pushunterstützung auf Laptopcomputern:

Betriebssystem Browser
Windows Betriebssystem Google Chrome v48+
Microsoft Edge v17+
Mozilla Firefox v44+
Safari v7+
Opera v42+
macOS Chrome v48+
Firefox v44+
Safari v7+
Opera v42+
Linux-Betriebssystem Chrome v48+
Firefox v44+
Safari v7+
Opera v42+

Browser-Pushunterstützung auf Tablet-PCs:

Betriebssystem Browser
Windows Betriebssystem Chrome v48+
Firefox v44+
Opera v42+
Ios Nicht unterstützt.
Android-Betriebssystem Chrome v48+
Firefox v44+
Opera v42+

Browser-Pushunterstützung auf mobilen Geräten:

Betriebssystem Browser
Ios Nicht unterstützt.
Android-Betriebssystem Chrome v48+
Firefox v44+
Opera v42+

Festlegen von Anmeldeinformationen

Um Browser-Pushbenachrichtigungen auf Ihrer Website zu abonnieren, können Sie VAPID-Schlüssel verwenden. Sie können VAPID-Anmeldeinformationen mithilfe von Diensten wie dem VAPID-Schlüsselgenerator generieren. Die Anmeldeinformationen sollten etwa wie im folgenden Beispiel aussehen:

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

Festlegen von Anmeldeinformationen im Azure-Portal

Führen Sie die folgenden Schritte aus, um Browser-Pushanmeldeinformationen im Azure-Portal festzulegen:

  1. Öffnen Sie im Azure Portal das Browser (Web Push) Blatt in Ihrem Benachrichtigungshub.

    Screenshot des Bereichs „Browser (Web-Push)“ in Notification Hubs

  2. Geben Sie Ihre vorhandenen VAPID-Schlüssel ein, oder generieren Sie ein neues VAPID-Schlüsselpaar mit einem Dienst wie dem VAPID-Schlüsselgenerator.

  3. Wählen Sie Speichern aus.

Festlegen von Anmeldeinformationen mithilfe der REST-API

Sie können die Browseranmeldeinformationen für Browser-Push auch mithilfe der REST-API festlegen, z. B. mithilfe der Create or update Hub REST API method, the Azure Resource Manager API, or the V2 RP.

Geben Sie die Anmeldeinformationen in diesem Format ein, und geben Sie die Abonnement-ID, Ressourcengruppe, Namespace und Benachrichtigungshub an:

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

Festlegen von Anmeldeinformationen mithilfe von Azure SDKs

Sie können die Anmeldeinformationen für Browser-Push mithilfe der Azure SDKs festlegen. Hier ist ein Beispiel mit dem .NET SDK:

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

und:

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

Erstellen von Registrierungen und Installationen

Massensendungen erfordern Registrierungen oder Installationen. Sie können auch die Registrierungen und Installationen im Debug-Sendevorgang verwenden.

Die folgenden Beispiele zeigen den Registrierungsanforderungstext für eine systemeigene Registrierung, eine Vorlagenregistrierung und eine Browserinstallation.

Systemeigener Registrierungsanforderungstext

<?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>

Anforderungstext der Browservorlage für die Registrierung

<?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>

Installationsanforderungstext

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

Erstellen systemeigener Registrierungen (SDK)

await notificationHubClient.CreateBrowserNativeRegistrationAsync(subscriptionInfo, tagSet);

Erstellen von Vorlagenregistrierungen (SDK)

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

Erstellen von Browserinstallationen (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);

Senden von Pushbenachrichtigungen

Nachdem Sie Anmeldeinformationen für Browser-Push festgelegt und Registrierungen und Installationen für die Geräte erstellt haben, können Sie Pushbenachrichtigungen erstellen. In diesem Abschnitt wird beschrieben, wie Sie eine Benachrichtigung für ein direktes Senden|, einen Zielgruppenversand und eine Debug (Test) Sendung erstellen.

Direkte Sendungen erstellen

Für ein direktes Senden benötigen Sie den Endpunkt-URI, den p25DH-Schlüssel und den Authentifizierungsschlüssel aus einem Browserabonnement. Weitere Informationen zu Direct Send-Benachrichtigungen finden Sie unter "Direktes Senden".

Führen Sie die folgenden Schritte aus, um eine direkte Sendebenachrichtigung zu erstellen:

  1. Legen Sie die folgenden Header für Browser-Push fest:

    • ServiceBusNotification-Format - browser
    • ServiceBusNotification-DeviceHandle - endpoint: das endpoint Feld aus dem Abonnement
    • P256DH: das p256dh Feld aus dem Abonnement
    • Auth: das auth Feld aus dem Abonnement

  2. Erstellen Sie den Nachrichtentext. Der Nachrichtentext befindet sich in der Regel in diesem Format:

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

    Sie können andere Felder im Textkörper angeben; Beispielsweise , iconum das Symbol pro Nachricht zu ändern.

  3. Senden Sie die Benachrichtigung.

Sie können auch das .NET SDK verwenden, um ein direktes Senden zu erstellen:

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

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

Senden an Zielgruppen erstellen

Verwenden Sie für das Senden an eine Zielgruppe denselben ServiceBus Notification-Format Header, der für ein direktes Senden verwendet wird, und ändern Sie die Nachrichtennutzlast nach Bedarf. Optional können Sie einen Tagausdruck mithilfe des ServiceBusNotification-Tags Headers angeben. Weitere Informationen zum Erstellen eines Sendens einer Benutzergruppe finden Sie unter Senden einer systemeigenen APNS-Benachrichtigung.

Verwenden Sie die folgende Anweisung, um eine Benutzergruppe zu erstellen, die mit dem SDK gesendet wird:

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

Debug-/Test-Sendevorgang erstellen

Debugsendungen werden im Azure Portal erstellt und erfordern Registrierungen und Installationen.

Nachdem Sie Registrierungen für die Geräte erstellt haben, führen Sie die folgenden Schritte aus, um eine Debug-Sendebenachrichtigung zu erstellen:

  1. Öffnen Sie im Azure-Portal den Bereich Test Send in Ihrem Benachrichtigungshub.

    Screenshot der Kachel

  2. Wählen Sie im Feld "Plattform " die Option "Browser" aus.

  3. Geben Sie Senden an Tagausdruck an.

  4. Ändern Sie Payload in die gewünschte Nachricht.

  5. Wählen Sie "Senden" aus.

Nächste Schritte

  • Last updated on