Utiliser l'API Notifications

Ernest Delgado

Avertissement  : Cet article est obsolète et fait référence à une API abandonnée. Pour une couverture moderne de l'API Notifications (compatible avec Chrome, Firefox et Safari), consultez la documentation MDN sur les notifications. Notify.js offre également une abstraction intéressante pour l'API.

Introduction

L'API Notifications vous permet d'afficher des notifications à l'utilisateur pour des événements donnés, de manière passive (nouveaux e-mails, tweets ou événements d'agenda) et lors des interactions de l'utilisateur, quelle 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 si l'API Notifications est compatible

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 une fonction notifications() à la place.

// 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 : Demandez à l'utilisateur d'autoriser un site Web à afficher des notifications

Tous les constructeurs que nous avons mentionnés généreront une erreur de sécurité si l'utilisateur n'a pas accordé manuellement l'autorisation au site Web d'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 affichera une barre d'informations :

Infobulle d'autorisation des notifications dans Google Chrome.

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 les événements de souris ou de clavier, afin d'éviter les info-bars 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 cliqué explicitement sur un bouton ou un lien qui déclenche requestPermission à un moment donné.

Étape 3 : Associez 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 clair, bien que cela dépasse le cadre de ce tutoriel.