Se usó la API de Cloud Translation para traducir esta página.

Cómo funciona el envío

Matt Gaunt

Antes de entrar en la API, analicemos el envío desde un nivel alto, de principio a fin. Luego, a medida que analicemos temas o APIs individuales más adelante, tendrás una idea de cómo y por qué es importante.

Los tres pasos clave para implementar la notificación push son los siguientes:

Agrega la lógica del cliente para suscribir a un usuario a la función push (es decir, el código JavaScript y la IU de tu app web que registra a un usuario para enviar mensajes push).
Es la llamada a la API de tu backend o aplicación que activa un mensaje push en el dispositivo de un usuario.
El archivo JavaScript del service worker que recibirá un "evento push" cuando llegue el push al dispositivo En este código JavaScript, podrás mostrar una notificación.

Veamos en más detalle lo que implica cada uno de estos pasos.

Paso 1: Del cliente

El primer paso es "suscribir" a un usuario a la mensajería push.

Para suscribir a un usuario, se necesitan dos elementos. Primero, debes obtener el permiso del usuario para enviarle mensajes push. En segundo lugar, obtener un PushSubscription del navegador.

Un PushSubscription contiene toda la información que necesitamos para enviar un mensaje push a ese usuario. Puedes considerarlo como un ID para el dispositivo de ese usuario.

Todo esto se hace en JavaScript con la API de Push.

Navegadores compatibles

Origen

Antes de suscribir a un usuario, deberás generar un conjunto de "claves de servidor de aplicaciones", que analizaremos más adelante.

Las claves del servidor de aplicaciones, también conocidas como claves de VAPID, son únicas para tu servidor. Permiten que un servicio push sepa a qué servidor de aplicaciones se suscribió un usuario y se asegure de que sea el mismo servidor que activa los mensajes push para ese usuario.

Una vez que hayas suscrito al usuario y tengas un PushSubscription, deberás enviar los detalles de PushSubscription a tu backend o servidor. En tu servidor, guardarás esta suscripción en una base de datos y la usarás para enviar un mensaje push a ese usuario.

Asegúrate de enviar PushSubscription a tu backend.

Paso 2: Envía un mensaje push

Cuando quieras enviar un mensaje push a tus usuarios, debes realizar una llamada a la API a un servicio push. Esta llamada a la API incluiría qué datos enviar, a quién enviar el mensaje y cualquier criterio sobre cómo enviarlo. Por lo general, esta llamada a la API se realiza desde tu servidor.

Estas son algunas preguntas que podrías hacerte:

¿Quién es el servicio push y qué es?
¿Cómo se ve la API? ¿Es JSON, XML o algo más?
¿Qué puede hacer la API?

¿Quién es el servicio push y qué es?

Un servicio push recibe una solicitud de red, la valida y entrega un mensaje push al navegador adecuado. Si el navegador no tiene conexión, el mensaje se pone en cola hasta que el navegador se conecte.

Cada navegador puede usar cualquier servicio push que desee, es algo sobre lo que los desarrolladores no tienen control. Esto no es un problema, ya que cada servicio de push espera la misma llamada a la API. Es decir, no te preocupa quién es el servicio push. Solo debes asegurarte de que tu llamada a la API sea válida.

Para obtener la URL adecuada para activar un mensaje push (es decir, la URL del servicio push), solo debes mirar el valor endpoint en un PushSubscription.

A continuación, se muestra un ejemplo de los valores que obtendrás de una PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

El extremo en este caso es [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. El servicio push sería "random-push-service.com" y cada extremo es único para un usuario, indicado con "some-kind-of-unique-id-1234". Cuando empieces a trabajar con push, notarás este patrón.

Más adelante, hablaremos de las claves de la suscripción.

¿Cómo se ve la API?

Mencioné que cada servicio de notificaciones push web espera la misma llamada a la API. Esa API es el protocolo web push. Es un estándar del IETF que define cómo realizar una llamada a la API a un servicio push.

La llamada a la API requiere que se configuren ciertos encabezados y que los datos sean un flujo de bytes. Analizaremos las bibliotecas que pueden realizar esta llamada a la API por nosotros y cómo hacerlo por nuestra cuenta.

¿Qué puede hacer la API?

La API proporciona una forma de enviar un mensaje a un usuario, con o sin datos, y proporciona instrucciones sobre cómo enviar el mensaje.

Los datos que envíes con un mensaje push deben estar encriptados. El motivo es que impide que los servicios push, que pueden ser de cualquier persona, puedan ver los datos enviados con el mensaje push. Esto es importante, ya que el navegador es quien decide qué servicio push usar, lo que podría abrir la puerta a navegadores que usan un servicio push que no es seguro.

Cuando actives un mensaje push, el servicio de push recibirá la llamada a la API y pondrá el mensaje en fila. Este mensaje permanecerá en cola hasta que el dispositivo del usuario se conecte y el servicio push pueda entregar los mensajes. Las instrucciones que puedes darle al servicio de notificaciones push definen cómo se pone en cola el mensaje push.

Las instrucciones incluyen detalles como los siguientes:

Es el tiempo de actividad de un mensaje push. Esto define durante cuánto tiempo un mensaje debe estar en cola antes de que se quite y no se entregue.
Define la urgencia del mensaje. Esto es útil en caso de que el servicio push conserve la duración de batería de los usuarios, ya que solo entrega mensajes de alta prioridad.
Asigna un nombre de "tema" a un mensaje push que reemplazará cualquier mensaje pendiente con este mensaje nuevo.

Cuando tu servidor desea enviar un mensaje de aplicación, realiza una solicitud de protocolo de notificaciones push web a un servicio de notificaciones push.

Paso 3: Envía el evento al dispositivo del usuario

Una vez que enviemos un mensaje push, el servicio de push lo mantendrá en su servidor hasta que ocurra uno de los siguientes eventos:

El dispositivo se conecta y el servicio de notificaciones push entrega el mensaje.
El mensaje vence. Si esto ocurre, el servicio push quita el mensaje de su cola y nunca se entregará.

Cuando el servicio push envíe un mensaje, el navegador lo recibirá, desencriptará los datos y enviará un evento push en tu service worker.

Un service worker es un archivo JavaScript “especial”. El navegador puede ejecutar este código JavaScript sin que tu página esté abierta. Incluso puede ejecutar este código JavaScript cuando el navegador está cerrado. Un service worker también tiene APIs, como push, que no están disponibles en la página web (es decir, APIs que no están disponibles fuera de una secuencia de comandos de service worker).

Dentro del evento "push" del trabajador del servicio, puedes realizar cualquier tarea en segundo plano. Puedes realizar llamadas a Analytics, almacenar en caché páginas sin conexión y mostrar notificaciones.

Cuando se envía un mensaje push desde un servicio push al dispositivo de un usuario, tu service worker recibe un evento push.

Ese es todo el flujo de los mensajes push.