Premiers pas avec l'API Notifications

Dans cet atelier de programmation, vous utiliserez les fonctionnalités de base de l'API Notifications pour :

• Demander l'autorisation d'envoyer des notifications
• Envoyer des notifications
• Tester les options de notification

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

Commencez par consulter 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. Cliquez sur l'onglet Console.

   Le message suivant doit s'afficher dans la console :

   Notification permission is default
   

   Si vous ne savez pas ce que cela signifie, ne vous inquiétez pas, tout sera bientôt révélé !

2. Cliquez sur les boutons de l'application en direct : Demander l'autorisation d'envoyer des notifications et Envoyer une notification.

   La console affiche les messages "TODO" de quelques stubs de fonction : requestPermission et sendNotification. Voici les fonctions que vous allez implémenter dans cet atelier de programmation.

Examinons maintenant le code de l'exemple d'application. Ouvrez public/index.js et examinez certaines parties importantes du code existant :

• La fonction showPermission utilise l'API Notifications pour obtenir l'état actuel des autorisations du site et l'enregistrer dans la console :

  // Print current permission state to console;
  // update onscreen message.
  function showPermission() {
    let permission = Notification.permission;
    console.log('Notification permission is ' + permission);
    let p = document.getElementById('permission');
    p.textContent = 'Notification permission is ' + permission;
  }
  

  Avant de demander l'autorisation, l'état de l'autorisation est default. Dans l'état d'autorisation default, un site doit demander et obtenir l'autorisation avant de pouvoir envoyer des notifications.

• La fonction requestPermission est un stub :

  // Use the Notification API to request permission to send notifications.
  function requestPermission() {
    console.log('TODO: Implement requestPermission()');
  }
  

  Vous implémenterez cette fonction à l'étape suivante.

• La fonction sendNotification est un stub :

  // Use the Notification constructor to create and send a new Notification.
  function sendNotification() {
    console.log('TODO: Implement sendNotification()');
  }
  

  Vous implémenterez cette fonction après avoir implémenté requestPermission.

• L'écouteur d'événements window.onload appelle la fonction showPermission au chargement de la page, ce qui affiche l'état actuel des autorisations dans la console et sur la page :

  window.onload = () => { showPermission(); };
  

Demander l'autorisation d'envoyer des notifications

Au cours de cette étape, vous allez ajouter une fonctionnalité permettant de demander à l'utilisateur l'autorisation d'envoyer des notifications.

Vous utiliserez la méthode Notification.requestPermission() pour déclencher un pop-up qui demande à l'utilisateur d'autoriser ou de bloquer les notifications de votre site.

1. Remplacez le stub de la fonction requestPermission dans public/index.js par le code suivant :

   // Use the Notification API to request permission to send notifications.
   function requestPermission() {
     Notification.requestPermission()
       .then((permission) => {
         console.log('Promise resolved: ' + permission);
         showPermission();
       })
       .catch((error) => {
         console.log('Promise was rejected');
         console.log(error);
       });
   }
   

2. Actualisez l'onglet Chrome dans lequel vous affichez votre application en direct.

3. Dans l'interface de l'application en direct, cliquez sur Demander l'autorisation d'envoyer des notifications. Un pop-up s'affiche.

L'utilisateur peut répondre de trois manières différentes au pop-up d'autorisation.

Si l'utilisateur clique sur "Autoriser" :

• La propriété Notification.permission est définie sur granted.

• Le site pourra afficher des notifications.

• Les appels ultérieurs à Notification.requestPermission seront résolus en granted sans pop-up.

Si l'utilisateur clique sur "Bloquer" :

• La propriété Notification.permission est définie sur denied.

• Le site ne pourra pas afficher de notifications à l'utilisateur.

• Les appels ultérieurs à Notification.requestPermission seront résolus en denied sans pop-up.

Si l'utilisateur ferme le pop-up :

• Notification.permission reste inchangé et vaut default.

• Le site ne pourra pas afficher de notifications à l'utilisateur.

• Les appels suivants à Notification.requestPermission généreront d'autres pop-ups.

  Toutefois, si l'utilisateur continue de fermer les pop-up, le navigateur peut bloquer le site et définir Notification.permission sur denied. Aucune fenêtre pop-up ni notification de demande d'autorisation ne peut alors être affichée à l'utilisateur.

  Au moment de la rédaction de cet article, le comportement du navigateur en réponse aux pop-ups d'autorisation des notifications fermées est toujours susceptible de changer. La meilleure façon de gérer cela est de toujours demander l'autorisation de notification en réponse à une interaction initiée par l'utilisateur, afin qu'il s'y attende et sache ce qui se passe.

Envoyer une notification

Dans cette étape, vous allez envoyer une notification à l'utilisateur.

Vous allez utiliser le constructeur Notification pour créer une notification et tenter de l'afficher. Si l'état de l'autorisation est granted, votre notification s'affiche.

1. Remplacez le stub de la fonction sendNotification dans index.js par le code suivant :

   // Use the Notification constructor to create and send a new Notification.
   function sendNotification() {
     let title = 'Test';
     let options = {
       body: 'Test body',
       // Other options can go here
     };
     console.log('Creating new notification');
     let notification = new Notification(title, options);
   }
   

   Le constructeur Notification utilise deux paramètres : title et options. options est un objet dont les propriétés représentent les paramètres visuels et les données que vous pouvez inclure dans une notification. Pour en savoir plus, consultez la documentation MDN sur les paramètres de notification.

2. Actualisez l'onglet Chrome dans lequel vous consultez votre application en direct, puis cliquez sur le bouton Envoyer une notification. Une notification contenant le texte Test body devrait s'afficher.

Que se passe-t-il lorsque vous envoyez des notifications sans autorisation ?

Dans cette étape, vous allez ajouter quelques lignes de code qui vous permettront de voir ce qui se passe lorsque vous tentez d'afficher une notification sans l'autorisation de l'utilisateur.

• Dans public/index.js, à la fin de la fonction sendNotification, définissez le nouveau gestionnaire d'événements onerror de la notification :

// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

Pour observer une erreur d'autorisation de notification :

1. Cliquez sur l'icône en forme de cadenas à côté de la barre d'adresse de Chrome, puis rétablissez le paramètre d'autorisation des notifications du site sur sa valeur par défaut.

2. Cliquez sur Demander l'autorisation d'envoyer des notifications, puis sélectionnez Bloquer dans le pop-up.

3. Cliquez sur Envoyer une notification et voyez ce qui se passe. Le texte de l'erreur (Could not send notification) et l'objet d'événement sont consignés dans la console.

Si vous le souhaitez, réinitialisez à nouveau les autorisations de notification du site. Vous pouvez essayer de demander l'autorisation et de fermer le pop-up plusieurs fois pour voir ce qui se passe.

Tester les options de notification

Vous avez maintenant abordé les principes de base pour demander l'autorisation et envoyer des notifications. Vous avez également vu l'impact des réponses des utilisateurs sur la capacité de votre application à afficher des notifications.

Vous pouvez maintenant tester les nombreuses options visuelles et de données disponibles lorsque vous créez une notification. Vous trouverez ci-dessous l'ensemble des options disponibles. (Pour en savoir plus sur ces options, consultez la documentation sur les notifications sur MDN.)

Notez que les navigateurs et les appareils implémentent ces options différemment. Il est donc intéressant de tester vos notifications sur différentes plates-formes pour voir à quoi elles ressemblent.

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

Pour trouver d'autres idées, consultez le générateur de notifications de Peter Beverloo.

Pour en savoir plus, consultez le prochain atelier de programmation de cette série, Gérer les notifications avec un service worker.