Google Remarketing
TechBlog - wszystkie artykuły

Notyfikacje Push w przeglądarkach WWW

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.


Powiadomienie wyświetlane na przeglądarce Google Chrome

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).


Zmiana ustawień w przeglądarce Google Chrome dla Android

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;
}


Powiadomienie wyświetlone przy użyciu serwisu Codepen.io

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ć.

Ciasteczka Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje.