Volver a interactuar con los usuarios con distintivos, notificaciones y mensajes de inserción

  • Artículo
  • Tiempo de lectura: 8 minutos

Las aplicaciones web progresivas (PWA) pueden funcionar cuando la aplicación no se está ejecutando, como actualizar datos en la memoria caché o enviar mensajes cuando el dispositivo recupera la conectividad. Para ello, use las siguientes API, que se describen en Sincronizar y actualizar una PWA en segundo plano:

  • API de sincronización en segundo plano
  • API de sincronización en segundo plano periódica
  • API de captura en segundo plano

Para volver a interactuar con el usuario con la aplicación una vez completada una tarea en segundo plano, puedes usar notificaciones e distintivos. Para ello, use las siguientes API:

  • API de badging de aplicaciones
  • API de notificaciones
  • API de inserción

Los distintivos son fáciles de usar y se pueden usar con frecuencia. Los distintivos no interrumpen el flujo de trabajo del usuario y son útiles para mostrar una pequeña cantidad de información, como el número de mensajes recibidos.

Las notificaciones son útiles para que las aplicaciones tomen parte en el centro de notificaciones del sistema y muestren imágenes e información de texto. Las notificaciones son útiles para alertar al usuario sobre un cambio de estado importante en la aplicación. Sin embargo, las notificaciones se deben usar rara vez, ya que tienden a ser perjudiciales para el flujo de trabajo del usuario.

Mostrar un distintivo en el icono de la aplicación

Los PWA pueden mostrar un distintivo en el icono de la aplicación mediante la API de bloqueo de aplicaciones. El distintivo puede estar vacío o puede contener un número.

Buscar compatibilidad

Antes de usar la API de app badging, compruebe primero si la API de app badging es compatible con el motor del explorador en el que se ejecuta la aplicación, de la siguiente manera:

if (navigator.setAppBadge) {
    console.log("The App Badging API is supported!");
}

Mostrar el distintivo

Para establecer el distintivo, usa el siguiente código del front-end de la aplicación o del trabajador de servicio.

// To display an empty badge
navigator.setAppBadge();

// To display a number in the badge
navigator.setAppBadge(42);

Un PWA en la barra de tareas Windows, con un distintivo que muestra el número 42.

La función devuelve una promesa, que se puede usar para saber cuándo se agregó el distintivo y para detectar posibles errores, como setAppBadge se indica a continuación:

navigator.setAppBadge(42).then(() => {
    console.log("The badge was added");
}).catch(e => {
    console.error("Error displaying the badge", e);
});

Borrar el distintivo

Para quitar el distintivo en el icono de la aplicación, usa el siguiente código del front-end o del trabajador de servicio:

navigator.clearAppBadge();

También clearAppBadge devuelve una promesa que se puede usar para controlar posibles errores.

Otra forma de borrar un distintivo es llamar de setAppBadge nuevo, pero pasar 0 como el valor, esta vez:

navigator.setAppBadge(0);

Mostrar notificaciones en el centro de acciones

Los PWA pueden mostrar notificaciones mediante la API de notificaciones.

Buscar compatibilidad

Antes de usar la API, compruebe que es compatible, como se muestra a continuación:

if ("Notification" in window) {
    console.log("The Notifications API is supported");
}

Solicitar permiso

La API de notificaciones solo se puede usar después de haber solicitado el permiso del usuario para mostrar mensajes. Para solicitar permiso, use la requestPermission función, como se muestra a continuación.

La solicitud de permiso solo debe realizarse en respuesta a una acción del usuario. Este es un procedimiento recomendado, para evitar interrumpir al usuario con solicitudes de permisos cuando el usuario aún no ha interactuado con una característica que usa notificaciones.

button.addEventListener("click", () => {
    Notifications.requestPermission().then(permission => {
        if (permission === "granted") {
            console.log("The user accepted");
        }
    });
});

Puede comprobar el estado del permiso de nuevo más adelante:

if (Notification.permission === "granted") {
    console.log("The user already accepted");
}

Mostrar la notificación

Una vez que sepas que la API es compatible y el usuario ha aceptado notificaciones, puedes mostrar una notificación creando un Notification objeto:

const notification = new Notification("Hello World!");

Una notificación de solo texto.

El código anterior muestra un mensaje de notificación de solo texto, pero también puede personalizar el mensaje mediante la inclusión de propiedades body y icon adicionales:

const notification = new Notification("Hello World!", {
    body: "This is my first notification message",
    icon: "/assets/logo-192.png",
});

Una notificación con texto y una imagen.

También puedes mostrar notificaciones del trabajador de servicio de la aplicación. Esto es útil porque es posible que el trabajador del servicio esté trabajando mientras la aplicación no se está ejecutando. Para enviar una notificación desde el trabajador del servicio, use la ServiceWorkerRegistration.showNotification función:

self.registration.showNotification("Hello from the Service Worker!");

La showNotification función admite los mismos argumentos que el constructor usado en el ejemplo Notification anterior. La showNotification función también admite la actions propiedad, que se describe en la sección siguiente.

Agregar acciones a las notificaciones

En una notificación, es posible agregar acciones para que el usuario realice. Esto solo se admite en las notificaciones persistentes que se muestran mediante la ServiceWorkerRegistration.showNotification función.

self.registration.showNotification("Your content is ready", {
    body: "Your content is ready to be viewed. View it now?",
    icon: "/assets/logo-192.png",
    actions: [
        {
            action: "view-content",
            title: "Yes"
        },
        {
            action: "go-home",
            title: "No"
        }
    ]
});

Una notificación con texto, una imagen y dos acciones.

Cuando el usuario hace clic en uno de los botones de acción, PWA controlar el clic escuchando el notificationclick evento. Cuando se notificationclick reciba un evento, cierre la notificación y ejecute algún código:

self.addEventListener('notificationclick', event => {
    // Close the notification.
    event.notification.close();

    // React to the action.
    if (event.action === 'view-content') {
        console.log("view-content action was clicked");
    } else if (event.action === 'go-home') {
        console.log("go-home action was clicked");
    } else {
        console.log("main body of the notification was clicked");
    }
}, false);

Para obtener más información sobre las acciones de notificación, vea NotificationAction en MDN.

Agregar notificaciones de inserción a su PWA

Para crear una PWA que admita notificaciones de inserción:

  1. Suscribirse a un servicio de mensajería mediante la API de inserción.
  2. Mostrar un mensaje del sistema cuando se recibe un mensaje del servicio mediante la API de notificaciones.

Al igual que los trabajadores de servicio, las API de notificación de inserción son API basadas en estándares. Las API de notificación de inserción funcionan en todos los exploradores, por lo que el código debe funcionar en todas partes en las que se admiten las PWA. Para obtener más información acerca de cómo entregar mensajes de inserción a diferentes exploradores del servidor, vea Web-Push.

Los siguientes pasos se han adaptado de la Demostración enriquecte de inserción en el libro de recetas del trabajador de servicio proporcionado por Mozilla. Este libro de recetas tiene muchas recetas útiles de inserción web y trabajador de servicio.

Paso 1: Generar claves VAPID

Las notificaciones de inserción requieren claves VAPID (identificación voluntaria del servidor de aplicaciones) para enviar mensajes de inserción al PWA cliente. Hay varios generadores de claves VAPID disponibles en línea (por ejemplo, vapidkeys.com).

Después de generar las claves, recibirá un objeto JSON que contiene una clave pública y privada. Guarde las claves VAPID para su uso posterior en el tutorial siguiente.

Para obtener información sobre VAPID y WebPush, consulte Sending VAPID identified WebPush Notifications using the Mozilla Push Service.

Paso 2: suscribirse a notificaciones de inserción

Los trabajadores de servicio controlan eventos de inserción e interacciones de notificación del sistema en su PWA. Para suscribir el PWA notificaciones de inserción del servidor:

  • Asegúrese de que el PWA está instalado, activo y registrado.
  • Asegúrate de que el código para completar la tarea de suscripción se encuentra en el subproceso de interfaz de usuario principal del PWA.
  • Asegúrese de que tiene conectividad de red.

Antes de crear una nueva suscripción de inserción, Microsoft Edge comprueba si el usuario ha concedido el permiso PWA para recibir notificaciones.

Si el usuario no ha concedido el permiso PWA para recibir notificaciones, el explorador le pedirá permiso. Si el usuario no concede permiso al explorador, la solicitud para iniciar registration.pushManager.subscribe un , que debe DOMException controlarse. Para obtener más información sobre la administración de permisos, vaya a Notificaciones de inserción en Microsoft Edge.

En el pwabuilder-sw-register.js archivo, anexe el siguiente código:

// Ask the user for permission to send push notifications.
navigator.serviceWorker.ready
    .then(function (registration) {
        // Check if the user has an existing subscription
        return registration.pushManager.getSubscription()
            .then(function (subscription) {
                if (subscription) {
                    return subscription;
                }

                const vapidPublicKey = "PASTE YOUR PUBLIC VAPID KEY HERE";
                return registration.pushManager.subscribe({
                    userVisibleOnly: true,
                    applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
                });
            });
    });

// Utility function for browser interoperability
function urlBase64ToUint8Array(base64String) {
    var padding = '='.repeat((4 - base64String.length % 4) % 4);
    var base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');

    var rawData = window.atob(base64);
    var outputArray = new Uint8Array(rawData.length);

    for (var i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

Vea también PushManager y Web-Push.

Paso 3: escuchar notificaciones de inserción

Después de crear una suscripción en el PWA, agregue controladores al trabajador de servicio para responder a eventos de inserción. El evento Push se envía desde el servidor para mostrar notificaciones del sistema. Las notificaciones del sistema muestran los datos de un mensaje recibido. Para realizar cualquiera de las siguientes tareas, debe agregar un click controlador:

  • Descartar la notificación del sistema.
  • Abrir una ventana.
  • Poner el foco en una ventana.
  • Abrir y poner el foco en una nueva ventana para mostrar una página PWA cliente.

Para agregar un click controlador, en el pwabuilder-sw.js archivo, agregue los siguientes controladores para el push evento y el notificationclick evento:

// Respond to a server push with a user notification.
self.addEventListener('push', function (event) {
    if (Notification.permission === "granted") {
        const notificationText = event.data.text();
        const showNotification = self.registration.showNotification('Sample PWA', {
            body: notificationText,
            icon: 'images/icon512.png'
        });
        // Make sure the toast notification is displayed.
        event.waitUntil(showNotification);
    }
});

// Respond to the user selecting the toast notification.
self.addEventListener('notificationclick', function (event) {
    console.log('On notification click: ', event.notification.tag);
    event.notification.close();

    // Display the current notification if it is already open, and then put focus on it.
    event.waitUntil(clients.matchAll({
        type: 'window'
    }).then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
            var client = clientList[i];
            if (client.url == 'http://localhost:1337/' && 'focus' in client)
                return client.focus();
        }
        if (clients.openWindow)
            return clients.openWindow('/');
    }));
});

Paso 4: Pruébalo

Para probar las notificaciones de inserción para el PWA:

  1. Vaya a su PWA en http://localhost:3000 . Cuando el trabajador de servicio se activa e intenta suscribir su PWA a notificaciones push, Microsoft Edge le pide que permita a su PWA mostrar notificaciones. Seleccione Permitir.

    Cuadro de diálogo de permisos para habilitar notificaciones.

  2. Simule una notificación de inserción del lado servidor, como se muestra a continuación. Con el PWA abierto en http://localhost:3000 el explorador, seleccione F12 para abrir DevTools. Seleccione Insercióndel trabajador del servicio de > **** > **** aplicación para enviar una notificación de inserción de prueba a su PWA.

    La notificación de inserción se muestra cerca de la barra de tareas.

    Insertar una notificación de DevTools.

    Si no selecciona (o activa ) una notificación del sistema, el sistema la descarta automáticamente después de varios segundos y la pone en cola en el Centro de Windows acción.

    Notificaciones en el centro Windows acción.

Consulte también