Notyfikacje Push w przeglądarkach WWW

Czas czytania:

office

Posiadając smartphone’a codziennie dostajemy różnego rodzaju powiadomienia dotyczące poczty, bądź nowej wiadomości SMS. Pojawia się kilkusekundowe okienko z informacją, a następnie znika. Przeglądarki internetowe podążając za trendem, również wprowadziły możliwość wyświetlania notyfikacji na urządzeniach. Jeśli strona obsługuje powiadomienia, zostaniemy o tym poinformowani stosowną treścią.

Jakie korzyści przynosi ta funkcjonalność? Użytkownik przykładowo śledzący dany serwis może zgodzić się na dostarczanie powiadomień, które informować go będą o nowych artykułach. Google już od dawna korzysta z takiego rozwiązania, wyświetlając w powiadomieniach nowe filmy z kanałów, które subskrybujemy, albo informując nas o nowej wiadomości w skrzynce e-mail.

źródło: youtube.com

Kompatybilność

Google jako pierwszy zaimplementował system notyfikacji w swojej przeglądarce Google Chrome. Był pomysłodawcą i twórcą nowego standardu wpieranego ówcześnie przez większość współczesnych przeglądarek jak Firefox, Opera, czy Safari. Jeśli nigdy nie mieliśmy styczności z powiadomieniami w przeglądarkach, to można przetestować tę funkcjonalność dzięki stronie gauntface.github.io.

Ustawienia

Zawsze może się zdarzyć, że nie jesteśmy już więcej zainteresowani materiałami dostarczanymi przez daną stronę. Po wejściu w ustawienia przeglądarki można w łatwy sposób zmienić zachowanie powiadomień dla danego hosta (adresu strony).

Zasada działania

Naszym celem będzie wyświetlenie krótkiej informacji użytkownikowi, który zgodził się otrzymywać powiadomienia. Niestety nasz skrypt uruchamiany lokalnie nie zadziała prawidłowo na wszystkich przeglądarkach.

Stwórzmy wpierw obiekt Notification o nazwie powiadomienie zawierający:

Nagłówek wiadomości	’Witam’
Wiadomość powiadomienia	’Dalsza treść wiadomości
Nieobowiązkowy atrybut, ścieżka do ikonki	”images/icon.png’

JavaScript

if (Notification.permission !== "granted")
    Notification.requestPermission();
else {
    var powiadomienie = new Notification('Witam', {
        icon: 'images/icon.png',
        body: "Dalsza treść wiadomości",
    });

Następna czynność będzie związana z uruchomienie tego kawałka skryptu.

Zamieszczamy go w funkcji powiadomMnie(), która wywoływana jest przez przycisk znajdujący się na stronie.

HTML

<button onclick="powiadomMnie()"> Wyświetl! </button>

Brakuje jeszcze dwóch rzeczy: Otwarcia nowej karty po kliknięciu w powiadomienie i wyświetlenie informacji o niekompatybilnej przeglądarce.

Przekierowanie dodamy poprzez odwołanie się do atrybutu onclick zmiennej powiadomienie i wywołanie window.open.

JavaScript

powiadomienie.onclick = function () {
    window.open("http://www.psd2css.pl");
};

Kompatybilność ustalimy poprzez zapytanie o istnienie obiektu Notyfication.

JavaScript

if (!Notification) {
    alert('Twoja przeglądarka nie obsługuje powiadomień.');
    return;
}

Oczywiście istnieje lista wielu dodatkowych zdarzeń. Dla Google Chrome dostępne są pod adresem developer.chrome.com/apps/notifications.

Opisany powyżej przykład jest tylko wierzchołkiem tematu powiadomień w przeglądarkach. Do praktycznego zastosowania notyfikacji potrzebny będzie serwer Node.js, który sprawnie będzie zarządzał całym procesem komunikacji.

Podsumowanie

Odpowiednie zarządzanie Notyfikacjami Push w serwisach może przynieść korzyści zarówno użytkownikom, jak i firmom. Pozostanie w stałym kontakcie z serwisem (np. poprzez przypominanie o zaległościach w artykułach), jest prostym sposobem na utrzymanie stałego, minimalnego poziomu odbiorców twoich treści. Ciągłe doskonalenia i wzbogacanie API powiadomień zapowiada funkcjonalność, w którą już teraz warto się zainteresować.

Tagi