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

Kate Jeffreys

¿Por qué usar notificaciones push?

Las notificaciones presentan pequeñas porciones de información al usuario. Las apps web pueden usar notificaciones para informar a los usuarios sobre eventos importantes y urgentes, o sobre acciones que deben realizar.

El aspecto de las notificaciones varía según la plataforma. Por ejemplo:

Tradicionalmente, los navegadores web debían iniciar el intercambio de información entre el servidor y el cliente realizando una solicitud. Por otro lado, la tecnología de notificaciones push web te permite configurar tu servidor para que envíe notificaciones cuando sea conveniente para tu app. Un servicio push crea URLs únicas para cada trabajador de servicio suscrito. El envío de mensajes a la URL de un trabajador de servicio genera eventos en ese trabajador de servicio, lo que lo impulsa a mostrar una notificación.

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

Cómo crear y enviar 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();

¿Cómo funcionan las notificaciones push?

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

• Los service workers 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 trabajador de servicio suscrito. El envío de mensajes a la URL de un trabajador de servicio genera eventos en ese trabajador de servicio, lo que lo impulsa a mostrar 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 suscripción.

El cliente y el trabajador de servicio usan JavaScript sin formato, sin bibliotecas adicionales. El servidor se compila con el paquete npm express en Node.js y usa el paquete npm web-push 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 permiso al usuario para enviar notificaciones.

   Código de cliente:

   Notification.requestPermission();
   

3. Para habilitar las notificaciones push, el trabajador de servicio usa PushManager.subscribe() para crear una suscripción push. En la llamada a PushManager.subscribe(), el trabajador de servicio 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, operan con un modelo de suscripción. Cuando un service worker se suscribe a un servicio push llamando a PushManager.subscribe(), el servicio push 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 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 que se envían al extremo de suscripción activan eventos push con el trabajador de servicio como destino. 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, lo que activa la app 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.