Cómo funciona el envío

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:

1. 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).
2. La llamada a la API de tu backend o aplicación que activa un mensaje push al dispositivo de un usuario.
3. Es el archivo JavaScript del service worker que recibirá un “evento push” cuando este llegue al dispositivo. En este JavaScript, podrá mostrar una notificación.

Veamos qué implica cada uno de estos pasos con un poco más de detalle.

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.

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.

Paso 2: Envía un mensaje push

Cuando quieres enviar un mensaje push a los usuarios, debes realizar una llamada a la API a un servicio de envío. 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:

• ¿Qué es y qué es el servicio push?
• ¿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, algo que los desarrolladores no controlan. Esto no es un problema, ya que cada servicio 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 y activar un mensaje de envío (es decir, la URL del servicio de envío), solo tienes que ver 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, se abordarán 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 envío definen cómo se pone en cola el mensaje de envío.

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 a un mensaje push un nombre de “tema” que reemplazará cualquier mensaje pendiente con este mensaje nuevo.

Paso 3: Evento push en el 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:

1. El dispositivo se conecta y el servicio de notificaciones 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 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 desde la secuencia de comandos de un service worker).

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

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

Próximos pasos

• Descripción general de las notificaciones push web
• Cómo funciona Push
• Cómo suscribir a un usuario
• UX de permisos
• Envía mensajes con bibliotecas push web
• Protocolo de envío web
• 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 comunes e informar errores

Codelabs

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