Se usó la API de Cloud Translation para traducir esta página.

Cómo funciona el envío

Matt Gaunt

Antes de entrar en la API, veamos el envío desde un nivel alto, de principio a fin. Luego, a medida que analizar 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 el envío son los siguientes:

Agregar la lógica del cliente para suscribir a un usuario a enviar (es decir, JavaScript y la IU en tu la app web que registra a un usuario para enviar mensajes).
La llamada a la API de tu backend o aplicación que activa un mensaje push al dispositivo de un usuario.
El archivo JavaScript del service worker que recibirá un “evento push” cuando el envío llega a el 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 "suscribirse" que un usuario envíe mensajes.

Para suscribirse a un usuario, se requieren dos requisitos. Primero, obtener el permiso del usuario para enviar les envían mensajes. Segundo, obtener un PushSubscription del navegador.

Un PushSubscription contiene toda la información que necesitamos para enviar un mensaje push a ese usuario. Por ejemplo, considéralo como un ID del dispositivo de ese usuario.

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

Navegadores compatibles

Origen

Antes de suscribir a un usuario, debes generar un conjunto de “claves de servidor de aplicaciones”, de lo que hablaremos más adelante.

Las claves del servidor de aplicaciones, también conocidas como claves VAPID, son exclusivas de tu servidor. Permiten que un push para saber qué servidor de aplicaciones suscribió a un usuario y garantizar que sea el mismo servidor que active los mensajes de envío a ese usuario.

Una vez que hayas suscrito al usuario y tengas un PushSubscription, deberás enviar Detalles de PushSubscription a tu backend o servidor En tu servidor, guardarás esto suscripción a una base de datos y usarla para enviar un mensaje push a ese usuario.

Asegúrate de enviar la PushSubscription a tu backend.

Paso 2: Envía un mensaje push

Cuando quieres enviar un mensaje push a tus usuarios, necesitas realizar una llamada a la API para un servicio. Esta llamada a la API incluiría qué datos enviar, a quién enviar el mensaje y cualquier los criterios sobre cómo enviar el mensaje. 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 es la API? ¿Es JSON, XML o algo más?
¿Qué puede hacer la API?

¿Qué es y qué es el servicio push?

Un servicio push recibe una solicitud de red, la valida y entrega un mensaje push al navegador correspondiente. Si el navegador no tiene conexión, el mensaje se pondrá en cola hasta que el navegador se conecte.

Cada navegador puede usar cualquier servicio push que desee, algo que los desarrolladores no tienen control. de nuevo. Esto no es un problema, ya que cada servicio push espera la misma llamada a la API. Significado no debes preocuparte de quién es el servicio push. Solo debes asegurarte de que tu llamada a la API es válido.

Para obtener la URL adecuada y activar un mensaje de envío (es decir, la URL del servicio de envío), debes Solo debes ver el valor endpoint en una 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=="
  }
}

En este caso, el extremo es [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. El servicio push "random-push-service.com" y cada extremo es único para un usuario, se indica con 'some-kind-of-unique-id-1234'. Cuando comiences a trabajar con push, notarás este patrón.

Más adelante, se abordarán las claves de la suscripción.

¿Cómo es la API?

Mencioné que todos los servicios push web esperan la misma llamada a la API. Esa API es la Protocolo de envío web. Es un estándar IETF que define cómo se realiza una llamada a la API a un servicio push.

La llamada a la API requiere que se configuren determinados encabezados y que los datos sean un flujo de bytes. Más tarde veremos las bibliotecas que pueden realizar esta llamada a la API por nosotros y cómo 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íes con un mensaje de envío deben estar encriptados. Esto se debe a que impide que los servicios push, que pueden ser cualquiera, puedan ver los datos enviados con el mensaje push. Esto es importante, ya que es el navegador quien decide a qué servicio push lo que podría abrir las puertas a los navegadores que usan un servicio push que no es seguro.

Cuando actives un mensaje push, el servicio recibirá la llamada a la API y pondrá en cola mensaje. Este mensaje permanecerá en cola hasta que el dispositivo del usuario se conecte y el servicio puede entregar los mensajes. Las instrucciones que puedes darle al servicio push definen cómo de que el mensaje de envío esté en cola.

Las instrucciones incluyen detalles como los siguientes:

El tiempo de actividad para un mensaje push. Esto define cuánto tiempo debe estar en cola un mensaje antes se quita y no se entrega.
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 entregando solo mensajes de alta prioridad.
Asignar un “tema” a un mensaje push nombre que reemplazará cualquier mensaje pendiente con este nuevo mensaje.

Cuando tu servidor desea enviar un mensaje push, realiza una solicitud de protocolo push web a un servicio push.

Paso 3: Evento push en el dispositivo del usuario

Cuando hayamos enviado un mensaje push, el servicio push lo mantendrá en su servidor hasta que ocurre uno de los siguientes eventos:

El dispositivo se conecta y el servicio push entrega el mensaje.
El mensaje vence. Si esto ocurre, el servicio de envío quita el mensaje de su cola y nunca lo entregarán.

Cuando el servicio de envío entrega un mensaje, el navegador lo recibe, y enviar un evento push en tu service worker.

Un service worker es un “especial” Archivo JavaScript. El navegador puede ejecutar este JavaScript sin que se vea tu página. abiertos. Incluso puede ejecutar este JavaScript cuando se cierra el navegador. 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 en de una secuencia de comandos del service worker).

Se encuentra dentro del “push” del service worker que puedes realizar cualquier tarea en segundo plano. Tú puede realizar llamadas de Analytics, almacenar páginas en caché sin conexión y mostrar notificaciones.

Cuando se envía un mensaje push desde un servicio push al dispositivo de un usuario, tu service worker recibe un evento push

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