Utiliser l'API Notifications

Ernest Delgado

Twitter

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 pour les interactions utilisateur, quel que soit l'onglet actif. Il existe une spécification brouillon, mais elle ne fait actuellement partie d'aucune norme.

Procédez comme suit pour implémenter les notifications en quelques minutes:

Étape 1: Vérifiez la compatibilité 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'un brouillon de spécification. La spécification finale utilisera la 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: 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 les 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 aux mêmes fins.

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 ne dispose pas des autorisations nécessaires pour afficher des notifications, la méthode requestPermission affiche une barre d'informations:

Toutefois, il est très important de garder à l'esprit 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 l'affichage de barres d'informations non sollicitées. Dans ce cas, l'action utilisateur est le clic sur le bouton portant l'ID "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 l'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 que le code reste clair, bien que cela dépasse le cadre de ce tutoriel.