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

Kate Jeffreys
Kate Jeffreys

¿Por qué usar notificaciones push?

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

El aspecto 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 mediante 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 servicio de trabajo genera eventos en ese servicio de trabajo, lo que 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 solicitan que la vuelvan a abrir y la usen en función de 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.

Cómo obtener permiso para enviar notificaciones

Para mostrar una notificación, tu app debe obtener 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 la tecnología push:

  • Los servicios de trabajo 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 servicio de trabajo genera eventos en ese servicio de trabajo, lo que le indica que muestre una notificación.

En el siguiente flujo de ejemplo, un cliente registra un trabajador de servicio 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 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 POST que el servidor expuso.

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

  1. Una app cliente registra un trabajador de servicio 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 del servicio usa PushManager.subscribe() para crear una suscripción push. En la llamada a PushManager.subscribe(), el trabajador del 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, funcionan con un modelo de suscripción. Cuando un trabajador de servicio se suscribe a un servicio push llamando a PushManager.subscribe(), el servicio push crea una URL única para ese trabajador de servicio. 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 objetivo. El servicio trabajador recibe el mensaje y se lo muestra al usuario como una notificación.

    Código del trabajador de servicio:

    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.