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, 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 (np. JavaScript i interfejs użytkownika w aplikacji internetowej, który rejestruje użytkownika do 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. To właśnie w tym języku możesz wyświetlać powiadomienia.
Przyjrzyjmy się teraz szczegółowo poszczególnym etapom.
Krok 1. Po stronie klienta
Pierwszym krokiem jest „subskrypcja” użytkownika do otrzymywania wiadomości push.
Subskrybowanie użytkownika wymaga 2 czynności. Po pierwsze, musisz uzyskać zgodę użytkownika na wysyłanie mu powiadomień push. Po drugie, PushSubscription
z przeglądarki.
Pole PushSubscription
zawiera wszystkie informacje potrzebne do wysłania do użytkownika wiadomości push.
Możesz „jakoś” traktować to jak identyfikator urządzenia użytkownika.
Wszystko to robi się w języku JavaScript za pomocą interfejsu Push API.
Przed zasubskrybowaniem użytkownika musisz wygenerować zestaw kluczy serwera aplikacji, który omówimy 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 upewnić się, że to ten sam serwer uruchamia powiadomienia push dla 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.
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łby 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?
- Do czego służy 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, nad którą programiści nie mają kontroli. Nie stanowi to problemu, ponieważ każda usługa powiadomień push oczekuje tego samego wywołania interfejsu API. Oznacza to, że nie musisz wiedzieć, kim jest usługa 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'. Zaczynając pracę nad wypychaniem, zauważysz ten wzorzec.
Klucze w abonamentach zostaną omówione później.
Jak wygląda interfejs API?
Pamiętaj, że każda usługa web push wymaga 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.
Do czego służy 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 w ramach wiadomości push muszą być zaszyfrowane. Dzieje się tak, ponieważ usługi push, które mogą być dowolnymi osobami, nie mogą wyświetlać danych wysyłanych w wiadomościach push. 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 kolejce. Ta wiadomość pozostanie w kolejce, dopóki urządzenie użytkownika nie przejdzie w tryb online, a usługa 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 powiadomień push oszczędza czas pracy na 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.
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 przechodzi w tryb online, a usługa push dostarcza komunikat.
- Wygasa ona. W takim przypadku usługa push usuwa wiadomość ze swojej kolejki i nigdy nie jest dostarczana.
Gdy usługa push dostarczy wiadomość, przeglądarka ją otrzyma, odszyfruje wszelkie dane i wyśle zdarzenie push
w skrypcie service 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 (np.push), które są niedostępne na stronie internetowej (tzn. interfejsy API, które są niedostępne w skrypcie skryptu service worker).
Znajduje się w ramach zdarzenia „push” instancji usługi, które pozwala wykonywać dowolne zadania w tle. Możesz wykonywać wywołania funkcji analitycznych, przechowywać strony w pamięci podręcznej i wyświetlać powiadomienia.
Tak wygląda cała procedura w przypadku komunikatów push.
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 dotyczące powiadomień push
- Typowe problemy i zgłaszanie błędów