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

Jak działa tryb push

Matt Gaunt

Zanim zacznę korzystać z interfejsu API, przyjrzyjmy się ogólnikom, od początku do końca. Gdy potem omówimy poszczególne tematy lub interfejsy API, będziesz mieć wyobrażenie o tym, jak i dlaczego jest to takie ważne.

3 kluczowe etapy wdrażania trybu push to:

Dodanie logiki po stronie klienta w celu zasubskrybowania treści push przez użytkownika (np. kod JavaScript i interfejs w aplikacji internetowej, które rejestrują użytkownika w celu przesłania komunikatów push).
Wywołanie interfejsu API z Twojego backendu lub aplikacji, które wywołuje wiadomość push na urządzeniu użytkownika.
Plik JavaScript skryptu service worker, który otrzyma „zdarzenie push”, gdy pojawi się na urządzeniu. To właśnie kod JavaScript umożliwia wyświetlenie powiadomienia.

Przyjrzyjmy się bliżej każdemu z tych kroków.

Krok 1. Po stronie klienta

Pierwszym krokiem jest „zasubskrybowanie” użytkownika w celu przekazania do niego wiadomości.

Subskrybowanie użytkownika wymaga 2 rzeczy. Po pierwsze uzyskanie od użytkownika zgody na wysyłanie mu wiadomości push. Po drugie, pobierz PushSubscription z przeglądarki.

Element PushSubscription zawiera wszystkie informacje potrzebne do wysłania wiadomości push do danego użytkownika. Można to traktować jako identyfikator urządzenia użytkownika.

Wszystko to możesz wykonywać w JavaScript za pomocą interfejsu Push API.

Obsługa przeglądarek

Źródło

Zanim zasubskrybujesz użytkownika, musisz wygenerować zestaw „kluczy serwera aplikacji”, które omówimy później.

Klucze serwera aplikacji, nazywane też kluczami VAPID, są unikalne dla serwera. Zapewniają usłudze push, który serwer aplikacji zasubskrybował użytkownika i upewnia się, że to ten sam serwer, który wysyła wiadomości push do użytkownika.

Gdy zasubskrybujesz konto użytkownika i uzyskasz PushSubscription, musisz wysłać szczegóły PushSubscription do swojego backendu / serwera. Zapiszesz tę subskrypcję na serwerze w bazie danych i użyjesz jej do wysłania wiadomości push do danego użytkownika.

Pamiętaj, aby wysłać PushSubscription do backendu.

Krok 2. Wyślij wiadomość push

Aby wysłać wiadomość push do użytkowników, musisz wywołać interfejs API w usłudze push. Obejmuje ono dane do wysłania, do kogo ma być wysłana wiadomość oraz wszelkie kryteria dotyczące sposobu jej wysłania. Normalnie to wywołanie interfejsu API jest wykonywane z Twojego serwera.

Oto niektóre pytania, które możesz sobie zadać:

Kto i co to jest usługa push?
Jak wygląda interfejs API? Czy to kod JSON, XML, czy coś innego?
Do czego służy interfejs API?

Kto i co to jest usługa push?

Usługa push odbiera żądanie sieciowe, weryfikuje je i dostarcza komunikat push do odpowiedniej przeglądarki. Jeśli przeglądarka jest w trybie offline, wiadomość zostanie umieszczona w kolejce, dopóki przeglądarka nie przejdzie w tryb online.

Każda przeglądarka może używać dowolnej usługi push, nad czym programiści nie mają kontroli. Nie jest to problem, ponieważ każda usługa push wymaga tego samego wywołania interfejsu API. Oznacza to, że nie musisz martwić się, kto jest usługą push. Musisz tylko sprawdzić, czy wywołanie interfejsu API jest prawidłowe.

Aby uzyskać odpowiedni adres URL aktywujący wiadomość push (tj. adres URL usługi push), wystarczy spojrzeć na wartość endpoint w elemencie PushSubscription.

Poniżej znajdziesz przykładowe wartości dostępne w ramach funkcji 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 push miałaby postać „random-push-service.com”, a każdy punkt końcowy jest unikalny dla użytkownika i jest oznaczony unikalnym identyfikatorem-1234. Gdy zaczniesz pracować z trybem push, zauważysz ten wzorzec.

Klucze dostępne w ramach subskrypcji zostaną omówione później.

Jak wygląda interfejs API?

Wspominałem, że każda usługa Web push wymaga tego samego wywołania interfejsu API. Ten interfejs API to protokół Web Push Protocol. Jest to standard IETF określający 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. Przyjrzymy się bibliotekom, które mogą wykonywać takie wywołania interfejsu API, oraz przyjrzymy się temu, jak robią to sami.

Do czego służy interfejs API?

Interfejs API umożliwia wysłanie wiadomości do użytkownika z danymi lub bez nich oraz udostępnia instrukcje, jak wysłać wiadomość.

Dane wysyłane w wiadomości push muszą być zaszyfrowane. Dzieje się tak, ponieważ usługi push, które mogą być dowolne, nie mogą wyświetlać danych wysłanych z wiadomością push. Jest to ważne, ponieważ to przeglądarka decyduje, której usługi push należy użyć, co może zwiększyć dostęp przeglądarek do niezabezpieczonej usługi push.

Gdy aktywujesz 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 połączy się z siecią, a usługa push będzie mogła dostarczyć wiadomości. Instrukcje, które możesz przekazać usłudze push, określają sposób umieszczania wiadomości push w kolejce.

Instrukcje zawierają takie informacje jak:

Czas życia wiadomości push. Określa, jak długo wiadomość ma być umieszczona w kolejce, zanim zostanie usunięta i nie dostarczona.
Zdefiniuj pilność wiadomości. Jest to przydatne, gdy usługa push pomaga użytkownikom oszczędzać baterię, ponieważ dostarcza tylko komunikaty o wysokim priorytecie.
Nadaj wiadomości push nazwę „tematu”, która zastąpi wszelkie oczekujące wiadomości tą nową wiadomością.

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

Krok 3. Zdarzenie push na urządzeniu użytkownika

Po wysłaniu wiadomości push usługa będzie przechowywać ją na serwerze do momentu wystąpienia jednego z następujących zdarzeń:

Urządzenie jest online, a usługa push dostarcza wiadomość.
Wiadomość wygaśnie. W takim przypadku usługa push usuwa wiadomość ze swojej kolejki i nigdy nie jest dostarczana.

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

Skrypt service worker to „specjalny” plik JavaScript. Przeglądarka może wykonać ten JavaScript bez otwierania strony. Może nawet wykonać ten kod JavaScript, gdy przeglądarka jest zamknięta. Skrypt service worker posiada 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 skryptu service worker).

To zdarzenie „push” skryptu service worker pozwala wykonywać dowolne zadania w tle. Możesz wykonywać połączenia analityczne, zapisywać strony w pamięci podręcznej offline i wyświetlać powiadomienia.

Gdy usługa push jest wysyłana z usługi push na urządzenie użytkownika, skrypt service worker otrzymuje zdarzenie push

To jest cała procedura przekazywania wiadomości push.