Jak działa tryb push

Zanim przejdziemy do interfejsu API, przyjrzyjmy się przekazywaniu od początku do końca. Następnie, jak omówię poszczególne tematy lub interfejsy API, zorientujesz się, są ważne.

Trzy kluczowe etapy wdrażania trybu push:

  1. dodanie elementów logicznych po stronie klienta, które zasubskrybują treści przekazywane przez użytkownika (tj. JavaScript i interfejs aplikacji internetowej rejestrującej użytkownika w trybie push).
  2. Wywołanie interfejsu API z backendu lub aplikacji, które aktywuje komunikat push na urządzenie użytkownika.
  3. Plik JavaScript skryptu service worker, który otrzyma „zdarzenie push” gdy pojawi się komunikat urządzenia. To właśnie w tym języku możesz wyświetlać powiadomienia.

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

Krok 1. Po stronie klienta

Pierwszy krok to zasubskrybowanie użytkownika do wysyłania wiadomości.

Subskrybowanie użytkownika wymaga 2 czynności. Najpierw trzeba uzyskać od użytkownika zgodę na wysyłanie wiadomości. wiadomości push. Po drugie: PushSubscription z przeglądarki.

Pole PushSubscription zawiera wszystkie informacje potrzebne do wysłania do użytkownika wiadomości push. Możesz tego rodzaju Traktuj go jako identyfikator urządzenia danego użytkownika.

Wszystko to robi się w języku JavaScript za pomocą interfejsu Push API.

Obsługa przeglądarek

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

Źródło

Przed zasubskrybowaniem użytkownika musisz wygenerować „klucze serwera aplikacji”, które omówimy później.

Klucze serwera aplikacji, nazywane też kluczami VAPID, są unikalne dla Twojego serwera. Umożliwiają usługi push, aby określić, który serwer aplikacji zasubskrybował użytkownika, i upewnić się, że jest on taki sam i wysyłanie wiadomości push do tego użytkownika.

Po zasubskrybowaniu użytkownika i uzyskaniu PushSubscription konieczne będzie wysłanie Szczegóły PushSubscription do backendu / serwera. Zapiszesz je na swoim serwerze do bazy danych i używać jej do wysyłania wiadomości push do tego użytkownika.

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

Krok 2. Wyślij wiadomość push

Jeśli chcesz wysłać wiadomość push do użytkowników, musisz wywołać interfejs API do tej metody. posprzedażna. To wywołanie interfejsu API zawierało informacje o tym, jakie dane należy wysłać, do kogo ma zostać wysłana wiadomość i które kryteria dotyczące sposobu wysłania wiadomości. Normalnie to wywołanie interfejsu API jest wykonywane z Twojego serwera.

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

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

Kto i czym jest usługa push?

Usługa push odbiera żądanie sieciowe, weryfikuje je i dostarcza komunikat push do odpowiedniej przeglądarki. Jeśli przeglądarka działa w trybie offline, wiadomość zostanie umieszczona w kolejce do czasu przejścia w tryb online.

Każda przeglądarka może korzystać z dowolnej usługi push – programiści nie mają nad tym kontroli ponad. To nie jest problem, ponieważ każda usługa push oczekuje tego samego wywołania interfejsu API. Znaczenie nie musisz wiedzieć, kim jest usługa push. Trzeba tylko upewnić się, że wywołanie interfejsu API jest prawidłowy.

Aby uzyskać odpowiedni adres URL wywołujący komunikat push (tj. adres URL usługi push), wystarczy zwrócić uwagę na wartość endpoint w PushSubscription.

Poniżej znajdują się przykładowe wartości, jakie otrzymasz dzięki subskrypcji 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 będzie „random-push-service.com” a każdy punkt końcowy jest unikalny dla użytkownika – oznaczany parametrem 'some-kind-of-unique-id-1234'. Zaczynając pracę nad wypychaniem, zauważysz ten wzorzec.

Klucze w ramach subskrypcji 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. Ten interfejs API jest Protokół Web Push Protocol. Jest to standard IETF, który określa sposób wykonywania wywołań interfejsu API do usługi push.

Wywołanie interfejsu API wymaga ustawienia określonych nagłówków i danych w postaci strumienia bajtów. Na znajdziesz biblioteki, które mogą wykonać to wywołanie interfejsu API, a także jak zrobić to samodzielnie.

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 dowiedz się, jak wysłać tę wiadomość.

Dane wysyłane w wiadomości push muszą być zaszyfrowane. Powodem jest to, uniemożliwia usługom push, które mogą być dowolne, wyświetlanie danych wysyłanych za pomocą komunikat push. Jest to ważne, ponieważ to przeglądarka decyduje, która usługa push które mogą uzyskać dostęp do przeglądarek za pomocą niebezpiecznej usługi push.

Gdy aktywujesz komunikat push, usługa push otrzyma wywołanie interfejsu API i zakolejkę . Ta wiadomość pozostanie w kolejce, dopóki urządzenie użytkownika nie przejdzie w tryb online i nie otrzyma wiadomości push może dostarczać wiadomości. Instrukcje, które możesz przekazać usłudze push, określają, wiadomość push znajduje się w kolejce.

Instrukcje obejmują m.in.:

  • Czas życia wiadomości push. Określa, jak długo wiadomość ma być umieszczona w kolejce jest usuwana i nie jest dostarczana.

  • Określ pilność przekazu. Jest to przydatne, gdy usługa push zachowuje żywotności baterii przez dostarczanie tylko wiadomości o wysokim priorytecie.

  • Nadaj wiadomości push „temat” która zastąpi każdą oczekującą wiadomość nową.

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

Krok 3. Przekaż zdarzenie na urządzenie użytkownika

Po wysłaniu wiadomości push usługa przechowuje wiadomość na serwerze do czasu zachodzi jedno z tych zdarzeń:

  1. Urządzenie przechodzi w tryb online, a usługa push dostarcza komunikat.
  2. Wiadomość wygaśnie. W takim przypadku usługa push usuwa wiadomość ze swojej kolejki nigdy nie zostaną dostarczone.

Gdy usługa push dostarczy wiadomość, przeglądarka ją otrzyma, a następnie odszyfruje wszelkie i wysyłanie zdarzenia push w mechanizmie Service Worker.

Skrypt service worker to „specjalne” JavaScript. Przeglądarka może wykonać ten kod JavaScript bez konieczności otwartego. Może nawet wykonywać ten kod JavaScript po zamknięciu przeglądarki. Skrypt service worker ma też Interfejsy API (np.push), które są niedostępne na stronie internetowej (tj. interfejsy API, które są niedostępne skryptu service worker).

Znajduje się on w elemencie „push” mechanizmu Service Worker i wykonywanie zadań w tle. Ty mogą nawiązywać połączenia analityczne, zapisywać strony w pamięci podręcznej offline i wyświetlać powiadomienia.

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

Tak wygląda cała procedura w przypadku komunikatów push.

Co dalej

Ćwiczenia z kodowania