Notifications API i obsługa uprawnień

Notification.permission to statyczny ciąg znaków odzwierciedlający bieżący stan uprawnień. Może mieć wartość "granted" (użytkownik zezwolił), "denied" (użytkownik zablokował) lub "default" (użytkownik nie został jeszcze zapytany). Przed próbą wyświetlenia powiadomień należy sprawdzić tę właściwość, aby uniknąć niepotrzebnych błędów.

Notification.requestPermission() zwraca Promise, który jest rozstrzygany z nowym ciągiem znaków określającym uprawnienie. Należy wywoływać tę metodę wyłącznie w odpowiedzi na wyraźne działanie użytkownika, a nie podczas ładowania strony. Przeglądarki ignorują lub ograniczają prośby o zgodę wyświetlane natychmiast po załadowaniu strony, a użytkownicy uznają je za uciążliwe, gdy pojawiają się bez kontekstu.

Najskuteczniejszy wzorzec polega na wyświetleniu w aplikacji komunikatu wyjaśniającego korzyści, a następnie umożliwieniu użytkownikowi kliknięcia „Włącz powiadomienia” przed wywołaniem requestPermission(). Zapewnia to odpowiedni kontekst, zwiększa odsetek udzielanych zgód i zapobiega oznaczeniu witryny przez przeglądarkę jako źródła spamu. Nigdy nie należy prosić o zgodę podczas ładowania strony.

new Notification(title, options) tworzy i wyświetla powiadomienie systemowe. Pierwszym argumentem jest ciąg znaków z tytułem. Obiekt options jest drugim argumentem i przyjmuje właściwości takie jak body (tekst podtytułu), icon (adres URL obrazu) oraz tag do usuwania duplikatów. Działa to tylko wtedy, gdy uprawnienie ma wartość "granted".

Najważniejsze opcje powiadomień to: body — opisowy tekst pod tytułem, icon — mały obraz, badge — mała monochromatyczna ikona wyświetlana w obszarze powiadomień systemu operacyjnego, image — duży obraz umieszczany bezpośrednio w powiadomieniu, tag — zastępowanie poprzedniego powiadomienia z tym samym tagiem oraz requireInteraction: true — utrzymywanie powiadomienia do czasu działania użytkownika.

Instancja Notification wywołuje kilka zdarzeń: onclick jest wywoływane po kliknięciu powiadomienia przez użytkownika i służy do uaktywnienia okna oraz nawigacji, onclose jest wywoływane po zamknięciu powiadomienia, a onerror — w razie problemu z jego utworzeniem. Procedury obsługi należy przypisać do zwróconej instancji po wywołaniu new Notification().

Należy zapisać zwróconą instancję Notification w zmiennej i wywołać notification.close(), aby programowo zamknąć powiadomienie. Jest to przydatne w przypadku powiadomień zależnych od czasu, które po pewnym czasie tracą znaczenie. Można połączyć tę metodę z setTimeout, aby automatycznie zamykać powiadomienia po kilku sekundach.

Notifications API wymaga bezpiecznego kontekstu. Na stronach HTTP wyrażenie typeof Notification === 'undefined' zwraca 'undefined' albo API jest całkowicie wyłączone, zależnie od przeglądarki. Jest to środek bezpieczeństwa zapobiegający zalewaniu użytkowników fałszywymi komunikatami systemowymi przez złośliwe witryny. Przed użyciem zawsze należy sprawdzić dostępność API.

Hook useNotifications może udostępniać dwie metody: requestPermission() i showNotification(title, options). Wewnętrznie śledzi bieżący stan uprawnień i aktualizuje go po wysłaniu żądania. Komponenty wywołują showNotification bez konieczności zajmowania się sprawdzaniem uprawnień, ponieważ hook obsługuje je wewnętrznie.

Page Visibility API udostępnia właściwość document.hidden i zdarzenie visibilitychange. Powiadomienia mają największy sens, gdy użytkownik nie przegląda aktualnie karty. Przed wyświetleniem powiadomienia należy sprawdzić document.hidden === true, aby uniknąć zbędnych alertów, gdy strona jest już na pierwszym planie.

Przedstawione tutaj Notifications API służy do wyświetlania powiadomień wywoływanych lokalnie przez samą stronę. Aby otrzymywać powiadomienia push nawet po zamknięciu strony, potrzebne są Push API oraz service worker. Service worker odbiera zdarzenie push i wywołuje self.registration.showNotification() w tle.

Która z poniższych wartości NIE jest prawidłową wartością Notification.permission?

Notification.permission może mieć wartość granted, denied lub default. O zgodę należy prosić zawsze po działaniu użytkownika, a nie podczas ładowania strony. Do tworzenia powiadomień należy używać new Notification(title, options), a za pomocą onclick obsługiwać uaktywnianie okna. Notifications API warto połączyć z Page Visibility API, aby wyświetlać powiadomienia tylko wtedy, gdy karta jest ukryta.