Utiliser un service worker pour gérer les notifications

Kate Jeffreys
Kate Jeffreys

Dans cet atelier de programmation, vous allez utiliser un service worker pour gérer les notifications. Les instructions ci-dessous partent du principe que vous connaissez déjà les service workers et les principes de base de la demande d'autorisation de notification et de l'envoi de notifications. Si vous avez besoin d'un rappel sur les notifications, consultez l'atelier de programmation Premiers pas avec l'API Notifications. Pour en savoir plus sur les service workers, consultez la présentation des service workers de Matt Gaunt.

Remixer l'application exemple et l'afficher dans un nouvel onglet

Les notifications sont automatiquement bloquées dans l'application Glitch intégrée. Vous ne pourrez donc pas prévisualiser l'application sur cette page. Voici ce que vous devez faire:

  1. Cliquez sur Remixer pour modifier pour rendre le projet modifiable.
  2. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.

Glitch devrait s'ouvrir dans un nouvel onglet Chrome.

Au cours de cet atelier de programmation, modifiez le code dans Glitch intégré sur cette page. Actualisez le nouvel onglet avec votre application en direct pour voir les modifications.

Se familiariser avec l'application exemple et le code de démarrage

Commencez par examiner l'application en direct dans le nouvel onglet Chrome:

  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
  2. Cliquez sur l'onglet Console.

  3. Assurez-vous que l'option Info est sélectionnée dans le menu déroulant Niveaux à côté de la zone Filtrer.

  4. Dans la console DevTools de votre application en ligne, un message de console devrait s'afficher:

    TODO: Implement getRegistration().

    Il s'agit d'un message provenant d'un bouchon de fonction que vous allez implémenter dans cet atelier de programmation.

Voyons maintenant le code de l'application exemple dans Glitch intégré sur cette page.

  1. Dans Glitch intégré, examinez public/index.js:

    • Il existe quatre bouchons pour les fonctions que vous allez implémenter: registerServiceWorker, getRegistration, unRegisterServiceWorker et sendNotification.

    • La fonction requestPermission demande l'autorisation de l'utilisateur pour envoyer des notifications. Si vous avez suivi l'atelier de programmation Premiers pas avec l'API Notifications, vous remarquerez que sa fonction requestPermission est utilisée ici. La seule différence est qu'elle met également à jour l'interface utilisateur après avoir résolu la demande d'autorisation.

    • La fonction updateUI actualise tous les boutons et messages de l'application.

    • La fonction initializePage effectue la détection des fonctionnalités pour la fonctionnalité de service worker dans le navigateur et met à jour l'interface utilisateur de l'application.

    • Le script attend que la page soit chargée, puis l'initialise.

  2. Dans Glitch intégré, ouvrez public/service-worker.js.

    Comme son nom l'indique, vous allez ajouter du code à l'application pour enregistrer ce fichier en tant que service worker.

    Bien que le fichier ne soit pas encore utilisé par l'application, il contient du code de démarrage qui imprime un message dans la console lorsque le service worker est activé.

    Vous ajouterez du code à public/service-worker.js pour gérer les notifications lorsque le service worker les recevra.

Enregistrer le service worker

À cette étape, vous allez écrire du code qui s'exécute lorsque l'utilisateur clique sur Register service worker (Enregistrer le service worker) dans l'interface utilisateur de l'application. Ce code enregistre public/service-worker.js en tant que service worker.

  1. Dans l'éditeur Glitch intégré, ouvrez public/index.js. Remplacez la fonction registerServiceWorker par le code suivant:

    // Use the Service Worker API to register a service worker.
    async function registerServiceWorker() {
      await navigator.serviceWorker.register('./service-worker.js')
      updateUI();
    }
    

    Notez que registerServiceWorker utilise la déclaration async function pour faciliter la gestion des promesses. Vous pouvez ainsi await la valeur résolue d'un Promise. Par exemple, la fonction ci-dessus attend le résultat de l'enregistrement d'un service worker avant de mettre à jour l'UI. Pour en savoir plus, consultez la page await sur MDN.

  2. Maintenant que l'utilisateur peut enregistrer un service worker, vous pouvez obtenir une référence à l'objet d'enregistrement du service worker. Dans public/index.js, remplacez la fonction getRegistration par le code suivant:

    // Get the current service worker registration.
    function getRegistration() {
      return navigator.serviceWorker.getRegistration();
    }
    

    La fonction ci-dessus utilise l'API Service Worker pour obtenir l'enregistrement actuel du service worker, le cas échéant. Il permet d'obtenir une référence à l'enregistrement du service worker un peu plus facilement.

  • Pour finaliser la fonctionnalité d'enregistrement du service worker, ajoutez du code pour annuler l'enregistrement du service worker. Remplacez la fonction unRegisterServiceWorker par le code suivant:

    // Unregister a service worker, then update the UI.
    async function unRegisterServiceWorker() {
      // Get a reference to the service worker registration.
      let registration = await getRegistration();
      // Await the outcome of the unregistration attempt
      // so that the UI update is not superceded by a
      // returning Promise.
      await registration.unregister();
      updateUI();
    }
    

Dans l'onglet dans lequel vous consultez l'application en ligne, actualisez la page. Les boutons Enregistrer le service worker et Désenregistrer le service worker devraient maintenant fonctionner.

Envoyer des notifications au service worker

À cette étape, vous allez écrire du code qui s'exécutera lorsque l'utilisateur cliquera sur Envoyer une notification dans l'interface utilisateur de l'application. Ce code crée une notification, vérifie qu'un service worker est enregistré, puis envoie la notification au service worker à l'aide de sa méthode postMessage.

Dans l'éditeur Glitch intégré, ouvrez public/index.js et remplacez la fonction sendNotification par le code suivant:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

Voici ce que fait ce code:

  • sendNotification étant une fonction asynchrone, vous pouvez utiliser await pour obtenir une référence à l'enregistrement du service worker.

  • La méthode postMessage du service worker envoie des données de l'application au service worker. Pour en savoir plus, consultez la documentation MDN sur postMessage.

  • Le code vérifie la présence de la propriété navigator.serviceWorker.controller avant d'essayer d'accéder à la fonction postMessage. navigator.serviceWorker.controller sera null si aucun service worker actif n'est disponible ou si la page a été actualisée de force (Shift+Actualiser). Pour en savoir plus, consultez la documentation du contrôleur ServiceWorker sur MDN.

Gérer les notifications dans le service worker

Dans cette étape, vous allez écrire du code dans le service worker qui gérera les messages qui y sont publiés et affichera des notifications à l'utilisateur.

Dans l'éditeur Glitch intégré, ouvrez public/service-worker.js. Ajoutez le code suivant à la fin du fichier :

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

Voici une brève explication:

  • self est une référence au service worker lui-même.

  • Bien que le service worker gère désormais l'affichage des notifications, l'UI principale de l'application est toujours chargée d'obtenir l'autorisation de l'utilisateur pour les notifications. Si l'autorisation n'est pas accordée, la promesse renvoyée par showNotification est rejetée. Le code ci-dessus utilise un bloc catch pour éviter une erreur de rejet Promise non interceptée et gérer cette erreur de manière un peu plus élégante.

Si vous rencontrez des difficultés, consultez glitch.com/edit/#!/codelab-notifications-service-worker-completed pour obtenir le code final.

Passez à l'atelier de programmation suivant de cette série: Créer un serveur de notifications push.