Utiliser l'API Notifications

Ernest Delgado

Introduction

L'API Notifications vous permet d'afficher des notifications à l'utilisateur pour des événements donnés, à la fois de manière passive (nouveaux e-mails, tweets ou événements d'agenda) et en fonction des interactions de l'utilisateur, quel que soit l'onglet sélectionné. Il existe une spécification provisoire, mais elle n'est actuellement incluse dans aucune norme.

Pour implémenter des notifications en quelques minutes, suivez ces étapes simples:

Étape 1: Vérifiez la prise en charge de l'API Notifications

Nous vérifions si webkitNotifications est compatible. Notez que le nom de webkitNotifications est dû au fait qu'il fait partie d'une spécification provisoire. La spécification finale comportera plutôt une fonction notifications().

// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}

Étape 2: Autorisez l'utilisateur à accorder des autorisations à un site Web pour afficher des notifications

Tous les constructeurs que nous avons mentionnés génèrent une erreur de sécurité si l'utilisateur n'a pas accordé manuellement des autorisations au site Web pour afficher des notifications. Pour gérer l'exception, vous pouvez utiliser une instruction try-catch, mais vous pouvez également utiliser la méthode checkPermission à cette fin.

document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
    'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);

Si l'application Web n'est pas autorisée à afficher des notifications, la méthode requestPermission affiche une info-barre:

Toutefois, il est très important de se rappeler que la méthode requestPermission ne fonctionne que dans les gestionnaires d'événements déclenchés par une action de l'utilisateur, comme des événements de souris ou de clavier, afin d'éviter les info-barres non sollicitées. Dans ce cas, l'action de l'utilisateur consiste à cliquer sur le bouton dont l'ID est "show_button". L'extrait ci-dessus ne fonctionnera jamais si l'utilisateur n'a pas explicitement cliqué sur un bouton ou un lien qui déclenche requestPermission à un moment donné.

Étape 3: Associer des écouteurs et d'autres actions

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    notification_test = window.webkitNotifications.createNotification(
      'icon.png', 'Notification Title', 'Notification content...');
    notification_test.ondisplay = function() { ... do something ... };
    notification_test.onclose = function() { ... do something else ... };
    notification_test.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

À ce stade, vous pouvez encapsuler tous ces événements et actions en créant votre propre classe Notification pour rendre le code plus propre, bien que cela ne relève pas du champ d'application de ce tutoriel.