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