Ta strona została przetłumaczona przez Cloud Translation API.

Jak działa tryb push

Matt Gaunt

Zanim przejdziemy do interfejsu API, przyjrzyjmy się ogólnie działaniu push od początku do końca. Gdy później omówimy poszczególne tematy lub interfejsy API, będziesz mieć już pewną wiedzę na temat tego, jak i dlaczego są one ważne.

Aby wdrożyć powiadomienia push, musisz wykonać 3 podstawowe czynności:

Dodanie logiki po stronie klienta, aby subskrybować użytkownika do push (czyli JavaScript i interfejs użytkownika w aplikacji internetowej, który rejestruje użytkownika do odbioru wiadomości push).
Wywołanie interfejsu API z back-endu lub aplikacji, które powoduje wysłanie wiadomości push na urządzenie użytkownika.
Plik JavaScript usługi, który otrzyma zdarzenie „push event”, gdy powiadomienie push dotrze na urządzenie. W tym kodzie JavaScriptu możesz wyświetlić powiadomienie.

Przyjrzyjmy się teraz szczegółowo poszczególnym etapom.

Krok 1. Strona klienta

Pierwszym krokiem jest „subskrypcja” użytkownika do otrzymywania wiadomości push.

Aby zasubskrybować użytkownika, musisz wykonać 2 czynności. Po pierwsze, musisz uzyskać zgodę użytkownika na wysyłanie mu powiadomień push. Po drugie, PushSubscription z przeglądarki.

PushSubscription zawiera wszystkie informacje, których potrzebujemy, aby wysłać do tego użytkownika powiadomienie push. Możesz „jakoś” traktować to jak identyfikator urządzenia użytkownika.

Wszystko to jest wykonywane w JavaScript za pomocą interfejsu Push API.

Obsługa przeglądarek

Źródło

Zanim subskrybujesz użytkownika, musisz wygenerować zestaw „kluczy serwera aplikacji”, o których opowiemy później.

Klucze serwera aplikacji, czyli klucze VAPID, są unikalne dla Twojego serwera. Umożliwiają one usłudze powiadomień push wiedzieć, który serwer aplikacji subskrybuje użytkownik i sprawdzają, czy to ten sam serwer, który wysyła powiadomienia push do tego użytkownika.

Gdy użytkownik wykupi subskrypcję i uzyskasz dostęp do PushSubscription, musisz wysłać szczegóły PushSubscription do backendu lub serwera. Na serwerze zapiszesz tę subskrypcję w bazie danych i użyjesz jej do wysłania do tego użytkownika wiadomości push.

Pamiętaj, aby wysłać PushSubscription na backend.

Krok 2. Wyślij wiadomość push

Aby wysłać wiadomość push do użytkowników, musisz wywołać interfejs API usługi push. Ten wywołanie interfejsu API zawiera informacje o tym, jakie dane należy wysłać, do kogo wysłać wiadomość i jakie kryteria należy uwzględnić. Zazwyczaj to wywołanie interfejsu API jest wykonywane z serwera.

Oto kilka pytań, które możesz sobie zadać:

Kto i co jest usługą push?
Jak wygląda interfejs API? Czy jest to format JSON, XML czy inny?
Co potrafi interfejs API?

Kto i co jest usługą push?

Usługa push odbiera żądanie sieci, sprawdza je i przesyła wiadomość push do odpowiedniej przeglądarki. Jeśli przeglądarka jest offline, wiadomość jest umieszczana w kolejce do momentu, gdy przeglądarka uzyska połączenie z internetem.

Każda przeglądarka może korzystać z dowolnej usługi push, a deweloperzy nie mają nad tym kontroli. Nie stanowi to problemu, ponieważ każda usługa powiadomień push oczekuje tego samego wywołania interfejsu API. Oznacza to, że nie musisz się przejmować, kto jest usługą push. Musisz tylko upewnić się, że wywołanie interfejsu API jest prawidłowe.

Aby uzyskać odpowiedni URL do wywołania wiadomości push (czyli URL usługi push), wystarczy sprawdzić wartość endpoint w elementach PushSubscription.

Poniżej znajdziesz przykład wartości z PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

Punkt końcowy w tym przypadku to [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. Usługa przesyłania informacji w push to 'random-push-service.com', a każdy punkt końcowy jest niepowtarzalny dla danego użytkownika i oznaczony jako 'some-kind-of-unique-id-1234'. Gdy zaczniesz korzystać z push, zauważysz ten schemat.

Klucze w subskrypcji zostaną omówione później.

Jak wygląda interfejs API?

Wspomnieliśmy, że każda usługa web push oczekuje tego samego wywołania interfejsu API. Jest to protokół Web Push. Jest to standard IETF, który określa sposób wywołania interfejsu API w usłudze push.

Wywołanie interfejsu API wymaga ustawienia określonych nagłówków, a dane muszą być strumieniem bajtów. Sprawdzimy biblioteki, które mogą wykonać to wywołanie interfejsu API za nas, oraz jak zrobić to samodzielnie.

Co potrafi interfejs API?

Interfejs API umożliwia wysyłanie wiadomości do użytkownika z danymi lub bez nich oraz zawiera instrukcje jak to zrobić.

Dane wysyłane za pomocą wiadomości push muszą być zaszyfrowane. Dzieje się tak, ponieważ zapobiega to wyświetlaniu danych wysłanych w wiadomości push usługom push, które mogą należeć do dowolnej osoby. Jest to ważne, ponieważ to przeglądarka decyduje, z której usługi przesyłania informacji push ma korzystać. Może to otworzyć drzwi przeglądarkom korzystającym z usługi przesyłania informacji push, która nie jest bezpieczna.

Gdy wywołasz wiadomość push, usługa push otrzyma wywołanie interfejsu API i umieści wiadomość w kole. Wiadomość będzie oczekiwać w kolejce, dopóki urządzenie użytkownika nie połączy się z internetem i usługa powiadomień push nie będzie mogła dostarczyć wiadomości. Instrukcje, które możesz przekazać usłudze push, określają kolejność wiadomości push.

Instrukcje zawierają takie informacje jak:

Czas życia powiadomienia push. Określa, jak długo wiadomość powinna znajdować się w kolejce, zanim zostanie usunięta i nie zostanie dostarczona.
Określ pilność wiadomości. Jest to przydatne, gdy usługa push oszczędza czas pracy baterii użytkowników, wysyłając tylko wiadomości o wysokim priorytecie.
Nadaj wiadomości push nazwę „temat”, która zastąpi wszystkie oczekujące wiadomości.

Gdy serwer chce wysłać wiadomość push, wysyła żądanie protokołu web push do usługi push.

Krok 3. Wyślij zdarzenie push na urządzenie użytkownika

Po wysłaniu wiadomości push usługa push będzie przechowywać Twoją wiadomość na swoim serwerze do czasu wystąpienia jednego z tych zdarzeń:

Urządzenie łączy się z internetem, a usługa wiadomości push dostarcza wiadomość.
wygasa się. W takim przypadku usługa przesyłania powiadomień usuwa wiadomość z kolejki i nigdy nie zostanie ona dostarczona.

Gdy usługa push dostarczy wiadomość, przeglądarka ją otrzyma, odszyfruje wszystkie dane i wyśle zdarzenie push w Twoim serwisie worker.

Praca w tle to „specjalny” plik JavaScript. Przeglądarka może wykonać ten kod JavaScriptu bez otwierania strony. Może ona nawet wykonać kod JavaScript, gdy przeglądarka jest zamknięta. Skrypt service worker ma też interfejsy API, takie jak push, które nie są dostępne na stronie internetowej (czyli interfejsy API, które nie są dostępne poza skryptem service worker).

W ramach zdarzenia „push” w usługach workera możesz wykonywać zadania w tle. Możesz wykonywać wywołania funkcji analitycznych, przechowywać strony w pamięci podręcznej i wyświetlać powiadomienia.

Gdy usługa przesyła wiadomość push na urządzenie użytkownika, usługa workerowa otrzymuje zdarzenie push

To cały proces wysyłania powiadomień push.