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 présentées ici partent du principe que vous connaissez les service workers et les bases pour demander des autorisations de notification et envoyer des notifications. Si vous avez besoin d'un rappel sur les notifications, consultez le Premiers pas avec l'API Notifications dans cet atelier de programmation. Pour en savoir plus sur les service workers, consultez l'article de Matt Gaunt Présentation des service workers.

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

Les notifications de l'application Glitch intégrée sont automatiquement bloquées. Vous ne pourrez donc pas prévisualiser l'application sur cette page. Voici la marche à suivre:

  1. Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
  2. Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran plein écran

Glitch devrait s'ouvrir dans un nouvel onglet Chrome.

Tout au long de cet atelier de programmation, modifiez le code dans le Glitch intégré sur cette page. Actualisez le nouvel onglet contenant votre application en ligne pour voir les modifications.

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

Commencez par consulter l'application active 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 Infos est sélectionnée dans le menu déroulant Niveaux. à côté de la zone Filtre.

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

    TODO: Implement getRegistration().

    Il s'agit d'un message issu d'un bouchon de fonction que vous implémenterez dans cet atelier de programmation.

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

  1. Dans le 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'il met désormais à jour l'interface utilisateur après la résolution de la demande d'autorisation.

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

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

    • Le script attend le chargement de la page avant de l'initialiser.

  2. Dans le 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 affichera un message sur la console lorsque le service worker est 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

Au cours de cette étape, vous allez écrire du code qui exécute Lorsque l'utilisateur clique sur 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. 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 l'article 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 API Service Worker pour obtenir l'enregistrement actuel du service worker, le cas échéant. Il est un peu plus pratique d'obtenir une référence à l'enregistrement du service worker.

  • Pour terminer la fonctionnalité d'enregistrement du service worker, ajoutez du code permettant d'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ù s'affiche l'application en ligne, actualisez la page. Les boutons Enregistrer le service worker et Annuler l'enregistrement du service worker doivent maintenant fonctionner.

Envoyer des notifications au service worker

Au cours de 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 l'envoie à 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 est une fonction asynchrone. Vous pouvez donc 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 MMD sur postMessage.

  • Le code vérifie la présence de la propriété navigator.serviceWorker.controller avant de tenter d'accéder à la fonction postMessage. navigator.serviceWorker.controller sera null en l'absence de service worker actif ou si l'actualisation de la page a été forcée (Shift+Actualiser). Pour en savoir plus, consultez la documentation du contrôleur ServiceWorkers sur MDN.

Gérer les notifications dans le service worker

Au cours de cette étape, vous allez écrire dans le service worker le code qui traitera 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 explication rapide:

  • 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 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 refusée. Le code ci-dessus utilise un bloc catch pour éviter une erreur de refus Promise non détectée et gérer cette erreur un peu plus facilement.

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

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