Descripción general de las notificaciones push

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

Kayce Basques
Kayce Basques
X GitHub

¿Qué son las notificaciones push?

Los mensajes push te permiten llamar la atención de tus usuarios, incluso cuando no están usando tu sitio web. Se denominan mensajes push porque puedes "enviar" información a tus usuarios, incluso cuando no están activos. Compara la tecnología push con la tecnología pull 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 y urgentes, o acciones que el usuario debe 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 y las notificaciones push 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 tu sitio web de forma activa. Las notificaciones son la tecnología para mostrar la información enviada en el dispositivo del usuario. Es posible usar notificaciones sin mensajes push. Algún día, también podría ser posible usar mensajes push sin notificaciones visibles para el usuario (envío silencioso), pero los navegadores no lo permiten actualmente. En la práctica, suelen usarse juntos. Es probable que un usuario no técnico no comprenda la diferencia entre los mensajes y las notificaciones push. En esta colección, cuando decimos notificaciones push , nos referimos a la combinación de enviar un mensaje y mostrarlo como una notificación. Cuando decimos mensajes push , nos referimos a la tecnología push por sí sola. Y cuando decimos notificaciones , nos referimos a la tecnología de notificaciones por sí sola.

¿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?

A grandes rasgos, los pasos clave para implementar notificaciones push son los siguientes:

  1. Agregar lógica del cliente para solicitar permiso al usuario para enviar notificaciones push y, luego, enviar información del identificador del cliente a tu servidor para almacenarla en una base de datos
  2. Agregar lógica del servidor para enviar mensajes push a los dispositivos cliente
  3. Agregar lógica del cliente para recibir mensajes que se enviaron 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

Primero, tu sitio web debe obtener el permiso del usuario para enviar notificaciones push. Esto debe activarse con un gesto del usuario, como hacer clic en un botón Sí 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 quiere habilitar las notificaciones push. Esta IU varía según las plataformas.

Suscribe el cliente a las notificaciones push

Después de obtener el permiso, tu sitio web debe iniciar el proceso de suscripción del usuario a las notificaciones push. Esto se realiza 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 la suscripción se realizó correctamente, el navegador devuelve un PushSubscription objeto. Deberás almacenar estos datos a largo plazo. Por lo general, esto se hace enviando la información a un servidor que controlas y, luego, haciendo que el servidor la almacene en una base de datos.

1 Obtén permiso para enviar mensajes push. 2. Obtiene PushSubscription. 3. Envía PushSubscription a tu servidor.

Envía un mensaje push

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

  • Qué datos incluir en el mensaje
  • A qué cliente enviar el mensaje
  • Instrucciones sobre cómo el servicio push debe entregar el mensaje (por ejemplo, puedes especificar que el servicio push deje de intentar enviar el mensaje después de 10 minutos)

Por lo general, realizas la solicitud de protocolo web push a través de un servidor que controlas. Por supuesto, tu servidor no tiene que construir la solicitud de servicio web sin procesar. Existen bibliotecas que pueden encargarse de eso, como la web-push-libs. Sin embargo, el mecanismo subyacente es una solicitud de servicio web a través de HTTP.

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

El servicio push recibe tu solicitud, la autentica y enruta el mensaje push al cliente adecuado. Si el navegador del cliente está sin conexión, el servicio push pone en cola el mensaje push hasta que el navegador se conecte.

Cada navegador usa el servicio push que quiere. Como desarrollador de sitios web, no tienes control sobre eso. Esto no es un problema porque la solicitud de protocolo web push está estandarizada. En otras palabras, no tienes que preocuparte por qué servicio push usa el proveedor del navegador. Solo debes asegurarte de que tu solicitud de protocolo web push siga la especificación. Entre otras cosas, la especificación indica que la solicitud debe incluir ciertos encabezados y que los datos deben enviarse como un flujo de bytes.

Sin embargo, debes asegurarte de enviar la solicitud de protocolo web push al servicio push correcto. Los datos PushSubscription que el navegador te devolvió durante el proceso de suscripción proporcionan esta informació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 del endpoint es, básicamente, el servicio push. La ruta de acceso del endpoint es información del identificador del cliente que ayuda al servicio push a determinar exactamente a qué cliente enviar el mensaje.

Las keys se usan para el encriptado, que se explica a continuación.

Encripta el mensaje push

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

Firma tus solicitudes de protocolo web push

El servicio push proporciona una forma de evitar que cualquier otra persona envíe mensajes a tus usuarios. Técnicamente, no tienes que hacerlo, pero la implementación más sencilla en Chrome lo requiere. Es opcional en Firefox. Es posible que otros navegadores lo requieran en el futuro.

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

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

Personaliza la entrega del mensaje push

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

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

Recibe y muestra los mensajes enviados como notificaciones

Una vez que envías la solicitud de protocolo web push al servicio push, este mantiene tu solicitud en cola hasta que sucede uno de los siguientes eventos:

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

Cuando un navegador 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 se puede ejecutar en segundo plano, incluso cuando tu sitio web no está abierto o el navegador está cerrado. En el controlador de eventos push de tu service worker, llamas a ServiceWorkerRegistration.showNotification() para mostrar la información como una notificación.

1. El mensaje llega al dispositivo. 2. El navegador activa el Service Worker. 3. Se despacha el evento push.

Próximos pasos

Code labs