Descripción general de las notificaciones push

Una descripción general de qué son las notificaciones push, por qué podrías usarlas y cómo funcionan.

Kayce Basques
Kayce Basques
X GitHub Error

¿Qué son las notificaciones push?

Los mensajes push te permiten llamar la información de tus usuarios, incluso cuando no usan tu sitio web. Se llaman mensajes push porque puedes "enviar" información a los usuarios incluso cuando no están activos. Compara la tecnología de envío con la tecnología de extracción para comprender mejor este concepto.

Las notificaciones presentan pequeños fragmentos de información a un usuario. Los sitios web pueden usar notificaciones para informar a los usuarios sobre eventos importantes urgentes o acciones que deben realizar. El aspecto de las notificaciones varía según la plataforma:

Ejemplos de notificaciones en macOS y Android.
Ejemplos de notificaciones en macOS y Android.

Los mensajes push y las notificaciones son dos tecnologías independientes pero complementarias. Push es la tecnología para enviar mensajes desde tu servidor a los usuarios, incluso cuando no están usando activamente tu sitio web. Las notificaciones son la tecnología que muestra la información enviada en el dispositivo del usuario. Es posible usar notificaciones sin mensajería push. Un día, es posible que también se puedan usar mensajes push sin notificaciones para el usuario (push silenciosa), pero, por el momento, los navegadores no lo permiten. En la práctica, suelen usarse juntos. Es probable que un usuario no técnico no comprenda la diferencia entre los mensajes push y las notificaciones. En esta colección, cuando decimos notificaciones push, nos referimos a la combinación de envío de un mensaje y, luego, mostrarlo como una notificación. Cuando hablamos de mensajes push, nos referimos a la tecnología push por sí misma. Cuando hablamos de notificaciones, nos referimos a la tecnología de notificaciones en sí misma.

¿Por qué usar notificaciones push?

  • Para los usuarios, las notificaciones push son una forma de recibir información oportuna, relevante y precisa.
  • Para ti (propietario de un sitio web), las notificaciones push son una forma de aumentar la participación de los usuarios.

¿Cómo funcionan las notificaciones push?

En términos generales, los pasos clave para implementar notificaciones push son los siguientes:

  1. Agregar lógica del cliente a fin de solicitarle permiso para enviar notificaciones push y, luego, enviar información del identificador de cliente a tu servidor para su almacenamiento en una base de datos
  2. Agregar lógica de servidor para enviar mensajes a dispositivos cliente
  3. Agrega lógica de cliente para recibir mensajes que se hayan enviado al dispositivo y mostrarlos como notificaciones.

En el resto de esta página, se explican estos pasos con más detalle.

Obtén permiso para enviar notificaciones push

En primer lugar, tu sitio web debe obtener el permiso del usuario para enviar notificaciones push. Esto se debe activar con un gesto del usuario, como hacer clic en un botón Yes junto a un mensaje Do you want to receive push notifications?. Después de esa confirmación, llama a Notification.requestPermission(). Es probable que el sistema operativo o el navegador del dispositivo del usuario presenten algún tipo de IU para confirmar formalmente que el usuario desea habilitar las notificaciones push. Esta IU varía según la plataforma.

Suscribe al cliente a notificaciones push

Después de obtener el permiso, tu sitio web debe iniciar el proceso de suscribir al usuario a notificaciones push. Esto se hace a través de JavaScript, con la API de Push. Deberás proporcionar una clave de autenticación pública durante el proceso de suscripción, sobre la que obtendrás más información más adelante. Después de iniciar el proceso de suscripción, el navegador realiza una solicitud de red a un servicio web conocido como servicio push, sobre el que también obtendrás más información más adelante.

Si suponemos que la suscripción se realizó correctamente, el navegador mostrará un objeto PushSubscription. Deberás almacenar estos datos a largo plazo. Por lo general, esto se hace cuando se envía la información a un servidor que controlas y, luego, se hace que el servidor la almacene en una base de datos.

Obtén permiso para enviar mensajes push. Obtén PushSubscription. Envía PushSubscription a tu servidor.

Enviar un mensaje push

En realidad, tu servidor no envía el mensaje push directamente a un cliente. Un servicio de envío lo hace. Un servicio push es un servicio web controlado por el proveedor del navegador del usuario. Cuando quieres enviar una notificación push a un cliente, tienes que realizar una solicitud de servicio web a un servicio push. La solicitud de servicio web que envías al servicio de envío se conoce como solicitud de protocolo de envío web. La solicitud de protocolo push web debe incluir lo siguiente:

  • Qué datos incluir en el mensaje
  • El cliente al que se enviará el mensaje
  • Instrucciones sobre cómo el servicio de envío debe entregar el mensaje. Por ejemplo, puedes especificar que el servicio de envío deje de intentar enviar el mensaje después de 10 minutos.

Normalmente, la solicitud del protocolo push web se realiza a través de un servidor que tú controlas. Por supuesto, tu servidor no tiene que construir la solicitud de servicio web sin procesar en sí mismo. Existen bibliotecas que pueden hacerlo por ti, como web-push-libs. Pero el mecanismo subyacente es una solicitud de servicio web por HTTP.

Tu servidor envía una solicitud de protocolo push web al servicio de envío y este envía el mensaje al dispositivo del usuario.

El servicio de envío recibe tu solicitud, la autentica y enruta el mensaje push al cliente correspondiente. Si el navegador del cliente está sin conexión, el servicio de envío pone en cola el mensaje push hasta que el navegador se conecta.

Cada navegador usa el servicio push que desee. Tú, como desarrollador de sitios web, no tienes control sobre eso. Esto no es un problema, ya que la solicitud del protocolo de envío web está estandarizada. En otras palabras, no es necesario que te importe qué servicio push utiliza el proveedor del navegador. Solo debes asegurarte de que tu solicitud de protocolo de envío web siga la especificación. Entre otras cosas, la especificación establece que la solicitud debe incluir ciertos encabezados y que los datos se deben enviar como un flujo de bytes.

Sin embargo, debes asegurarte de enviar la solicitud del protocolo push web al servicio de envío correcto. Esta información se proporciona en los datos de PushSubscription que el navegador te mostró durante el proceso de suscripción. Un objeto PushSubscription se ve de la siguiente manera:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

El dominio de endpoint es, en esencia, el servicio de envío. La ruta de acceso del endpoint es información del identificador de cliente que ayuda al servicio de envío a determinar con exactitud a qué cliente enviar el mensaje.

Los keys se usan para la encriptación, lo que se explica a continuación.

Encripta el mensaje de envío

Los datos que envías a un servicio de envío deben estar encriptados. Esto evita que el servicio de envío pueda ver los datos que estás enviando al cliente. Recuerda que el proveedor del navegador decide qué servicio push usar y que, en teoría, podría ser inseguro o inseguro. Tu servidor debe usar el keys proporcionado en PushSubscription para encriptar sus solicitudes de protocolo push web.

Firma tus solicitudes de protocolo push web

El servicio de envío proporciona una forma de evitar que alguien más envíe mensajes a tus usuarios. Técnicamente, no tienes que hacer esto, pero la implementación más fácil en Chrome lo requiere. Es opcional en Firefox. Es posible que otros navegadores lo requieran en el futuro.

Este flujo de trabajo implica una clave privada y una pública que son únicas para tu aplicación. El proceso de autenticación funciona de la siguiente manera:

  • Generarás la clave privada y la pública como una tarea única. La combinación de la clave privada y la pública se conoce como las claves del servidor de la aplicación. Es posible que también las veas llamadas claves VAPID. VAPID es la especificación que define este proceso de autenticación.
  • Cuando suscribes un cliente para recibir notificaciones push desde tu código JavaScript, proporcionas tu clave pública. Cuando el servicio de envío genera un endpoint para el dispositivo, asocia la clave pública proporcionada con el endpoint.
  • Cuando envías una solicitud de protocolo push web, firmas información JSON con tu clave privada.
  • Cuando el servicio de envío recibe tu solicitud de protocolo de envío web, usa la clave pública almacenada para autenticar la información firmada. Si la firma es válida, el servicio de envío sabe que la solicitud provino de un servidor con la clave privada coincidente.

Personaliza la entrega del mensaje push

La especificación de la solicitud del protocolo de envío web también define parámetros que te permiten personalizar la forma en la que el servicio de envío intenta enviar el mensaje de envío al cliente. Por ejemplo, puedes personalizar lo siguiente:

  • El tiempo de actividad (TTL) de un mensaje, que define por cuánto tiempo el servicio de envío debe intentar entregar un mensaje.
  • La urgencia del mensaje, que es útil en caso de que el servicio de envío preserva la duración de la batería del cliente solo entregando mensajes de alta prioridad.
  • Es el tema de un mensaje, que reemplaza los mensajes pendientes del mismo tema por el mensaje más reciente.

Recibe y muestra los mensajes enviados como notificaciones

Una vez que hayas enviado la solicitud de protocolo de envío web al servicio de envío, este mantendrá la solicitud en cola hasta que ocurra uno de los siguientes eventos:

  1. El cliente se conecta y el servicio push entrega el mensaje push.
  2. El mensaje vence.

Cuando el navegador del cliente recibe un mensaje enviado, desencripta los datos del mensaje push y envía un evento push a tu service worker. Un service worker es básicamente código JavaScript que puede ejecutarse en segundo plano, incluso cuando el sitio web no está abierto o el navegador está cerrado. En el controlador de eventos push de tu service worker, puedes llamar a ServiceWorkerRegistration.showNotification() para mostrar la información como una notificación.

El mensaje llega al dispositivo. El navegador activa el service worker. Se envía el evento push.

Próximos pasos

Code labs