Wprowadzenie
Interfejs Notifications API umożliwia wyświetlanie użytkownikowi powiadomień o określonych zdarzeniach, zarówno w trybie pasywnym (nowe e-maile, tweety lub wydarzenia w kalendarzu), jak i w reakcji na interakcje użytkownika, niezależnie od tego, która karta jest aktywna. Istnieje specyfikacja robocza, ale nie jest ona obecnie częścią żadnego standardu.
Aby wdrożyć powiadomienia w zaledwie kilka minut, wykonaj te proste czynności:
Krok 1. Sprawdź, czy interfejs Notifications API jest obsługiwany
Sprawdzamy, czy webkitNotifications jest obsługiwane. Pamiętaj, że nazwa webkitNotifications jest używana w ramach specyfikacji roboczej. W wersji końcowej zamiast niej będzie używana funkcja 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 przyznać stronie internetowej uprawnienia do wyświetlania powiadomień
Jeśli użytkownik nie przyznał ręcznie uprawnień do wyświetlania powiadomień witrynie, każdy z wymienionych konstruktorów spowoduje błąd zabezpieczeń.
Aby obsłużyć wyjątek, możesz użyć instrukcji try-catch, ale do tego samego 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 spowoduje wyświetlenie paska informacji:
Pamiętaj jednak, że bardzo ważne jest, aby metoda requestPermission działała tylko w obsługach zdarzeń wywoływanych przez działanie użytkownika, takie jak zdarzenia myszy lub klawiatury, aby uniknąć niechcianych pasków informacji. 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 w jakimś momencie przycisku lub linku, który uruchamia funkcję requestPermission.
Krok 3. Dołącz odbiorców 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);
W tym momencie możesz chcieć opakować wszystkie te zdarzenia i działania, tworząc własną klasę Notification, aby zachować czystszy kod. Nie jest to jednak tematem tego samouczka.