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 comunicar información a los equipos de tu a los usuarios, incluso cuando no usan tu sitio web. Se llaman push. mensajes, porque puedes "enviar" información a los usuarios, incluso cuando estén inactivo. Compara Push tecnología con Pull tecnología para entender esto concepto adicional.

Las notificaciones presentan pequeños fragmentos de información al usuario. Los sitios web pueden usar Notificaciones para informar a los usuarios sobre eventos o acciones importantes y urgentes 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 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 aun cuando no usan activamente tu sitio web. Las notificaciones son la tecnología para Mostrar la información enviada en el dispositivo del usuario Puedes usar notificaciones sin mensajería push. Un día, también podría ser posible usar mensajes push sin notificaciones para el usuario (push silenciosas), pero con navegadores actualmente no permiten eso. En la práctica, suelen usarse en conjunto. Es probable que un usuario no técnico no comprenda la diferencia entre enviar mensajes y notificaciones. En esta colección, cuando Cuando hablamos de notificaciones push, nos referimos a la combinación de enviar un mensaje y, luego, mostrarlos como una notificación. Cuando decimos mensajes push, nos referimos a la tecnología push por sí sola. Cuando decimos notificaciones nos referimos a la tecnología de notificación por sí sola.

¿Por qué usar notificaciones push?

  • Para los usuarios, las notificaciones push son una forma de recibir notificaciones oportunas, relevantes e información precisa.
  • Para ti (propietario de un sitio web), las notificaciones push son una forma de aumentar y compromiso de los usuarios.

¿Cómo funcionan las notificaciones push?

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

  1. Agregar lógica de cliente a fin de solicitarle permiso al usuario para enviar notificaciones push y, luego, enviar información de identificadores de cliente a tu servidor para almacenarla en una base de datos.
  2. Agregar lógica del servidor para enviar mensajes a los dispositivos de los clientes
  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. Se debería activar 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, llamar a Notification.requestPermission() El sistema operativo o navegador del dispositivo del usuario probablemente presente algún tipo de IU para confirmar formalmente que el el usuario quiere habilitar las notificaciones push. Esta IU varía según la plataforma.

Suscribir al cliente a las 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 lo que obtendrás más información más adelante. Después del inicias el proceso de suscripción, el navegador hace una solicitud de red a un servicio web conocido como servicio push, sobre el que también conocerás más adelante.

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

Obtén permiso para enviar mensajes de inserción. Obtén PushSubscription. Enviar PushSubscription a tu servidor.

Enviar un mensaje push

En realidad, tu servidor no envía el mensaje push directamente a un cliente. R push service hace eso. Un servicio push es un servicio web controlado por tu proveedor del navegador del usuario. Para enviar una notificación push a un cliente, necesitas hacer una solicitud de servicio web a un servicio push. La solicitud de servicio web que que envías al servicio de envío se conoce como solicitud de protocolo push web. El la solicitud del protocolo push web debe incluir:

  • Qué datos incluir en el mensaje
  • A qué cliente se le enviará el mensaje.
  • Instrucciones sobre cómo el servicio de envío debe entregar el mensaje. Por ejemplo, puede especificar que el servicio de envío debe dejar de intentar enviar el mensaje después de 10 minutos.

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

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

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

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

Sin embargo, debes asegurarte de enviar el protocolo push web al servicio de envío correcto. Los datos de PushSubscription a los que que el navegador que te muestra durante el proceso de suscripción proporciona lo siguiente: información. Un objeto PushSubscription tiene el siguiente aspecto:

{
  "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 del endpoint es información del identificador de cliente que ayuda al servicio push a determinar a qué cliente enviar el mensaje.

Los keys se usan para la encriptación, 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 push no pueda ver los datos que le envías al cliente. Recuerda que el proveedor del navegador decide qué servicio push usar o push podría ser inseguro o inseguro. Tu servidor debe usar el keys proporcionado en PushSubscription para encriptar su protocolo web push solicitudes.

Firma tus solicitudes de protocolo push web

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

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

  • Generas la clave privada y la pública como una tarea única. La combinación de la clave privada y pública se conoce como el claves del servidor de apps Es posible que también los veas llamados VAPID claves. VAPID es la especificación que define este proceso de autenticación.
  • Cuando suscribes a un cliente a notificaciones push desde tu código JavaScript, cuando proporciones 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 cierta información JSON con tu clave privada.
  • Cuando el servicio push recibe tu solicitud de protocolo push web, usa el clave pública para autenticar la información firmada. Si la firma es válida el servicio push sabe que la solicitud provino de un servidor con el con una clave privada coincidente.

Personaliza la entrega del mensaje de envío

La especificación de la solicitud del 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 durante cuánto tiempo de entregar un mensaje.
  • La urgencia del mensaje, que es útil en caso de que el servicio de envío se conserve la duración de batería del cliente entregando solo mensajes de alta prioridad.
  • El tema de un mensaje, que reemplaza los mensajes pendientes del mismo tema con el último mensaje.

Recibir y mostrar los mensajes enviados como notificaciones

Una vez que hayas enviado la solicitud del protocolo push web al servicio push, este la solicitud se pone 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 cliente recibe un mensaje enviado, lo desencripta y envía un evento push a tu servicio trabajador de producción. Un service worker es En esencia, código JavaScript que puede ejecutarse en segundo plano, incluso cuando tu sitio web no está abierto o el navegador está cerrado. En el evento push de tu service worker controlador, llama a ServiceWorkerRegistration.showNotification() para mostrar la información como una notificación.

El mensaje llega al dispositivo. El navegador activa el service worker. Se despacha el evento push.

Próximos pasos

Code labs