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

Kate Jeffreys
Kate Jeffreys

Las notificaciones presentan pequeños fragmentos de información al usuario. Las aplicaciones web pueden usar notificaciones para informar a los usuarios sobre eventos importantes, urgentes o acciones que el usuario debe 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 tenían que iniciar el intercambio de información entre el servidor y el cliente mediante una solicitud. La tecnología push web, por otro lado, te permite configurar tu servidor para que envíe notificaciones cuando lo considere necesario para tu app. Un servicio push crea URLs únicas para cada service worker suscrito. El envío de mensajes a la URL de un service worker genera eventos en ese service worker y le solicita que muestre una notificación.

Las notificaciones push pueden ayudar a los usuarios a aprovechar tu app al máximo, ya que les solicitan que la vuelvan a abrir 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, la 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 la app no está visible en la pantalla.

  • La tecnología push te permite configurar tu servidor para que envíe notificaciones cuando sea adecuado para tu app. Un servicio push crea URLs únicas para cada service worker suscrito. El envío de mensajes a la URL de un service worker genera eventos en ese service worker y le solicita que muestre una notificación.

En el siguiente flujo de ejemplo, un cliente registra un service worker y se suscribe a 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 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 continuará 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 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, operan en 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 exclusiva para ese service worker. La URL se conoce como extremo de suscripción.

  4. El cliente envía el extremo de la 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 la suscripción activan eventos de envío con el service worker 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 y 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.