[JS] Jak wyświetlać powiadomienia w przeglądarce za pomocą Notifications API?

Wyobraź sobie aplikację, która nie informuje o tym co się w niej dzieje. Po prostu coś się dzieje nagle, bez ostrzeżenia. Właśnie ten problem zazwyczaj rozwiązuje się za pomocą powiadomień.

Powiadomienia mogą przyjmować najróżniejszą postać. Najczęściej są one bezpośrednio wbudowane w aplikację przy pomocy różnego rodzaju komponentów zbudowanych za pomocą JS. Jednakże, problem powiadomień można rozwiązać w zupełnie inny sposób. Można go rozwiązać za pomocą Notifications API, wbudowanego w każdą nowoczesną przeglądarkę.

Co to jest Notifications API?

Możesz się zastanawiać, jaka tak naprawdę jest różnica między powiadomieniami dostępnymi jako API przeglądarki, a powiadomieniami zbudowanymi przez programistę. Różnica jest taka, że powiadomienia zbudowane jako komponenty aplikacji nie będą w stanie wyświetlić powiadomień ze strony bądź aplikacji internetowej w momencie, gdy okno przeglądarki jest zminimalizowane lub inne okno jest aktywne. Przez to, użytkownik może przeoczyć jakieś ważne powiadomienie. Ten problem rozwiązuje Notifications API.

Można się zastanawiać, kiedy tak specyficzny typ powiadomień może się okazać dla nas przydatny? Wyobraź sobie aplikację internetową pozwalającą na komunikację między użytkownikami, np. Slack. Dzięki temu, że Slack wykorzystuje Notifications API, to jest w stanie w swojej aplikacji przeglądarkowej poinformować użytkownika o tym, że pojawiła się nowa nieprzeczytana wiadomość.

Budujemy powiadomienia pochodzące ze strony/z aplikacji internetowej

Z racji tego, że powiadomienia pochodzące z Notifications API są powiadomieniami integrującymi się z systemem operacyjnym użytkownika, to musimy najpierw zapytać się użytkownika o pozwolenie na wysyłanie powiadomień. Bez tego nie będziemy w stanie ich wyświetlić. O pozwolenie możemy się zapytać w następujący sposób:

1
2
3
4
5
6
7

spawnNotification() {
    if (!window.Notification || Notification.permission === 'denied') {
        return;
    }
 
    Notification.requestPermission(this.spawnNotification);
}

Na przykładzie powyżej widać ile tak naprawdę potrzebujemy kodu JavaScript, aby zapytać się użytkownika o pozwolenie. Wystarczy uruchomić funkcję Notification.requestPermission() i wtedy pojawi się okno z pytaniem o pozwolenie. Możliwe są 3 stany pozwoleń:

• default - stan domyślny, czyli użytkownik jeszcze nie był pytany o pozwolenie. Nie można wyświetlić powiadomień za pomocą Notifications API.
• denied - stan w którym użytkownik nie pozwolił na wyświetlanie powiadomień i podobnie jak wyżej nie możemy ich wyświetlić.
• granted - zezwolono na wyświetlanie powiadomień.

W momencie, gdy użytkownik zgodził się otrzymywać od nas wiadomości z aplikacji internetowej bądź ze strony internetowej, to wtedy dopiero jesteśmy w stanie wyświetlić powiadomienia.

Kod odpowiedzialny za wyświetlenie powiadomienia wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

spawnNotification() {
    if (!window.Notification || Notification.permission === 'denied') {
        return;
    }
 
    if (Notification.permission === 'granted') {
        this.showNotification();
    }
 
    Notification.requestPermission(this.spawnNotification);
}
 
showNotification() {
    const notification = new Notification('Masz nową wiadomość!');
}

W porównaniu do poprzedniego przykładu kod został wzbogacony o nową funkcję: showNotification(). Jej celem jest wyświetlenie powiadomienia. W naszym przykładzie, powiadomienie przyjmuje uproszczoną postać zawierającą tylko tytuł. Gdybyśmy jednak chcieli nieco rozbudować powiadomienie, to wtedy możemy przekazać dodatkowy parametr do funkcji, zaraz po tytule. Drugi parametr przyjmuje postać obiektu w którym można ustawić wartości następujących własności (wszystkie własności można ustawić tylko raz, podczas tworzenia instancji obiektu Notification). Jednymi z częściej używanych własności są:

body {String}

Tekst, który będzie wyświetlany wewnątrz powiadomienia.

image {String}

Obraz, który będzie wyświetlany obok tekstu powiadomienia.

requireInteraction {Boolean}

Flaga, której celem jest poinformowanie o tym czy powiadomienie ma być cały czas widoczne do momentu kliknięcia w nie, czy też ma zniknąć po wyświetleniu.

Więcej informacji o dostępnych własnościach możesz przeczytać na tej stronie.

Dodatkowo, do każdego powiadomienia można podpiąć funkcje, które zostaną wykonane w momencie wystąpienia jakiegoś zdarzenia: click lub error.

1
2
3
4
5
6

showNotification() {
    const notification = new Notification('Masz nową wiadomość!');
 
    notification.onclick = () => console.log('Powiadomienie zostało kliknięte');
    notification.onerror = () => console.log('Wystąpił błąd powiadomienia');
}

Podsumowanie

Mam nadzieję, że udało mi się przedstawić temat wyczerpująco. Osobiście uważam, że możliwości udostępniane przez Notification API mogłyby dobrze współgrać wraz z synchronizacją zakładek przeglądarki, gdzie w jednej zakładce mogłaby się dziać jakaś długotrwająca operacja, np. upload plików, a w drugiej zakładce moglibyśmy kontynuować pracę robiąc coś innego.

Zapraszam do komentowania!