Cómo funciona el envío

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

Los tres pasos clave para implementar las notificaciones 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 de tu app web que registra a un usuario para recibir mensajes push)
2. La llamada a la API desde tu backend o aplicación que activa un mensaje push en el dispositivo de un usuario
3. El archivo JavaScript del service worker que recibirá un "evento push" cuando llegue la notificación push al dispositivo En este JavaScript, podrás mostrar una notificación.

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

Paso 1: Cliente

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

Para suscribir a un usuario, se requieren 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 considerarlo como un ID para el dispositivo de ese usuario.

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

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 únicas para tu servidor. Permiten que un servicio push sepa qué servidor de aplicaciones suscribió a 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 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 algo más?
• ¿Qué puede hacer la API?

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

Un servicio push recibe una solicitud de red, la valida y entrega un mensaje push al navegador adecuado. Si el navegador no está conectado, 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 pueden controlar. Esto no es un problema porque cada servicio push espera la misma llamada a la API. Esto significa que no tienes que preocuparte por quién es el servicio push. Solo debes asegurarte de que la 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 consultar el valor endpoint en un PushSubscription.

A continuación, se muestra un ejemplo de los valores que obtendrás de un 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 push 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.

Las claves de la suscripción se abordarán más adelante.

¿Cómo se ve la API?

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

La llamada a la API requiere que se establezcan ciertos encabezados y que los datos sean una secuencia de bytes. Veremos las bibliotecas que pueden realizar esta llamada a la API por nosotros, así como la forma de hacerlo nosotros mismos.

¿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ías con un mensaje push deben estar encriptados. El motivo es que impide que los servicios push, que pueden 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 push usar, lo que podría abrir la puerta a navegadores que usan un servicio push que no es seguro.

Cuando activas un mensaje push, el servicio push recibirá la llamada a la API y pondrá el mensaje en cola. 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 push definen cómo se pone en cola el mensaje push.

Las instrucciones incluyen detalles como los siguientes:

• El tiempo de actividad de un mensaje push. Esto define cuánto tiempo debe ponerse en cola un mensaje antes de que se quite y no se entregue.

• Define la urgencia del mensaje. Esto es útil en caso de que el servicio push 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 mensaje.

Paso 3: Evento push en el dispositivo del usuario

Una vez que enviemos un mensaje push, el servicio push mantendrá tu mensaje 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 push quita el mensaje de su cola y nunca se entregará.

Cuando el servicio 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 "special" archivo JavaScript. El navegador puede ejecutar este JavaScript sin que se abra tu página. 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 del service worker).

Dentro del evento "push" del service worker, 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 funcionan las notificaciones push
• Cómo suscribir a un usuario
• UX de permisos
• Cómo enviar mensajes con bibliotecas de Web Push
• Protocolo de Web Push
• Cómo controlar eventos push
• Cómo mostrar una notificación
• Comportamiento de las notificaciones
• Patrones de notificación 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