Eventos push

En este punto, ya analizamos cómo suscribir un usuario y enviar un mensaje push. El siguiente paso recibir este mensaje push en el dispositivo del usuario y mostrar una notificación (y realizar cualquier otra el trabajo que podríamos querer hacer).

El evento push

Cuando se recibe un mensaje, se envía un evento push a tu service worker.

El código para configurar un objeto de escucha de eventos push debe ser bastante similar al de cualquier otro evento. de escucha que escribirías en JavaScript:

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

Para la mayoría de los desarrolladores que son nuevos en los service workers, el elemento más extraño de este código es self de salida. Por lo general, self se usa en los Web Workers, que es un service worker. self hace referencia a el alcance global, como window en una página web. Pero para los trabajadores web y service workers, self se refiere al trabajador en sí.

En el ejemplo anterior, se puede considerar que self.addEventListener() agrega un objeto de escucha de eventos a el propio service worker.

Dentro del ejemplo del evento push, verificamos si hay datos y, luego, imprimimos algo en la consola.

Existen otras formas de analizar datos a partir de un evento push:

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

La mayoría de las personas usan json() o text() según lo que esperan de su aplicación.

En este ejemplo, se muestra cómo agregar un objeto de escucha de eventos push y cómo acceder a los datos, pero es y le faltan dos partes de funcionalidad muy importantes. No se muestra una notificación y es no usa event.waitUntil().

Esperar hasta

Algo que se debe entender sobre los service workers es que se tiene poco control sobre cuándo se ejecutará el código del service worker. El navegador decide cuándo activarlo y cuándo y rescindirlo. La única forma de decirle al navegador: "Estoy muy ocupada haciendo tareas cosas", es pasar una promesa al método event.waitUntil(). De esta forma, el navegador mantiene el service worker en ejecución hasta que se detenga la promesa que pasaste.

Con los eventos push, existe un requisito adicional de que debes mostrar una notificación antes se estableció la promesa que pasaste.

A continuación, se incluye un ejemplo básico de cómo mostrar una notificación:

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

Llamar a self.registration.showNotification() es el método que muestra una notificación a el usuario y muestra una promesa que se resolverá cuando se muestre la notificación.

Para que este ejemplo sea lo más claro posible, he asignado esta promesa a un variable llamada promiseChain. Luego, se pasa a event.waitUntil(). Sé que esto es pero he visto muchos problemas que culminaron No entendemos bien lo que se debe pasar a waitUntil() o como resultado de una promesa dañada. cadenas.

Un ejemplo más complicado con una solicitud de red para datos y seguimiento del evento push con Analytics podría verse así:

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

Aquí se llama a una función que muestra una promesa pushReceivedTracking(). que, a los fines de este ejemplo, podemos suponer que hará una solicitud de red a nuestro proveedor de herramientas de análisis. También haremos una solicitud de red para obtener la respuesta y mostrar una notificación con los datos de las respuestas del título y mensaje de la notificación.

Podemos asegurarnos de que el service worker se mantenga activo mientras se combinan estas tareas estas promesas con Promise.all(). La promesa resultante se pasa a event.waitUntil(). lo que significa que el navegador esperará hasta que ambas promesas hayan terminado antes de verificar que se haya y finalizando el service worker.

La razón por la que deberíamos preocuparnos por waitUntil() y cómo usarla es que una de las problemas comunes que enfrentan los desarrolladores es que cuando la cadena de la promesa es incorrecta o no funciona, Chrome muestra este valor “predeterminado” notificación:

Una imagen de la notificación predeterminada en Chrome

Chrome solo mostrará el mensaje "Este sitio se actualizó en segundo plano". notificación cuando un se recibe un mensaje push y el evento push en el service worker no muestra un después de que finalice la promesa pasada a event.waitUntil().

La razón principal por la que los desarrolladores se ven atrapados por esto es que su código suelen llamar a self.registration.showNotification(), pero no lo hacen cualquier cosa con la promesa que devuelve. Esto genera de forma intermitente la notificación que se muestra. Por ejemplo, podemos quitar la devolución para self.registration.showNotification() en el ejemplo anterior y corremos el riesgo de ver esto notificación.

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

Puedes ver que es fácil pasarlo por alto.

Solo recuerda que, si ves esa notificación, verifica tus cadenas de promesa y event.waitUntil().

En la próxima sección, veremos lo que podemos hacer para aplicar estilo a las notificaciones qué contenido podemos mostrar.

Próximos pasos

Code labs