Powiadomienia Web Push

Powiadomienia Web Push to klikalne komunikaty, które pojawiają się na twoim urządzeniu. Są podobne do powiadomień otrzymywanych na telefonach czy tabletach z aplikacji natywnych, z tą różnicą, że wysyłane są one z aplikacji webowej i mamy do nich dostęp na każdym urządzeniu z którego korzystamy.

Jak je włączyć?

Najpierw należy wyrazić zgodę na otrzymywanie takich powiadomień. Domyślnie przeglądarka sama nas o to zapyta, gdy wejdziemy na stronę, która chce nam wysyłać powiadomienia.

Jeśli chcemy zmienić te ustawienia, na przykładzie przeglądarki chrome – przechodzimy do ustawień przeglądarki, a następnie klikamy na samym dole „pokaż ustawienia zaawansowane”. W sekcji prywatność wybieramy „ustawienia treści” i szukamy powiadomień.

Ustawienia powiadomień Ustawienia powiadomień

Jak wygląda takie powiadomienie?

Zapewne każdy z nas spotkał się już z nimi na popularnych serwisach internetowych.

Powiadomienie web push Tak wygląda przykładowe powiadomienie

Powiadomienie Web Push składa się zawsze z tych samych elementów :

  • tytuł,
  • treść,
  • grafika,
  • link strony, z której zostało wysłane.

Na urządzeniach mobilnych dostajemy powiadomienie, które trafia, jak w przypadku natywnych aplikacji, do górnej belki lub na ekran odblokowania telefonu, jeśli ustawienia na to pozwalają.

Jak wysyłać powiadomienia Web Push?

Na samym początku musimy zarejestrować service worker, w tym celu musimy stworzyć pusty plik o nazwie sw.js, a następnie zarejestrować go poleceniem:

navigator.serviceWorker.register('sw.js');

Następnie, aby otrzymać pozwolenie od użytkownika na pokazywanie powiadomień:

Notification.requestPermission((result) => {
      console.log(result);
    });

Rezultatem wywołania tej funkcji w przypadku zgody użytkownika będzie string granted.

Kolejnym krokiem będzie wywołanie samego komunikatu, w tym celu użyjemy:

navigator.serviceWorker.ready.then((registration) => {
  registration.showNotification('To jest powiadomienie testowe', {
    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
    icon: 'logo.png',
    tag: 1
  });
})

W wyniku czego otrzymamy wiadomość Push, jak na zdjęciu wyżej. Pamiętajmy, że strona musi posiadać certyfikat SSL, czyli zaczynać się na https://. Przykładowy kod będzie zatem wyglądał tak:

navigator.serviceWorker.register('sw.js');

  Notification.requestPermission((result) => {
    if (result === 'granted') {
navigator.serviceWorker.ready.then((registration) => {
registration.showNotification('To jest powiadomienie testowe', {
body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
          icon: 'logo.png',
          tag: 1
});
});
    };
  });

W powyższym przykładzie użyliśmy 3 opcji :

  • body – treść powiadomienia,
  • icon – grafika wyróżniająca,
  • tag – id naszego powiadomienia, które po tag’u możemy modyfikować,

Kompatybilne przeglądarki :

  • Chrome + wersja mobilna (od wersji 42),
  • Firerox + wersja mobilna (od wersji 44),
  • Opera + wersja mobilna (od wersji 29).
FacebookTwitterGoogle+LinkedIn