Usa notificaciones push para atraer a los usuarios y volver a atraerlos

Kate Jeffreys

¿Por qué usar notificaciones push?

Las notificaciones presentan pequeños fragmentos de información a un usuario. Las apps web pueden usar notificaciones para informar a los usuarios sobre eventos importantes urgentes o acciones que deben realizar.

La apariencia de las notificaciones varía según la plataforma. Por ejemplo:

Una notificación en un dispositivo Android.

Una notificación en una MacBook.

Tradicionalmente, los navegadores web debían iniciar el intercambio de información entre el servidor y el cliente al realizar una solicitud. La tecnología push web, por otro lado, te permite configurar tu servidor para que envíe notificaciones cuando sea conveniente para tu app. Un servicio push crea URLs únicas para cada service worker suscrito. Cuando se envían mensajes a la URL de un service worker, se generan eventos en ese service worker y se le indica que muestre una notificación.

Las notificaciones push pueden ayudar a los usuarios a aprovechar al máximo tu app, ya que les sugieren que vuelvan a abrirla y la usen según la información más reciente.

Crea y envía notificaciones

Crea notificaciones con la API de Notifications. Un objeto Notification tiene una cadena title y un objeto options. Por ejemplo:

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

El title se muestra en negrita cuando la notificación está activa, mientras que el body contiene texto adicional.

Obtén permiso para enviar notificaciones

Para mostrar una notificación, tu app debe obtener el permiso del usuario.

Notification.requestPermission();

Nota: La plataforma web alienta a los desarrolladores a solicitar permisos para recibir notificaciones cuando los usuarios comprendan lo que se pregunta y por qué. Abre la solicitud de permiso en respuesta a un gesto del usuario y cuando el valor de las notificaciones sea obvio. Evita que aparezca la solicitud de permiso de inmediato cuando el usuario llegue a la página.

¿Cómo funcionan las notificaciones push?

El verdadero poder de las notificaciones proviene de la combinación de service worker y la tecnología push:

• Los service worker pueden ejecutarse en segundo plano y mostrar notificaciones incluso cuando tu app no está visible en la pantalla.

• La tecnología push te permite configurar tu servidor para que envíe notificaciones cuando sea conveniente para tu app. Un servicio push crea URLs únicas para cada service worker suscrito. Cuando se envían mensajes a la URL de un service worker, se generan eventos en ese service worker y se le indica que muestre una notificación.

En el siguiente flujo de ejemplo, un cliente registra un service worker y se suscribe a las notificaciones push. Luego, el servidor envía una notificación al extremo de la suscripción.

El cliente y el service worker usan JavaScript normal sin bibliotecas adicionales. El servidor se compila con el paquete express de npm en Node.js y usa el paquete web-push de npm para enviar notificaciones. Para enviar información al servidor, el cliente realiza una llamada a una URL de POST que el servidor expuso.

Parte 1: Registra un service worker y suscríbete a Push

1. Una app cliente registra un service worker con ServiceWorkerContainer.register(). El service worker registrado seguirá ejecutándose en segundo plano cuando el cliente esté inactivo.

   Código de cliente:

   navigator.serviceWorker.register('sw.js');
   

2. El cliente solicita el permiso al usuario para enviar notificaciones.

   Código de cliente:

   Notification.requestPermission();
   

3. Para habilitar las notificaciones push, el service worker usa PushManager.subscribe() para crear una suscripción push. En la llamada a PushManager.subscribe(), el service worker proporciona la clave de API de la app como identificador.

   Código de cliente:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ });
   });
   

   Los servicios push, como Firebase Cloud Messaging, funcionan con un modelo de suscripción. Cuando un service worker se suscribe a un servicio de envío mediante una llamada a PushManager.subscribe(), el servicio de envío crea una URL única para ese service worker. La URL se conoce como extremo de suscripción.

4. El cliente envía el extremo de suscripción al servidor de apps.

   Código de cliente:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
       sendToServer(subscription, '/new-subscription', 'POST');
     });
   });
   

   Código del servidor:

   app.post('/new-subscription', (request, response) => {
     // extract subscription from request
     // send 'OK' response
   });
   

Parte 2: Envía una notificación

1. El servidor web envía una notificación al extremo de la suscripción.

   Código del servidor:

   const webpush = require('web-push');
   
   let options = { /* config info for cloud messaging and API key */ };
   let subscription = { /* subscription created in Part 1*/ };
   let payload = { /* notification */ };
   
   webpush.sendNotification(subscription, payload, options);
   

2. Las notificaciones enviadas al extremo de suscripción activan eventos de envío con el service worker como objetivo. El service worker recibe el mensaje y se lo muestra al usuario como una notificación.

   Código del service worker:

   self.addEventListener('push', (event) => {
     let title = { /* get notification title from event data */ }
     let options = { /* get notification options from event data */ }
     showNotification(title, options);
   })
   

3. El usuario interactúa con la notificación y activa la aplicación web, si aún no lo estaba.

Próximos pasos

Como siguiente paso, implementa las notificaciones push.

Creamos una serie de codelabs para guiarte en cada paso del proceso.