Do tej pory omawialiśmy subskrypcję użytkownika i wysyłanie powiadomienia push. Następnym krokiem jest odebranie tego komunikatu push na urządzeniu użytkownika i wyświetlenie powiadomienia (oraz wykonanie innych czynności).
Zdarzenie Push
Po otrzymaniu wiadomości w Twoim serwisie zostanie wysłane zdarzenie push.
Kod służący do konfigurowania detektora zdarzeń push powinien być podobny do każdego innego detektora zdarzeń napisanego w JavaScript:
self.addEventListener('push', function(event) {
if (event.data) {
console.log('This push event has data: ', event.data.text());
} else {
console.log('This push event has no data.');
}
});
Najdziwniejszym elementem tego kodu dla większości deweloperów, którzy dopiero zaczynają korzystać z usług działających w tle, jest zmienna self
. Język self
jest powszechnie używany w skryptach service worker. self
odnosi się do zakresu globalnego, który w rodzaju window
na stronie internetowej. W przypadku skryptów web worker i service worker element self
odnosi się do samego workera.
W przykładzie powyżej element self.addEventListener()
można traktować jako dodanie odbiornika zdarzeń do samego serwisowego workera.
W przykładzie zdarzenia push sprawdzamy, czy są jakieś dane, i wyświetlamy coś w konsoli.
Dane ze zdarzenia push można analizować na inne sposoby:
// Returns string
event.data.text()
// Parses data as JSON string and returns an Object
event.data.json()
// Returns blob of data
event.data.blob()
// Returns an arrayBuffer
event.data.arrayBuffer()
Większość osób używa json()
lub text()
w zależności od tego, czego oczekuje od aplikacji.
Ten przykład pokazuje, jak dodać odbiornik powiadomień push i jak uzyskać dostęp do danych, ale brakuje w nim 2 bardzo ważnych funkcji. Nie wyświetla powiadomienia i nie korzysta z elementu event.waitUntil()
.
Zaczekaj do
Jedną z rzeczy, które warto wiedzieć o mechanizmach Service Worker, jest to, że masz niewielką kontrolę nad tym, kiedy będzie uruchamiany ich kod. Przeglądarka decyduje, kiedy ją aktywować i kiedy zakończyć. Jedynym sposobem, w jaki możesz poinformować przeglądarkę, że jestem zajęta do ważnych spraw, jest przekazanie do metody event.waitUntil()
obietnic. W tym przypadku przeglądarka będzie utrzymywać usługę w stanie działania, dopóki przekazana obietnica nie zostanie spełniona.
W przypadku zdarzeń push istnieje dodatkowy wymóg, aby wyświetlać powiadomienie, zanim przekazana obietnica zostanie zrealizowana.
Oto podstawowy przykład wyświetlania powiadomienia:
self.addEventListener('push', function(event) {
const promiseChain = self.registration.showNotification('Hello, World.');
event.waitUntil(promiseChain);
});
Wywołanie self.registration.showNotification()
to metoda, która wyświetla powiadomienie użytkownikowi, i zwraca obietnicę, która zostanie spełniona po wyświetleniu powiadomienia.
Aby przykład był jak najbardziej przejrzysty, przypisałem to obietnice do zmiennej o nazwie promiseChain
. Następnie jest przekazywany do event.waitUntil()
. Wiem, że to jest bardzo obszerne, ale widzieliśmy już wiele problemów, które wynikały z nieporozumienia tego, co powinno być przekazane do waitUntil()
, lub z niespełnienia obietnic.
Bardziej skomplikowany przykład z żądaniem sieciowym dotyczącym danych i śledzeniem zdarzenia push za pomocą analityki może wyglądać tak:
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
return self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
W tym przykładzie wywołujemy funkcję, która zwraca obietnicę pushReceivedTracking()
. Dla celów przykładu możemy założyć, że żądanie sieci zostanie wysłane do naszego dostawcy usług analitycznych. Wysyłamy również żądanie sieciowe, otrzymujemy odpowiedź i wyświetlamy powiadomienie, wykorzystując dane odpowiedzi dla tytułu i przekazu powiadomienia.
Możemy zapewnić, aby usługa workera była aktywna podczas wykonywania obu tych zadań, łącząc te obietnice z Promise.all()
. Wynik obietnicy jest przekazywany do event.waitUntil()
, co oznacza, że przeglądarka będzie czekać, aż obie obietnice się zakończą, zanim sprawdzi, czy powiadomienie zostało wyświetlone, i zakończy działanie service workera.
Powinniśmy się przejmować waitUntil()
i tym, jak go używać, ponieważ jednym z najczęstszych problemów, z którymi borykają się deweloperzy, jest to, że gdy łańcuch obietnic jest nieprawidłowy lub uszkodzony, Chrome wyświetla to „domyślne” powiadomienie:
Chrome wyświetli powiadomienie „Ta strona została zaktualizowana w tle” tylko wtedy, gdy otrzyma wiadomość push, a zdarzenie push w obsługiwanym przez usługę workerze nie wyświetli powiadomienia po zakończeniu obietnicy przekazanej do event.waitUntil()
.
Głównym powodem, dla którego deweloperzy wpadają w tę pułapkę, jest to, że ich kod często wywołuje funkcję self.registration.showNotification()
, ale nic nie robi z obietnicą zwracaną przez tę funkcję. Może to powodować sporadyczne wyświetlanie powiadomienia domyślnego. Moglibyśmy na przykład usunąć zwrot związany z usługą self.registration.showNotification()
w powyższym przykładzie. Pojawia się wtedy ryzyko, że zobaczymy to powiadomienie.
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
Jak widać, łatwo to przeoczyć.
Jeśli zobaczysz to powiadomienie, sprawdź łańcuchy obietnic i event.waitUntil()
.
W następnej sekcji omówimy, jak stylizować powiadomienia i jakie treści można wyświetlać.
Co dalej
- Omówienie powiadomień push w przeglądarce
- Jak działają powiadomienia push
- Subskrybowanie użytkownika
- UX dotyczący uprawnień
- Wysyłanie wiadomości za pomocą bibliotek Web Push
- Protokół Web Push
- Obsługa zdarzeń push
- Wyświetlanie powiadomienia
- Zachowanie powiadomienia
- Typowe wzorce powiadomień
- Najczęstsze pytania na temat powiadomień push
- Typowe problemy i zgłaszanie błędów