Événements push

À ce stade, nous avons abordé l'abonnement d'un utilisateur et l'envoi d'un message push. L'étape suivante consiste à recevoir ce message push sur l'appareil de l'utilisateur et afficher une notification (ainsi que toute autre travail que nous pourrions effectuer).

L'événement push

Lorsqu'un message est reçu, un événement push est envoyé à votre service worker.

Le code de configuration d'un écouteur d'événements push doit être assez semblable à celui de tout autre événement que vous écririez 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.');
    }
});

L'aspect le plus étrange de ce code pour la plupart des développeurs qui débutent avec les service workers est le self. . self est couramment utilisé dans les Web Workers, ce qu'est un service worker. self fait référence à le champ d'application global, un peu comme window dans une page Web. Mais pour les travailleurs Web et les service workers, self fait référence au nœud de calcul lui-même.

Dans l'exemple ci-dessus, self.addEventListener() peut être considéré comme l'ajout d'un écouteur d'événements à le service worker lui-même.

Dans l'exemple d'événement push, nous vérifions s'il existe des données et imprimons quelque chose dans la console.

Il existe d'autres façons d'analyser les données d'un événement d'envoi:

// 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 plupart des utilisateurs utilisent json() ou text() en fonction de ce qu'ils attendent de leur application.

Cet exemple montre comment ajouter un écouteur d'événements push et accéder aux données. il manque deux fonctions très importantes. Il n'affiche aucune notification et il est n'utilise pas event.waitUntil().

Attendre jusqu'à

L'une des choses à savoir sur les service workers, c'est que vous avez peu de contrôle sur le moment le code de service s'exécute. Le navigateur décide à quel moment l'activer et le l'arrêter. La seule façon de dire au navigateur : « Hé, je suis super occupé à faire "trucs", consiste à transmettre une promesse à la méthode event.waitUntil(). Ainsi, le navigateur maintenir le service worker en cours d'exécution jusqu'à ce que la promesse que vous avez transmise soit établie.

Avec les événements push, vous devez afficher une notification avant la promesse que vous avez faite est réglée.

Voici un exemple basique d'affichage d'une notification:

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

    event.waitUntil(promiseChain);
});

L'appel de self.registration.showNotification() est la méthode qui permet d'afficher une notification pour l'utilisateur et il renvoie une promesse qui se résoudre une fois la notification affichée.

Pour que cet exemple soit aussi clair que possible, j'ai confié cette promesse à un appelée promiseChain. Elle est ensuite transmise à event.waitUntil(). Je sais que c'est très détaillée, mais j'ai vu un certain nombre de problèmes qui se sont soldés par une mal comprendre ce qui doit être transmis à waitUntil() ou être le résultat d'une promesse non respectée chaînes.

Un exemple plus compliqué avec une demande réseau de données et le suivi de l'événement push avec l’analytique pourrait ressembler à ceci:

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);
});

Ici, nous appelons une fonction qui renvoie une promesse pushReceivedTracking(), Pour les besoins de cet exemple, nous pouvons prétendre qu'il enverra une requête réseau à notre fournisseur de solution d'analyse. Nous effectuons aussi une requête réseau, obtenant et en affichant une notification utilisant les données des réponses pour le titre et le message de la notification.

Pour nous assurer que le service worker reste actif pendant que ces deux tâches sont effectuées, nous combinons ces promesses avec Promise.all(). La promesse obtenue est transmise à event.waitUntil(). Cela signifie que le navigateur attend que les deux promesses soient terminées avant de vérifier qu'une notification et l'arrêt du service worker.

Nous devons nous soucier de waitUntil() et de son utilisation, car il s'agit les développeurs sont confrontés à un problème courant : si la chaîne de promesses est incorrecte ou non fonctionnelle, Chrome afficher "default" notification:

Image de la notification par défaut dans Chrome

Chrome affiche uniquement le message "Ce site a été mis à jour en arrière-plan". une notification lorsqu'un message push reçu et l'événement push du service worker n'affiche pas de message une fois la promesse transmise à event.waitUntil() terminée.

La principale raison pour laquelle les développeurs sont interceptés par ce problème est que leur code appellent souvent self.registration.showNotification(), mais ils ne fonctionnent pas avec la promesse qu'elle renvoie. La notification par défaut s'affiche par intermittence en cours d'affichage. Par exemple, nous pouvons supprimer le retour pour self.registration.showNotification() dans l'exemple ci-dessus, et nous risquons de voir ceci .

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);
});

Comme vous pouvez le voir, il est facile de passer à côté.

N'oubliez pas : si cette notification s'affiche, vérifiez vos chaînes de promesses et event.waitUntil().

Dans la section suivante, nous allons voir ce que nous pouvons faire pour styliser les notifications et le contenu que nous pouvons afficher.

Étapes suivantes

Ateliers de programmation