IBM Cloud Docs
Creación y envío de notificaciones push a Chrome web mediante Event Notifications

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.

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:

  • 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 un pricing 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, pulse Add 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 pulse Continue.
  • Si Google Analytics está habilitado, en la ventana Configure Google Analytics, elija Analytics 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 a Project Overview y seleccione Settings > Project settings.
  • Pulse el separador Cloud Messaging para ver las credenciales del proyecto: Server Key.

![Credenciales](images/en-fcm-credentials.png "" caption-side="bottom"}"){: 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ón Get 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.

caption-side=bottom"
Destino

Destination
Receive notifications

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 en Destination y pulse Add.

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 a manifest.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 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)
      })
      
    • 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.

caption-side=bottom"
Recibir