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 bases de la demande d'autorisation de notification et de l'envoi de notifications. Si vous avez besoin de vous rafraîchir la mémoire sur les notifications, consultez l'atelier de programmation Premiers pas avec l'API Notifications. Pour en savoir plus sur les service workers, consultez l'introduction aux service workers de Matt Gaunt.

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 les outils de développement.

  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 Filtre.

  4. Dans la console d'outils de développement de votre application en direct, un message de console devrait s'afficher :

    TODO: Implement getRegistration().

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

Examinons maintenant le code de l'exemple d'application.

  1. Examinez l'élément public/index.js :

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

    • La fonction requestPermission demande à l'utilisateur l'autorisation d'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'il met désormais é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 capacité du 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. 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 affichera un message dans la console lorsque le service worker sera activé.

    Vous allez ajouter du code à public/service-worker.js pour gérer les notifications lorsque le service worker les reçoit.

Enregistrer le service worker

Dans 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'UI de l'application. Ce code enregistrera public/service-worker.js en tant que service worker.

  1. 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. Cela vous permet d'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 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 du service worker actuel, s'il existe. Cela facilite un peu l'obtention d'une référence à l'enregistrement du service worker.

  • 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 où vous affichez l'application en direct, actualisez la page. Les boutons Register service worker (Enregistrer le service worker) et Unregister service worker (Désenregistrer le service worker) devraient maintenant fonctionner.

Envoyer des notifications au service worker

Dans cette étape, vous allez écrire le 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.

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 s'il n'y a pas de service worker actif ou si la page a été actualisée de force (Shift+Actualiser). Pour en savoir plus, consultez la documentation sur le 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 lui sont envoyés et affichera des notifications à l'utilisateur.

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 fait référence au service worker lui-même.

  • Bien que le service worker gère désormais l'affichage des notifications, l'UI de l'application principale est toujours responsable de l'obtention de l'autorisation de notification de l'utilisateur. 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.

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