Erstellen und Senden von Push-Benachrichtigungen an Chrome Web mit Event Notifications

Erstellen Sie einen Event Notifications-Service, fügen Sie ein Push-Ziel für Chrome-Push-Benachrichtigungen hinzu und senden Sie Nachrichten an Chrome-Webgeräte.

Was ist Event Notifications?

Event Notifications ist ein Dienst zur Weiterleitung von Ereignisbenachrichtigungen, der Sie über kritische Ereignisse in Ihrem IBM Cloud-Konto informiert oder mithilfe von Webhooks automatisierte Aktionen auslöst. Sie können Ereignisbenachrichtigungen von IBM Cloud-Diensten wie Availability Monitoring filtern und an E-Mail, SMS, Push-Benachrichtigungen und Webhooks weiterleiten.

Wie verwenden Kunden Chrome-Web-Push-Benachrichtigungen?

Das folgende Diagramm zeigt, wie Kunden Chrome-Web-Push-Benachrichtigungen verwenden.

Wie Kunden
Kunden Push-Benachrichtigungen

Ziele

Dieses Lernprogramm zeigt im Folgenden, wie Sie Push-Benachrichtigungen senden:

  • Website mit Event Notifications erstellen.
  • Chrome-Webberechtigungsnachweise abrufen.
  • SDK herunterladen und die Benachrichtigungskonfiguration abschließen.
  • Chrome-Web-Push-Benachrichtigungen konfigurieren und an einen Browser senden.

Vorbereitende Schritte

Folgende Voraussetzungen müssen erfüllt sein:

  • Laden Sie einen beliebigen Code-Editor herunter und installieren Sie ihn, um Website-Code mit HTML, CSS und JavaScript zu erstellen.
  • Ein Google-Konto für die Anmeldung an der Firebase-Konsole, um Ihre Absender-ID und Ihren Server-API-Schlüssel abzurufen.
  • Ein IBM Cloud-Konto. Wenn Sie keine haben, erstellen Sie ein IBM Cloud-Konto.

Erstellen Sie eine Event Notifications-Serviceinstanz.

  • Melden Sie sich bei IBM Cloud-Accountan.
  • Suchen Sie im IBM Cloud-Katalog unter Event Notifications > Event Notifications.
  • Wählen Sie eine Region aus der Liste der unterstützten Regionen aus und wählen Sie einen Preisplan aus.
  • Geben Sie einen Servicenamen an.
  • Wählen Sie eine Ressourcengruppe aus.
  • Akzeptieren Sie die Lizenzvereinbarungen und Bedingungen, indem Sie auf das Kontrollkästchen klicken.
  • Klicken Sie auf Erstellen.

FCM-Berechtigungsnachweise abrufen

Firebase Cloud Messaging (FCM) ist das Gateway, das Push-Benachrichtigungen an Chrome-Webgeräte übermittelt. Damit das Chrome-Web-Push-Ziel in der Konsole eingerichtet werden kann, müssen Sie Ihre FCM-Berechtigungsnachweise (Serverschlüssel) abrufen. Der Server-Schlüssel wird sicher gespeichert und vom Event Notifications-Dienst verwendet, um eine Verbindung zum FCM-Server herzustellen.

  • Rufen Sie Firebase-Konsole auf. Eine Google-Benutzerkonto ist erforderlich.
  • Klicken Sie auf Projekt erstellen. Wenn Sie bereits ein Projekt haben, klicken Sie auf Projekt hinzufügen.
  • Geben Sie im Fenster Projekt erstellen einen Projektnamen ein, akzeptieren Sie die Nutzungsbedingungen und aktivieren oder deaktivieren Sie die Google-Analysen (optional), indem Sie den Umschalter betätigen. Klicken Sie anschließend auf Weiter.
  • Wenn Google Analytics aktiviert ist, wählen Sie im Fenster Google Analytics konfigurieren die Analyseposition aus und akzeptieren Sie die Bedingungen.
  • Klicken Sie auf Projekt erstellen.
  • Klicken Sie auf Weiter, wenn das neue Projekt bereit ist.
  • Im Navigationsbereich wählen Sie das Einstellungssymbol neben der Projektübersicht und anschließend Einstellungen > Projekteinstellungen.
  • Klicken Sie auf die Registerkarte Cloud Messaging, um Ihre Projekt-Anmeldedaten anzuzeigen: Server-Schlüssel.

FCM-Berechtigungsnachweis
FCM-Berechtigungsnachweis

Generische API-Quelle hinzufügen

So erstellen Sie eine generische API-Quelle:

  • Klicken Sie in der Event Notifications-Instanz auf Quellen.
  • Klicken Sie auf Erstellen und wählen Sie im Dialogfeld Quelle erstellen eine API-Quelle aus.
  • Geben Sie einen Namen und optional eine Beschreibung ein und klicken Sie auf Quelle erstellen.

Ein neues Event Notifications-Ziel erstellen

Klicken Sie in der Event Notifications-Instanz auf Destinations und dann auf Create.

Geben Sie im Dialogfeld Ziel erstellen die folgenden Zielangaben ein.

  • Name: Geben Sie einen Namen für das Ziel ein.
  • Beschreibung: Fügen Sie eine optionale Beschreibung für das Ziel hinzu.
  • Typ: Wählen Sie den Typ Chrome-Push-Benachrichtigungen aus der Dropdown-Liste aus.
  • Wählen Sie einen Zielplan aus: Vorproduktionsziel oder Produktionsziel.
    • Vorproduktionsziel- Wählen Sie dieses Ziel als kostengünstiges Push-Ziel für Ihre Entwicklungs- und Testumgebungen.
    • Produktionsziel- Nutzen Sie die volle Leistungsfähigkeit dieses Ziels. Unbegrenzte Anzahl an Geräten und ausgehenden Nachrichten zulässig.
  • Fügen Sie Ihre Website URL zur Whitelist hinzu.
  • Fügen Sie den Server-Schlüssel hinzu, den Sie im Abschnitt FCM-Anmeldeinformationen abrufen erhalten haben.
  • Klicken Sie auf Ziel erstellen.
  • Wenn das Chrome-Ziel erstellt ist, bearbeiten Sie das Ziel, um den öffentlichen Schlüssel vapID zu erhalten, der für das Web-SDK erforderlich ist.

![Ziel](images/en-push-chrome-destination-edit.png "" caption-side="bottom"}"){: caption="

Ziel
Benachrichtigungen erhalten

Event Notifications-Thema erstellen

Klicken Sie in der Event Notifications-Instanz auf Themen und dann auf Erstellen. Geben Sie in den Schritten Themendetails und Ereignisfilter die folgenden Themen- und Filterdetails ein:

  • Name: Geben Sie einen Namen für das Thema ein.
  • Beschreibung: Fügen Sie eine optionale Beschreibung zum Thema hinzu.
  • Quelle: Wählen Sie eine Quelle aus der Dropdown-Liste aus.
  • Ereignistyp: Wählen Sie den Ereignistyp aus der Dropdown-Liste aus.
  • Ereignisuntertyp: Wählen Sie den Ereignisuntertyp aus der Dropdown-Liste Ereignisuntertyp aus.
  • Schweregrad: Wählen Sie den Schweregrad aus der Dropdown-Liste Schweregrad aus.
  • Erweiterte Bedingungen: Schreiben Sie Ihre eigenen benutzerdefinierten Bedingungen, die den jsonpath-Spezifikationen entsprechen müssen. Jsonpath-Ausdrücke können validiert werden unter jsonpath.com oder extendsclass.com.

Event Notifications-Subskription erstellen

Fahren Sie mit dem Schritt Abonnements fort. Klicken Sie auf Erstellen und geben Sie im Dialogfeld Abonnement erstellen die folgenden Abonnementdetails ein.

  • Abonnementname: Geben Sie einen Namen für das Abonnement ein.
  • Zieltyp: Zieltyp auswählen.
  • Ziel: Ziel auswählen.

Klicken Sie auf Abonnement erstellen.

Event Notifications Chrome-Web-SDK einrichten

Das Chrome-Web-SDK ermöglicht Chrome-Websites den Empfang von Push-Benachrichtigungen. Führen Sie die folgenden Schritte aus, um das Event Notifications Chrome-Web-SDK zu installieren, das SDK zu initialisieren und sich für Benachrichtigungen für Ihre Website zu registrieren.

  • Um das SDK in Ihr Projekt einzubinden, fügen Sie die Dateien manifest_Website.json ENPushSDK.js, ENPushServiceWorker.js, und zum Stammordner Ihres Projekts hinzu.

  • Bearbeiten Sie die Datei manifest_Website.json.

    {
       "name": "YOUR_WEBSITE_NAME"
    }
    
  • Ändern Sie den Namen der Datei manifest_Website.json in manifest.json.

  • Fügen Sie das in manifest.json das -Tag <head> Ihrer HTML-Datei ein.

    <link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">
    
  • Fügen Sie das Web-Push-SDK von IBM Cloud in das Skript ein.

    <script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>
    
  • Führen Sie die folgenden Schritte aus, damit die Website das SDK initialisieren kann.

    var enPush = new ENPush()
    function callback(response) {
       alert(response.response)
    }
    var initParams = {
       "instanceGUID": "<instance_guid>",
       "apikey": "<instance_apikey>",
       "region": "<region>",
       "deviceId": "<YOUR_DEVICE_ID>",
       "chromeDestinationId": "<chrome_destination_id>",
       "chromeApplicationServerKey": "<Chrome_VapId_public_key>"
    }
    enPush.initialize(initParams, callback)
    
    • region: Region der Event Notifications-Instanz. Beispiel: us-south,eu-gb, au-syd, eu-de oder eu-es.

    • deviceId: Optional deviceId für die Einheitenregistrierung.

  • Verwenden Sie die API register() oder registerWithUserId(), um das Gerät beim Event Notifications-Service zu registrieren, damit Sie eine Registrierung für Benachrichtigungen durchführen können. Wählen Sie eine der folgenden Optionen aus:

    • Ohne UserId registrieren:
       enPush.register(function(response) {
          alert(response.response)
       })
       ```
    
    * Registrieren Sie sich bei `userId`. Bei einer auf `userId`-basierten Benachrichtigung akzeptiert die Register-Methode einen weiteren Parameter – `userId`.
    
    ```js
       enPush.registerWithUserId("UserId",function(response) {
          alert(response.response)
       })
       ```
    
       `UserId` ist die Benutzer-ID, mit der Sie Geräte in der Push-Serviceinstanz registrieren möchten.
    
    
  • Die API subscribe subskribiert das Gerät für einen Tag. Nachdem das Gerät einen bestimmten Tag abonniert hat, kann das Gerät Benachrichtigungen empfangen, die für diesen Tag gesendet werden. Fügen Sie das folgende Code-Snippet Ihrer Webanwendung hinzu, um eine Liste von Tags zu subskribieren.

    enPush.subscribe(tagName, function(response) {
       alert(response.response)
    })
    
  • Führen Sie nach Abschluss der Konfiguration Ihre Anwendung aus und registrieren Sie sich für Push-Benachrichtigungen.

Benachrichtigungen an das Chrome-Webgerät senden

Verwenden Sie API zum Senden von Benachrichtigungen, um die Push-Benachrichtigung für das Chrome-Webgerät zu senden. Sie können die Tasten Node, Gehen, Python oder Java admin SDK verwenden, anstatt die API direkt aufzurufen.

Empfangene Benachrichtigung auf der Chrome-Website in MacOS.

caption-side=bottom"
Benachrichtigungen