Wprowadzenie
Interfejs Notifications API umożliwia wyświetlanie użytkownikom powiadomień o określonych wydarzeniach zarówno w sposób pasywny (nowe e-maile, tweety czy wydarzenia w kalendarzu), jak i o interakcjach użytkowników niezależnie od tego, na której karcie została wybrana karta. Istnieje wersja robocza specyfikacji, ale nie ma ona obecnie żadnych standardów.
Wystarczy kilka minut, aby włączyć powiadomienia. Wystarczy, że wykonasz te proste czynności:
Krok 1. Sprawdź, czy interfejs Notification API obsługuje powiadomienia
Sprawdzamy, czy webkitNotifications jest obsługiwany. Zauważ, że nazwa webkitNotifications jest częścią specyfikacji roboczej. Ostateczna specyfikacja będzie miała zamiast tego funkcję 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.");
}
Krok 2. Pozwól użytkownikowi przyznawać stronom uprawnienia do wyświetlania powiadomień
Każdy ze wspomnianych konstruktorów zwróci błąd zabezpieczeń, jeśli użytkownik nie przyzna ręcznie witrynie uprawnień do wyświetlania powiadomień.
Do obsługi wyjątku możesz użyć instrukcji try-catch, ale w tym samym celu możesz też użyć metody checkPermission.
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);
Jeśli aplikacja internetowa nie ma uprawnień do wyświetlania powiadomień, metoda requestPermission wyświetla pasek informacyjny:
Ważne jest jednak, aby pamiętać, że metoda requestPermission działa tylko w modułach obsługi zdarzeń wywoływanych przez działanie użytkownika, np. zdarzenie myszy lub klawiatury. Pozwala to uniknąć wyświetlania niechcianych pasków informacyjnych. W tym przypadku działaniem użytkownika jest kliknięcie przycisku o identyfikatorze „show_button”.
Powyższy fragment kodu nigdy nie zadziała, jeśli użytkownik nie kliknie przycisku lub linku wywołującego requestPermission.
Krok 3. Dołącz detektory i inne działania
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);
Na tym etapie możesz ująć w nich wszystkie te zdarzenia i działania, tworząc własną klasę powiadomień, aby utrzymać przejrzystość kodu. Nie wychodzi to jednak poza zakres tego samouczka.