07 / 03 / 2017 Developers

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

Jak wygląda takie powiadomienie?

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

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
  • BuKoX

    Warto dodać, że plik sw.js musi być w tym samym katalogu co skrypt – inaczej kod nie zadziała.