Benachrichtigungs-API verwenden

Ernest Delgado

Einführung

Mit der Notifications API können Sie Nutzern Benachrichtigungen für bestimmte Ereignisse anzeigen, sowohl passiv (neue E-Mails, Tweets oder Kalendertermine) als auch bei Nutzerinteraktionen, unabhängig davon, welcher Tab den Fokus hat. Es gibt eine Entwurfsspezifikation, die derzeit aber in keinem Standard enthalten ist.

So implementieren Sie Benachrichtigungen in nur wenigen Minuten:

Schritt 1: Unterstützung der Notifications API prüfen

Wir prüfen, ob webkitNotifications unterstützt wird. Der Name webkitNotifications ist darauf zurückzuführen, dass es sich um eine Entwurfsspezifikation handelt. Die endgültige Spezifikation enthält stattdessen die Funktion „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.");
}

Schritt 2: Nutzer zulassen, einer Website Berechtigungen zum Senden von Benachrichtigungen zu erteilen

Bei allen oben genannten Konstruktoren wird ein Sicherheitsfehler ausgegeben, wenn der Nutzer der Website nicht manuell Berechtigungen zum Anzeigen von Benachrichtigungen erteilt hat. Sie können eine try-catch-Anweisung verwenden, um die Ausnahme zu behandeln. Sie können aber auch die Methode checkPermission für denselben Zweck verwenden.

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);

Wenn die Webanwendung nicht berechtigt ist, Benachrichtigungen anzuzeigen, wird über die Methode requestPermission eine Infoleiste angezeigt:

Es ist jedoch sehr wichtig, dass die requestPermission-Methode nur in Ereignishandlern funktioniert, die durch eine Nutzeraktion ausgelöst werden, z. B. Maus- oder Tastaturereignisse, um unerwünschte Infofelder zu vermeiden. In diesem Fall ist die Nutzeraktion das Klicken auf die Schaltfläche mit der ID „show_button“. Das Snippet oben funktioniert nie, wenn der Nutzer nicht ausdrücklich auf eine Schaltfläche oder einen Link geklickt hat, der die requestPermission auslöst.

Schritt 3: Listener und andere Aktionen anhängen

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);

An dieser Stelle können Sie alle diese Ereignisse und Aktionen in einer eigenen Benachrichtigungsklasse kapseln, um den Code übersichtlicher zu gestalten. Dies geht jedoch über den Rahmen dieses Tutorials hinaus.