Einführung
Mit der Notifications API können Sie dem Nutzer Benachrichtigungen für bestimmte Ereignisse anzeigen lassen, 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 nicht in einem Standard enthalten ist.
So implementieren Sie Benachrichtigungen in wenigen Minuten:
Schritt 1: Unterstützung für die Notifications API prüfen
Wir prüfen, ob webkitNotifications unterstützt wird. Der Name von webkitNotifications ist darauf zurückzuführen, dass er Teil eines Spezifikationsentwurfs ist. In der endgültigen Spezifikation wird stattdessen eine notifications()-Funktion verwendet.
// 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 Berechtigungen für eine Website erteilen lassen, damit Benachrichtigungen angezeigt werden können
Alle erwähnten Konstruktoren lösen einen Sicherheitsfehler aus, wenn der Nutzer der Website nicht manuell die Berechtigung zum Anzeigen von Benachrichtigungen erteilt hat.
Sie können die Ausnahme mit einer try-catch-Anweisung oder mit der Methode checkPermission behandeln.
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 mit der Methode requestPermission eine Infoleiste angezeigt:
Es ist jedoch sehr wichtig, dass die requestPermission-Methode nur in Ereignishandlern funktioniert, die durch eine Nutzeraktion wie Maus- oder Tastaturereignisse ausgelöst werden, um unerwünschte Infoleisten zu vermeiden. In diesem Fall ist die Nutzeraktion der Klick auf die Schaltfläche mit der ID „show_button“.
Das obige Snippet funktioniert nur, wenn der Nutzer irgendwann explizit auf eine Schaltfläche oder einen Link geklickt hat, der 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 sollten Sie alle diese Ereignisse und Aktionen in einer eigenen Benachrichtigungsklasse kapseln, um den Code übersichtlicher zu halten. Dies geht jedoch über den Rahmen dieses Codelabs hinaus.