Creación y envío de notificaciones push a Chrome web mediante Event Notifications
Cree un servicio de Event Notifications, añada un destino de envío para las notificaciones de envío de Chrome y envíe mensajes a los dispositivos web de Chrome.
¿Qué es Event Notifications?
Event Notifications es un servicio de enrutamiento de notificaciones de eventos que le informa sobre eventos críticos que se producen en su cuenta IBM Cloud o desencadena acciones automatizadas mediante el uso de webhooks. Puede filtrar y enrutar notificaciones de eventos desde servicios IBM Cloud como Availability Monitoring, a correo electrónico, SMS, notificaciones push y webhooks.
¿Cómo utilizan los clientes las notificaciones de envío push web de Chrome?
El diagrama siguiente muestra cómo los clientes utilizan las notificaciones de envío push web de Chrome.
Objetivos
Esta guía de aprendizaje muestra cómo enviar notificaciones de envío push de la siguiente manera:
- Cree un sitio web con Event Notifications.
- Obtener credenciales web de Chrome.
- Descargue el SDK y complete la configuración de las notificaciones.
- Configure y envíe notificaciones de envío web de Chrome a un navegador.
Antes de empezar
Debe tener los requisitos previos siguientes aplicados:
- Descargue e instale cualquier editor de código para corregir el código del sitio web mediante HTML, CSS y js.
- Una cuenta de Google para iniciar la sesión en la consola de Firebase para obtener el ID de remitente y la clave de API de servidor.
- Una cuenta de IBM Cloud. Si no tiene una, cree una cuenta de IBM Cloud.
Crear una instancia de servicio de Event Notifications
- Inicie sesión en su cuenta deIBM Cloud.
- En el catálogoIBM Cloud, busca '
Event Notifications > Event Notifications
. - Seleccione un
Region
de la lista de regiones soportadas y seleccione unpricing plan
. - Proporcione un
Service name
. - Seleccione un
resource group
. - Acepte los acuerdos de licencia y los términos pulsando el recuadro de selección.
- Pulse
Create
.
Obtener credenciales FCM
Firebase Cloud Messaging (FCM) es la pasarela que distribuye notificaciones push a los dispositivos web de Chrome. Para configurar el destino de Chrome web Push en la consola, debe obtener las credenciales de FCM (clave de servidor). La clave del servidor se almacena de forma segura y es utilizada por el servicio Event Notifications para conectarse al servidor FCM.
- Vaya a la Consola de Firebase. Se requiere una cuenta de Google.
- Pulse
Create a project
. Si ya tiene un proyecto, pulseAdd Project
. - En
Create a project window
, especifique un nombre de proyecto y acepte los términos y habilite o inhabilite la analítica de Google (opcional) seleccionando el conmutador de conmutación y pulseContinue
. - Si Google Analytics está habilitado, en la ventana
Configure Google Analytics
, elijaAnalytics location
y acepte los términos. - Pulse
Create Project
. - Pulse
Continue
cuando el nuevo proyecto esté listo. - En el panel de navegación, seleccione el icono
settings
situado junto aProject Overview
y seleccioneSettings > Project settings
. - Pulse el separador
Cloud Messaging
para ver las credenciales del proyecto:Server Key
.
{: caption="
Añadir un origen de API genérico
Siga estos pasos:
- Vaya a la sección
Sources
del panel de control de Event Notifications. - Pulse
Add
y seleccione un origen de API. - Escriba un nombre y una descripción opcional y pulse
Add
.
Crear un destino Event Notifications
Pulse Destinations
en la consola de Event Notifications y añada los siguientes detalles de destino:
Name
: añada un nombre para el destino.Description
: añada una descripción opcional para el destino.Type
: seleccione el tipo 'Chrome Push Notifications
' de la lista desplegable.- Seleccione un plan de destino: Destino de preproducción o Destino de producción.
Pre-production destination
-seleccione este destino como destino de envío de bajo coste, para los entornos de desarrollo y prueba.Production destination
-utilizar la capacidad completa de este destino. Dispositivos ilimitados y mensajes salientes permitidos.
- Añada la URL de su sitio web para permitir que aparezca en la lista.
- Añada el
Server Key
, que ha obtenido de la secciónGet FCM credentials
. - Pulse Añadir.
- Cuando se crea el destino de Chrome, edite el destino creado para obtener la clave vapId pública necesaria para el sdk web.


Crear un tema Event Notifications
Seleccione Topics
en la consola de Event Notifications y pulse Create
. Especifique los siguientes detalles del tema:
Name
: especifique un nombre para el tema.Description
: añada una descripción opcional para el tema.Source
: seleccione un origen de la lista desplegable.Event type
: seleccione el tipo de suceso en la lista desplegable.Event sub type
seleccione un subtipo de suceso en la lista desplegable de subtipos de sucesos.Severity
: seleccione la gravedad en la lista desplegable de gravedad.Advanced conditions
: escriba sus propias condiciones personalizadas, que deben seguir las especificaciones de jsonpath.
Crear una suscripción de Event Notifications
Pulse Subscriptions
en la consola de Event Notifications. Especifique los siguientes detalles la suscripción:
- Pulse
Click
para visualizar el asistente de suscripción. - Complete los siguientes detalles de suscripción:
Subscription name
: nombre de la suscripción.Subscription description
: añada una descripción opcional.
- En la sección
Subscribe to a topic
, seleccione un tema en la lista desplegable y seleccione un destino en la lista desplegable de destino. Destination type
: seleccione el tipo enDestination
y pulseAdd
.
Configurar el SDK web de Event Notifications Chrome
El SDK web de Chrome permite que los sitios web de Chrome reciban notificaciones push. Siga los pasos siguientes para instalar el SDK web de Event Notifications Chrome, inicializar el SDK y registrarse para las notificaciones de su sitio web.
-
Para incluir el SDK en su proyecto, añada los archivos '
ENPushSDK.js
' ,ENPushServiceWorker.js
, y 'manifest_Website.json
a la carpeta raíz de su proyecto. -
Edite el archivo
manifest_Website.json
.{ "name": "YOUR_WEBSITE_NAME" }
-
Cambie el nombre del archivo
manifest_Website.json
amanifest.json
. -
Incluya el '
manifest.json
' en la etiqueta '<head>
' de su archivo html.<link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">
-
Incluye IBM Cloud web push SDK al script.
<script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>
-
Complete los siguientes pasos para permitir que el sitio web inicialice el 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
: Región de la instancia de Event Notifications. Por ejemplo,us-south
,eu-gb
,au-syd
,eu-de
oeu-es
. -
deviceId
:deviceId
opcional para el registro de dispositivos.
-
-
Para registrarse en las notificaciones, utilice la API
register()
oregisterWithUserId()
para registrar el dispositivo con el servicio Event Notifications. Seleccione una de las opciones siguientes:-
Registrarse sin
UserId
:enPush.register(function(response) { alert(response.response) })
-
Registrarse con '
userId
. Para las notificaciones basadas en "userId
", el método de registro acepta un parámetro más: "userId
.bmsPush.registerWithUserId("UserId",function(response) { alert(response.response) })
UserId
es el valor de identificador de usuario con el que desea registrar dispositivos en la instancia de servicio de envío.
-
-
La API de
subscribe
suscribe el dispositivo para una etiqueta. Después de que el dispositivo esté suscrito a una etiqueta determinada, el dispositivo puede recibir notificaciones que se envían para dicho código. Añada el siguiente fragmento de código a la aplicación web para suscribirse a una lista de etiquetas.enPush.subscribe(tagName, function(response) { alert(response.response) })
-
Cuando la configuración se haya completado, ejecute la aplicación y regístrese para notificaciones push.
Enviar notificaciones al dispositivo web de Chrome
Utilice la API de notificación de envío para enviar la notificación de envío para el dispositivo web de Chrome. Puede utilizar el SDK de administración de Nodo o Go en lugar de llamar directamente a la API.
Se ha recibido la notificación en el sitio web de Chrome en MacOS.
