Cómo funciona el envío

Matt Gaunt

Antes de entrar en la API, veamos las notificaciones push desde un nivel alto, de principio a fin. Luego, a medida que repasemos temas o APIs individuales, tendrás una idea de cómo y por qué es importante.

Los tres pasos clave para implementar la entrega push son los siguientes:

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

Veamos con un poco más de detalle lo que implica cada uno de estos pasos.

Paso 1: Lado del cliente

El primer paso es "suscribir" a un usuario a los mensajes push.

Para suscribir a un usuario, se necesitan dos cosas. Primero, 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 pensar en esto como un ID para el dispositivo de ese usuario.

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

Browser Support

• 42
• 17
• 44
• 16

Source

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

Las claves del servidor de aplicaciones, también conocidas como claves VAPID, son exclusivas de tu servidor. Permiten que un servicio de envío sepa qué servidor de aplicaciones suscribió a un usuario y garantizan 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.

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 y qué es el servicio push?
• ¿Cómo se ve la API? ¿Es JSON, XML o algún otro formato?
• ¿Qué puede hacer la API?

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

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

Cada navegador puede usar el servicio push que desee, es algo sobre lo que los desarrolladores no tienen control. Esto no es un problema porque todos los servicios de envío esperan la misma llamada a la API. Esto significa que no tienes que preocuparte por quién es el servicio de envío de notificaciones push. Solo debes asegurarte de que tu llamada a la API sea válida.

Para obtener la URL adecuada que active 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=="
  }
}

En este caso, el extremo es https://random-push-service.com/some-kind-of-unique-id-1234/v2/. El servicio de envío sería "random-push-service.com" y cada extremo es único para un usuario, indicado con "some-kind-of-unique-id-1234". A medida que comiences a trabajar con las notificaciones push, notarás este patrón.

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

¿Cómo se ve la API?

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

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 de envío, que podrían ser cualquier persona, puedan ver los datos enviados con el mensaje push. Esto es importante, ya que es el navegador el que decide qué servicio de envío de notificaciones push usar, lo que podría abrir la puerta a que los navegadores usen un servicio de envío de notificaciones push que no sea seguro.

Cuando activas un mensaje push, el servicio push recibe la llamada a la API y pone en cola el mensaje. Este mensaje permanecerá en cola hasta que el dispositivo del usuario se conecte y el servicio de envío pueda entregar los mensajes. Las instrucciones que puedes dar al servicio de envío 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 cuánto tiempo debe permanecer un mensaje 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 de envío preserve la duración de la batería de los usuarios entregando solo mensajes de alta prioridad.

• Asigna un nombre de "tema" a un mensaje push, que reemplazará cualquier mensaje pendiente por este nuevo.

Paso 3: Evento de envío en el dispositivo del usuario

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

1. El dispositivo se conecta y el servicio push entrega el mensaje.
2. El mensaje vence. Si esto ocurre, el servicio de envío quita el mensaje de su cola y nunca se entregará.

Cuando el servicio de envío de mensajes push entrega un mensaje, el navegador lo recibe, desencripta los datos y envía un evento push en tu service worker.

Un service worker es un archivo de JavaScript "especial". El navegador puede ejecutar este código de JavaScript sin que tu página esté abierta. Incluso puede ejecutar este 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).

Es dentro del evento "push" del service worker que puedes realizar cualquier tarea en segundo plano. Puedes realizar llamadas de estadísticas, almacenar páginas en caché sin conexión y mostrar notificaciones.

Ese es todo el flujo de la mensajería push.

Próximos pasos

• Descripción general de las notificaciones push web
• Cómo funciona el envío de notificaciones push
• Cómo suscribir a un usuario
• UX de permisos
• Envía mensajes con bibliotecas de Web Push
• Protocolo de Web Push
• Cómo controlar los eventos push
• Cómo mostrar una notificación
• Comportamiento de las notificaciones
• Patrones de notificaciones comunes
• Preguntas frecuentes sobre las notificaciones push
• Problemas habituales y cómo informar errores

Code labs

• Cómo compilar un cliente de notificaciones push
• Cómo compilar un servidor de notificaciones push