Powiadomienia push na stronie

Powiadomienia Web Push to klikalne komunikaty, które pojawiają się na ekranie urządzenia. 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.

Powiadomienia push na stronie – 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.

Na przykładzie przeglądarki Google Chrome pokażę jak zmienić te ustawienia: przechodzimy do ustawień przeglądarki, klikamy na samym dole „pokaż ustawienia zaawansowane”, w sekcji prywatność wybieramy „ustawienia treści” i szukamy powiadomień.

Teraz możemy wyłączyć opcję ich otrzymywania.

Push notyfikacje – jak wyglądają?

Zapewne każdy z nas spotkał się już z powiadomieniami w popularnych serwisach internetowych.

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

• tytuł,
• treść,
• grafika,
• link do 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 push na stronie?

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