Qu'est-ce qu'Event Notifications ?

Event Notifications est un service de routage des notifications d'événements qui vous informe des événements critiques survenant dans votre compte IBM Cloud ou qui déclenche des actions automatisées à l'aide de webhooks. Vous pouvez filtrer et acheminer les notifications d'événements provenant des services d' IBM Cloud, tels que Availability Monitoring, vers des e-mails, des SMS, des notifications push et des webhooks.

Comment les clients utilisent-ils les notifications push Chrome Web ?

Le diagramme suivant montre comment les clients utilisent les notifications push Chrome Web.

Objectifs

Ce tutoriel explique comment envoyer des notifications push comme suit :

• Créez un site Web avec Event Notifications.
• Obtenez les données d'identification Chrome Web.
• Téléchargez le SDK et effectuez la configuration des notifications.
• Configurez et envoyez des notifications push Chrome Web à un navigateur.

Avant de commencer

Vous devez disposer des prérequis suivants :

• Téléchargez et installez n'importe quel éditeur de code pour créer le code d'un site web à l'aide des langages HTML, CSS et JavaScript
• Un compte Google pour vous connecter à la console Firebase afin d'obtenir votre ID d'expéditeur et la clé de l'API du serveur.
• Un compte IBM Cloud. Si vous n'en avez pas, créez un compte IBM Cloud.

Création d'une instance de service Event Notifications

• Connectez-vous à votre compte IBM Cloud.
• Dans le catalogue IBM Cloud, recherchez Event Notifications > Event Notifications.
• Sélectionnez une région dans la liste des régions prises en charge, puis choisissez une formule tarifaire.
• Fournissez un nom de service.
• Sélectionnez un Groupe de ressources.
• Acceptez les contrats de licence et les dispositions en cochant la case.
• Cliquez sur Créer.

Obtenir les données d'identification FCM

Firebase Cloud Messaging (FCM) est la passerelle qui envoie des notifications push aux périphériques Chrome Web. Pour configurer la destination push Chrome Web sur la console, vous devez obtenir vos données d'identification FCM (clé de serveur). La clé du serveur est stockée en toute sécurité et utilisée par le service Event Notifications pour se connecter au serveur FCM.

• Accédez à la console Firebase. Un compte utilisateur Google est requis.
• Cliquez sur Create a project. Si vous avez déjà un projet, cliquez sur Ajouter un projet.
• Dans la fenêtre Créer un projet, saisissez un nom de projet, acceptez les conditions générales et activez ou désactivez les analyses d' Google s (facultatif) en sélectionnant le bouton bascule, puis cliquez sur Continuer.
• Si Google Analytics est activé, dans la fenêtre Configure Google Analytics, choisissez un emplacement dans Analytics location et acceptez les termes.
• Cliquez sur Create Project.
• Cliquez sur Continue lorsque le nouveau projet est prêt.
• Dans le panneau de navigation, sélectionnez l'icône des paramètres située à côté de Aperçu du projet, puis sélectionnez Paramètres > Paramètres du projet.
• Cliquez sur l'onglet Cloud Messaging pour afficher les informations d'identification de votre projet : clé de serveur.

Ajouter une source d'API générique

Pour créer une source API générique :

• Cliquez sur Sources dans l'instance d' Event Notifications.
• Cliquez sur Créer et sélectionnez une source API dans la boîte de dialogue Créer une source.
• Saisissez un nom et, si vous le souhaitez, une description, puis cliquez sur Créer une source.

Créer une destination Event Notifications

Cliquez sur Destinations dans l'instance d' Event Notifications, puis cliquez sur Créer.

Saisissez les informations suivantes concernant la destination dans la boîte de dialogue Créer une destination.

• Nom: ajoutez un nom pour la destination.
• Description: ajoutez une description facultative pour la destination.
• Type: sélectionnez le type de notifications push Chrome dans la liste déroulante.
• Sélectionnez un plan de destination: Destination de préproduction ou Destination de production.
  • Destination de pré-production- sélectionnez cette destination comme destination de poussée à faible coût pour vos environnements de développement et de test.
  • Destination de production- utiliser toutes les capacités de cette destination. Nombre illimité d'appareils et de messages sortants autorisés.
• Ajoutez votre site web URL à la liste blanche.
• Ajoutez la clé du serveur, que vous avez obtenue dans la section Obtenir les informations d'identification du FCM.
• Cliquez sur Créer une destination.
• Lorsque la destination Chrome est créée, modifiez-la pour obtenir la clé publique vapID requise pour le SDK web.

Créer une Event Notifications rubrique

Cliquez sur Topics dans l’instance d’ Event Notifications, puis cliquez sur Create. Saisissez le sujet et les détails de filtrage suivants dans les étapes Détails du sujet et Filtres d'événements:

• Nom: saisissez un nom pour la rubrique.
• Description: ajoutez une description facultative pour le sujet.
• Source: sélectionnez une source dans la liste déroulante.
• Type d'événement: sélectionnez le type d'événement dans la liste déroulante.
• Sous-type d'événement: sélectionnez le sous-type d'événement dans la liste déroulante des sous-types d'événements.
• Gravité: sélectionnez le niveau de gravité dans la liste déroulante correspondante.
• Conditions avancées: écrivez vos propres conditions personnalisées, qui doivent respecter les spécifications de jsonpath. Les expressions Jsonpath peuvent être validées à jsonpath.com ou extendsclass.com.

Créer un Event Notifications abonnement

Passez à l'étape Abonnements. Cliquez sur Créer, puis saisissez les informations d'abonnement suivantes dans la boîte de dialogue Créer un abonnement.

• Nom de l'abonnement: saisissez un nom pour l'abonnement.
• Type de destination: sélectionnez le type de destination.
• Destination: sélectionnez une destination.

Cliquez sur Créer un abonnement.

Configurer le SDK Chrome Web Event Notifications

Le SDK Chrome Web permet aux sites Web Chrome de recevoir des notifications push. Procédez comme suit pour installer le SDK Chrome Web Event Notifications, initialiser le SDK et sélectionner l'envoi de notifications pour votre site Web.

• Pour intégrer le SDK à votre projet, ajoutez les fichiers manifest_Website.json ENPushSDK.js, ENPushServiceWorker.js, et au dossier racine de votre projet.

• Éditez le fichier manifest_Website.json.

  {
     "name": "YOUR_WEBSITE_NAME"
  }
  

• Changez le nom de fichier manifest_Website.json en manifest.json.

• Insérez-le dans manifest.json la balise <head> de votre fichier HTML.

  <link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">
  

• Intégrez le SDK Web Push d' IBM Cloud au script.

  <script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>
  

• Suivez les étapes suivantes pour permettre au site web d'initialiser le SDK.

  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: région de l'instance Event Notifications. Par exemple, us-south,eu-gb, au-syd, eu-de ou eu-es.

  • deviceId: facultatif deviceId pour l'enregistrement d'appareil.

• Pour sélectionner l'envoi de notifications, utilisez l'API register() ou registerWithUserId() pour enregistrer le périphérique auprès du service Event Notifications. Sélectionnez l'une des options suivantes :

  • S'enregistrer sans UserId :

     enPush.register(function(response) {
        alert(response.response)
     })
     ```
  
  * Inscrivez-vous sur `userId`. Pour les notifications `userId` basées sur, la méthode register accepte un paramètre supplémentaire : `userId`.
  
  ```js
     enPush.registerWithUserId("UserId",function(response) {
        alert(response.response)
     })
     ```
  
     `UserId` est la valeur de l'identificateur utilisateur avec lequel vous souhaitez enregistrer les périphériques dans l'instance de service push.
  
  

• L'API subscribe abonne le périphérique à une balise. Une fois que le périphérique est abonné à une balise particulière, il peut recevoir des notifications envoyées pour cette balise. Ajoutez le fragment de code suivant à votre application Web pour vous abonner à une liste de balises.

  enPush.subscribe(tagName, function(response) {
     alert(response.response)
  })
  

• Une fois la configuration terminée, exécutez votre application et enregistrez pour les notifications push.

Envoyer des notifications au périphérique Chrome Web

Utilisez l'API d'envoi de notifications pour envoyer la notification push pour le périphérique Chrome Web. Vous pouvez utiliser les touches Node, Go, Python ou Java au lieu d'appeler directement l'API.

Réception d'une notification sur le site Web de Chrome dans MacOS.