Zdarzenia push

Omówiliśmy już subskrypcję użytkownika i wysłanie wiadomości push. Następnym krokiem jest otrzymać tę wiadomość push na urządzenie użytkownika i wyświetlić powiadomienie co moglibyśmy robić).

Zdarzenie push

Odebranie wiadomości powoduje wysłanie zdarzenia push do skryptu service worker.

Kod do konfigurowania detektora zdarzeń push powinien być podobny do kodu każdego innego zdarzenia który możesz napisać w JavaScripcie:

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 fragmentem tego kodu dla większości programistów, którzy nie mają doświadczenia z mechanizmami service worker, jest self . Skrypt self jest powszechnie używany w skryptach service worker. self odnosi się do jak w przypadku window na stronie internetowej. Skrypty service worker self odnosi się do samej instancji roboczej.

W przykładzie powyżej dyrektywa self.addEventListener() może być traktowana jako dodanie detektora zdarzeń do skrypt service worker.

W przykładowym zdarzeniu push sprawdzamy, czy są jakieś dane, i wydrukujemy 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ść użytkowników korzysta z json() lub text(), w zależności od tego, czego oczekuje od aplikacji.

Ten przykład pokazuje, jak dodać detektor zdarzeń push i uzyskać dostęp do danych. brakuje nam dwóch ważnych funkcji. Nie wyświetla powiadomień, a poza tym nie korzysta z event.waitUntil().

Zaczekaj do

Jedną z rzeczy, które warto wiedzieć o mechanizmach Service Worker, jest to, że masz niewielką kontrolę nad tym, który będzie uruchamiany. Przeglądarka decyduje, kiedy i kiedy ma ją wybudzić ją zakończyć. To jedyne rozwiązanie, dzięki któremu możesz powiedzieć przeglądarce „Hej, jestem bardzo zajęta wykonywaniem ważnych zadań, rzeczy”, to przekazanie obietnicy do metody event.waitUntil(). Dzięki temu przeglądarka będzie utrzymuj działanie mechanizmu Service Worker, dopóki nie zostanie spełniona przekazana obietnica.

W przypadku zdarzeń push wymaga się od Ciebie wyświetlenia powiadomienia przed przekazywana przez Ciebie obietnica spełniła się.

Oto podstawowy przykład wyświetlania powiadomienia:

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

Wywoływanie self.registration.showNotification() to metoda, która wyświetla powiadomienie użytkownikom użytkownika i zwraca obietnicę, która zostanie zrealizowana po wyświetleniu powiadomienia.

Aby przykład był jak najbardziej jasny, przypisałam tę obietnicę do o nazwie promiseChain. Te dane są następnie przekazywane do funkcji event.waitUntil(). Wiem, że to jest bardzo szczegółowe, ale spotkałem się z kilkoma problemami, których kulminacją jest błędne zrozumienie, co należy przekazać do waitUntil(), lub w wyniku niezrealizowania obietnicy sieci.

Bardziej skomplikowany przykład z żądaniem sieciowym dotyczącym danych i śledzeniem zdarzenia push za pomocą statystyki mogą 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);
});

Tutaj wywołujemy funkcję, która zwraca obietnicę pushReceivedTracking(), W ramach tego przykładu możemy udawać, że wysyła żądanie sieciowe do naszego dostawcy analityki. Wysyłamy również żądanie sieciowe, pobierając odpowiedzi oraz wyświetlania powiadomienia z użyciem danych odpowiedzi treść powiadomienia.

Możemy zapewnić, że skrypt service worker pozostanie aktywny, gdy oba te zadania będą wykonywane przez połączenie te obietnice w Promise.all(). Wynikowa obietnica jest przekazywana do funkcji event.waitUntil() co oznacza, że przeglądarka czeka na spełnienie obu obietnic przed sprawdzeniem, czy powiadomienie został wyświetlony, co powoduje zakończenie działania skryptu service worker.

Dlaczego niepokoi nas usługa waitUntil() i to, jak z niej korzystać, Typowe problemy, z którymi spotykają się programiści, polegają na tym, że jeśli łańcuch obietnic jest nieprawidłowy lub uszkodzony, Chrome pokaż to "domyślne" powiadomienie:

Obraz domyślnego powiadomienia w Chrome

W Chrome wyświetli się tylko komunikat „Ta strona została zaktualizowana w tle”. powiadomienie, gdy odebrano wiadomość push, a zdarzenie push w mechanizmie service worker nie wyświetla komunikatu po zakończeniu obietnicy przekazanej event.waitUntil().

Deweloperom się to udaje, że kod często dzwoni do firmy self.registration.showNotification(), ale nie robi z obietnicą z tego tytułu. Powoduje to wyświetlanie domyślnego powiadomienia są wyświetlane. Możemy na przykład usunąć zwrot self.registration.showNotification() w powyższym przykładzie. Istnieje ryzyko, że zobaczymy coś takiego. powiadomienia.

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);
});

Dzięki temu przekonasz się, że łatwo coś przegapić.

Pamiętaj, że jeśli zobaczysz takie powiadomienie, sprawdź łańcuchy obietnic i event.waitUntil().

W następnej sekcji dowiemy się, jak dostosować styl powiadomień jakie treści możemy wyświetlać.

Co dalej

Ćwiczenia z kodowania