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 te informa de los eventos críticos que se producen en tu cuenta de IBM Cloud o que activa acciones automatizadas mediante webhooks. Puedes filtrar y redirigir las notificaciones de eventos de servicios de 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.

utilizan los clientes las
push*

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:

  • Descarga e instala cualquier editor de código para crear el código de un sitio web utilizando HTML, CSS y JavaScript.
  • 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álogo IBM Cloud, busca Event Notifications > Event Notifications.
  • Selecciona una región de la lista de regiones compatibles y elige un plan de precios.
  • Proporcione un Nombre de servicio.
  • Seleccione un Grupo de recursos.
  • Acepte los acuerdos de licencia y los términos pulsando el recuadro de selección.
  • Pulse Crear.

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 el servicio Event Notifications la utiliza para conectarse al servidor de FCM.

  • Vaya a la Consola de Firebase. Se requiere una cuenta de Google.
  • Pulse Crear un proyecto. Si ya tienes un proyecto, haz clic en Añadir proyecto.
  • En la ventana Crear un proyecto, introduce un nombre para el proyecto, acepta los términos y activa o desactiva la analítica de Google (opcional) seleccionando el botón de alternancia; a continuación, haz clic en Continuar.
  • Si Google Analytics está habilitado, en la ventana Configurar Google Analytics, elija la Ubicación de Analytics y acepte los términos.
  • Pulse Crear proyecto.
  • Pulse Continuar cuando el nuevo proyecto esté preparado.
  • En el panel de navegación, selecciona el icono de configuración situado junto a Descripción general del proyecto y selecciona Configuración > Configuración del proyecto.
  • Haz clic en la pestaña Cloud Messaging para ver las credenciales de tu proyecto: clave del servidor.

![Credenciales](images/en-fcm-credentials.png "" caption-side="bottom"}"){: caption="

Añadir un origen de API genérico

Para crear una fuente de API genérica:

  • Haz clic en Fuentes en la instancia de Event Notifications.
  • Haz clic en Crear y selecciona una fuente de API en el cuadro de diálogo Crear fuente.
  • Escribe un nombre y una descripción opcional y haz clic en Crear fuente.

Crear un destino Event Notifications

Haz clic en Destinos en la instancia de Event Notifications y haz clic en Crear.

Introduce los siguientes datos del destino en el cuadro de diálogo Crear destino.

  • Nombre: introduce un nombre para el destino.
  • Descripción: añade una descripción opcional para el destino.
  • Tipo: selecciona el tipo de notificaciones push de Chrome en la lista desplegable.
  • Seleccione un plan de destino: Destino de preproducción o Destino de producción.
    • Destino de preproducción: seleccione este destino como destino push de bajo coste para sus entornos de desarrollo y prueba.
    • Destino de producción: utilice toda la capacidad de este destino. Se permite un número ilimitado de dispositivos y mensajes salientes.
  • Añade tu sitio web URL a la lista de sitios permitidos.
  • Añada la clave del servidor que obtuvo en la sección Obtener credenciales de FCM.
  • Haz clic en Crear destino.
  • Una vez creado el destino Chrome, edítelo para obtener la clave pública vapID necesaria para el SDK web.

caption-side=bottom"
Destino

Destino
Recibir notificaciones

Crear un tema Event Notifications

Haz clic en Temas en la instancia de Event Notifications y haz clic en Crear. Introduce los siguientes detalles sobre el tema y los filtros en los pasos Detalles del tema y Filtros de eventos:

  • Nombre: introduce un nombre para el tema.
  • Descripción: añade una descripción opcional para el tema.
  • Fuente: selecciona una fuente de la lista desplegable.
  • Tipo de evento: selecciona el tipo de evento en la lista desplegable.
  • Subtipo de evento: selecciona el subtipo de evento en la lista desplegable de subtipos de evento.
  • Gravedad: selecciona la gravedad en la lista desplegable de gravedad.
  • Condiciones avanzadas: escriba sus propias condiciones personalizadas, que deben seguir las especificaciones de jsonpath. Las expresiones Jsonpath pueden validarse en jsonpath.com o en extendsclass.com.

Crear una suscripción de Event Notifications

Pasa al paso Suscripciones. Haga clic en Crear e introduzca los siguientes datos de la suscripción en el cuadro de diálogo Crear suscripción.

  • Nombre de la suscripción: introduce un nombre para la suscripción.
  • Tipo de destino: selecciona el tipo de destino.
  • Destino: selecciona el destino.

Pulse Crear suscripción.

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 tu proyecto, añade los archivos manifest_Website.json ENPushSDK.js, ENPushServiceWorker.js, y a la carpeta raíz de tu proyecto.

  • Edite el archivo manifest_Website.json.

    {
       "name": "YOUR_WEBSITE_NAME"
    }
    
  • Cambie el nombre del archivo manifest_Website.json a manifest.json.

  • Incluye el en manifest.json la etiqueta <head> de tu archivo HTML.

    <link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">
    
  • Incluye el SDK de notificaciones push web de IBM Cloud en el script.

    <script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>
    
  • Sigue los siguientes pasos para que el sitio web pueda inicializar 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 o eu-es.

    • deviceId: deviceId opcional para el registro de dispositivos.

  • Para registrarse en las notificaciones, utilice la API register() o registerWithUserId() 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)
       })
       ```
    
    * Regístrate en `userId`. Para las notificaciones `userId` basadas en, el método register acepta un parámetro más: `userId`.
    
    ```js
       enPush.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 los botones NodeirPython o Java admin SDK en lugar de llamar directamente a la API.

Se ha recibido la notificación en el sitio web de Chrome en MacOS.

caption-side=bottom"
Recibir