Image for Notyfikacje Push w przeglądarkach WWW

Notyfikacje Push w przeglądarkach WWW

Czas czytania:

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

zapraszamy do kontaktu

UI2WEB.com jest firmą technologiczną skupioną wokół rozwiązań WordPress / WooCommerce /PHP/ HTML5. Oferujemy zarówno usługi wdrożeniowe jak również body leasing programistów front-end oraz back-end.

Jeśli trafiłeś tu poszukując odpowiedzi na istniejące problemy i masz dość współpracy z freelancerami a stawiasz na bezkompromisową jakość.

Zapraszamy do kontaktu

Może Cię również zainteresować:

Co wyróżnia profesjonalne wdrożenie serwisu bazującego na WordPress?

Post pochodzi z naszych kanałów w Social Media. — Nasi klienci często pytają, czym różnią… Read More

Czy warto decydować się na usługę wdrożenia WooCommerce i na czym ona polega?

Wtyczka do WordPressa WooCommerce wydaje się być prostym sposobem na stworzenie sklepu internetowego. Wystarczy instalacja,… Read More