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 über Nutzerinteraktionen, unabhängig davon, welcher Tab im Fokus ist. Es gibt einen Entwurf, der jedoch keinem Standard entspricht.
Mit den folgenden einfachen Schritten können Sie Benachrichtigungen in nur wenigen Minuten einrichten:
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 er Teil eines Spezifikationsentwurfs ist. Die endgültige Spezifikation hat stattdessen eine notifications()-Funktion.
// 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 müssen einer Website Berechtigungen zum Anzeigen von Benachrichtigungen erteilen
Jeder der erwähnten Konstruktoren gibt einen Sicherheitsfehler zurück, wenn der Nutzer der Website nicht manuell Berechtigungen zum Anzeigen von Benachrichtigungen erteilt hat.
Zur Verarbeitung der Ausnahme können Sie eine „try-catch“-Anweisung oder 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 zum Anzeigen von Benachrichtigungen berechtigt ist, zeigt die Methode requestPermission eine Infoleiste an:
Sie sollten jedoch unbedingt beachten, dass die requestPermission-Methode nur in Event-Handlern funktioniert, die durch eine Nutzeraktion ausgelöst werden, z. B. Maus- oder Tastaturereignisse. So vermeiden Sie unerwünschte Infoleisten. In diesem Fall ist die Nutzeraktion der Klick auf die Schaltfläche mit der ID „show_button“.
Das Snippet oben funktioniert nie, wenn der Nutzer nicht irgendwann auf eine Schaltfläche oder einen Link geklickt hat, durch den das requestPermission ausgelöst wird.
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 kapseln, um Ihre eigene Benachrichtigungsklasse zu erstellen, um den Code sauberer zu halten. Dies würde jedoch den Rahmen dieser Anleitung sprengen.