Créer et envoyer des notifications push sur Chrome web en utilisant Event Notifications

Créez un service Event Notifications, ajoutez une destination push pour Chrome Push Notifications et envoyez des messages aux périphériques Chrome Web.

Qu'est-ce qu'Event Notifications ?

Event Notifications est un service de routage de notification d'événements qui vous informe des événements critiques qui se produisent dans votre compte IBM Cloud ou qui déclenche des actions automatisées en utilisant des webhooks. Vous pouvez filtrer et acheminer les notifications d'événements provenant de services IBM Cloud tels que Availability Monitoring, vers des courriels, 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.

push*

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 corriger le code d'un site web en utilisant HTML, CSS et js.
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 catalogueIBM Cloud, recherchez 'Event Notifications > Event Notifications.
Sélectionnez une Region dans la liste des régions prises en charge et sélectionnez une pricing plan.
Fournissez un Service name.
Sélectionner resource group.
Acceptez les contrats de licence et les dispositions en cochant la case.
Cliquez sur Create.

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 Add Project.
Dans Create a project window, entrez un nom de projet, acceptez les termes et activez ou désactivez l'analyse Google (facultatif) en sélectionnant le commutateur à bascule et cliquez sur Continue.
Si l'analyse Google est activée, dans la fenêtre Configure Google Analytics, choisissez 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 settings en regard de Project Overview et sélectionnez Settings > Project settings.
Cliquez sur l'onglet Cloud Messaging pour afficher les données d'identification de votre projet: Server Key.

la FCM*

Ajouter une source d'API générique

Suivez ces étapes :

Accédez à la section Sources du tableau de bord Event Notifications.
Cliquez sur Add et sélectionnez une source d'API.
Entrez un nom et une description facultative, puis cliquez sur Add.

Créer une destination Event Notifications

Cliquez sur Destinations dans la console Event Notifications et ajoutez les détails de destination suivants :

Name : ajoutez un nom pour la destination.
Description : ajoutez une description facultative pour la destination.
Type: sélectionner le type 'Chrome Push Notifications dans la liste déroulante.
Sélectionnez un plan de destination: Destination de préproduction ou Destination de production.
- Pre-production destination-sélectionnez cette destination comme destination d'envoi à faible coût, pour vos environnements de développement et de test.
- Production destination-utilisez la fonctionnalité complète de cette destination. Nombre illimité de dispositifs et de messages sortants autorisés.
Ajoutez l'URL de votre site web pour qu'il soit autorisé à figurer sur la liste.
Ajoutez le Server Key que vous avez obtenu de la section Get FCM credentials.
Cliquez sur Ajouter.
Lorsque la destination Chrome est créée, éditez la destination créée pour obtenir la clé vapId publique requise pour le SDK Web.

Créer une Event Notifications rubrique

Sélectionnez Topics dans la console Event Notifications, puis cliquez sur Create. Entrez les détails de la rubrique suivante :

Name : entrez un nom pour la rubrique.
Description : ajoutez une description facultative pour le sujet.
Source : sélectionnez une source dans la liste déroulante.
Event type : sélectionnez le type d'événement dans la liste déroulante.
Event sub type : sélectionnez un sous-type d'événement dans la liste déroulante du sous-type d'événement.
Severity : sélectionnez la gravité dans la liste déroulante de gravité.
Advanced conditions : écrivez vos propres conditions personnalisées, qui doivent suivre les spécifications jsonpath.

Créer un Event Notifications abonnement

Cliquez sur Subscriptions dans la console Event Notifications. Entrez les détails suivants sur l'abonnement :

Cliquez sur Click pour afficher l'assistant d'abonnement.
Complétez les détails de l'abonnement suivants :
- Subscription name : nom de l'abonnement.
- Subscription description : ajout d'une description facultative.
Sous la section Subscribe to a topic, sélectionnez une rubrique dans la liste déroulante et une destination dans la liste déroulante de destination.
Destination type : sélectionnez un type sous Destination et cliquez sur Add.

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 inclure le SDK dans votre projet, ajoutez les fichiers " ENPushSDK.js,ENPushServiceWorker.js et " manifest_Website.json 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.

Incluez le " manifest.json dans 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">

Inclure IBM Cloud web push SDK dans le script.

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

Effectuez 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)
})
```
- S'inscrire avec 'userId. Pour la notification basée sur le " userId, la méthode d'enregistrement accepte un paramètre supplémentaire - le " userId.
```
bmsPush.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 le SDK d'administration Nœud ou Go au lieu d'appeler directement l'API.

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