Jak działa tryb push

Matt Gaunt

Zanim przejdziemy do interfejsu API, przyjrzyjmy się powiadomieniom push od początku do końca. Następnie, gdy będziemy omawiać poszczególne tematy lub interfejsy API, będziesz wiedzieć, jak i dlaczego są one ważne.

3 główne kroki do wdrożenia powiadomień push:

1. Dodanie logiki po stronie klienta, która umożliwia subskrybowanie powiadomień push przez użytkownika (czyli kodu JavaScript i interfejsu w aplikacji internetowej, które rejestrują użytkownika do otrzymywania powiadomień push).
2. Wywołanie interfejsu API z backendu lub aplikacji, które powoduje wysłanie wiadomości push na urządzenie użytkownika.
3. Plik JavaScript skryptu service worker, który otrzyma „zdarzenie push”, gdy powiadomienie push dotrze na urządzenie. W tym kodzie JavaScript możesz wyświetlić powiadomienie.

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

Krok 1. Po stronie klienta

Pierwszym krokiem jest „zasubskrybowanie” przez użytkownika wiadomości push.

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

PushSubscription zawiera wszystkie informacje, których potrzebujemy, aby wysłać wiadomość push do tego użytkownika. Można go traktować jako identyfikator urządzenia użytkownika.

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

Browser Support

• 42
• 17
• 44
• 16

Source

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

Klucze serwera aplikacji, znane też jako klucze VAPID, są unikalne dla Twojego serwera. Dzięki nim usługa push wie, który serwer aplikacji zasubskrybował użytkownik, i może mieć pewność, że to ten sam serwer, który wysyła wiadomości push do tego użytkownika.

Gdy użytkownik zasubskrybuje i będziesz mieć 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 wiadomości push do tego użytkownika.

Krok 2. Wyślij wiadomość push

Jeśli chcesz wysłać wiadomość push do użytkowników, musisz wywołać interfejs API usługi push. To wywołanie interfejsu API zawiera informacje o tym, jakie dane mają zostać wysłane, do kogo ma zostać wysłana wiadomość i jakie są kryteria wysyłania wiadomości. Zwykle to wywołanie interfejsu API jest wykonywane z serwera.

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

• Kto i co jest usługą push?
• Jak wygląda interfejs API? Czy jest to JSON, XML czy coś innego?
• Co umożliwia interfejs API?

Kto i co jest usługą push?

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

Każda przeglądarka może korzystać z dowolnej usługi push, na co deweloperzy nie mają wpływu. Nie stanowi to problemu, ponieważ każda usługa push oczekuje tego samego wywołania interfejsu API. Oznacza to, że nie musisz się martwić o to, jaka usługa push jest używana. Musisz tylko upewnić się, że wywołanie interfejsu API jest prawidłowe.

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

Poniżej znajdziesz przykład wartości, które otrzymasz z PushSubscription:

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

W tym przypadku punktem końcowym jest https://random-push-service.com/some-kind-of-unique-id-1234/v2/. Usługa push to „random-push-service.com”, a każdy punkt końcowy jest unikalny dla użytkownika i oznaczony jako „some-kind-of-unique-id-1234”. Gdy zaczniesz pracować z powiadomieniami push, zauważysz ten wzorzec.

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

Jak wygląda interfejs API?

Wspomniałem, że każda usługa powiadomień push w internecie oczekuje tego samego wywołania interfejsu API. Ten interfejs API to Web Push Protocol. Jest to standard IETF, który określa, jak wykonać wywołanie interfejsu API do usługi push.

Wywołanie interfejsu API wymaga ustawienia określonych nagłówków i danych w postaci strumienia bajtów. Przyjrzymy się bibliotekom, które mogą wykonać to wywołanie interfejsu API za nas, a także dowiemy się, jak zrobić to samodzielnie.

Co umożliwia interfejs API?

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

Dane wysyłane w wiadomości push muszą być zaszyfrowane. Dzięki temu usługi push, które mogą być dowolnymi usługami, nie mogą wyświetlać danych wysyłanych w wiadomości push. Jest to ważne, ponieważ to przeglądarka decyduje, której usługi push użyć, co może otworzyć drzwi do przeglądarek korzystających z usługi 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 połączy się z internetem, a usługa push nie będzie mogła dostarczyć wiadomości. Instrukcje, które możesz przekazać usłudze push, określają, jak wiadomość push jest umieszczana w kolejce.

Instrukcje zawierają takie informacje jak:

• Czas życia wiadomości push. Określa, jak długo wiadomość powinna być w kolejce, zanim zostanie usunięta i nie zostanie dostarczona.

• Określ, jak pilna jest wiadomość. Jest to przydatne, gdy usługa push oszczędza baterię użytkownika, dostarczając tylko wiadomości o wysokim priorytecie.

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

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

Po wysłaniu wiadomości push usługa push będzie przechowywać ją na swoim serwerze, dopóki nie wystąpi jedno z tych zdarzeń:

1. Urządzenie przechodzi w tryb online, a usługa push dostarcza wiadomość.
2. Wiadomość wygaśnie. W takim przypadku usługa push usuwa wiadomość z kolejki i nie zostanie ona dostarczona.

Gdy usługa push dostarczy wiadomość, przeglądarka ją odbierze, odszyfruje dane i wyśle zdarzenie push do skryptu service worker.

Skrypt service worker to „specjalny” plik JavaScript. Przeglądarka może wykonywać ten kod JavaScript, nawet gdy Twoja strona nie jest otwarta. Może nawet wykonywać ten 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” skryptu service worker możesz wykonywać dowolne zadania w tle. Możesz wykonywać wywołania analityczne, zapisywać strony w pamięci podręcznej offline i wyświetlać powiadomienia.

To cały proces wysyłania wiadomości push.

Co dalej

• Internetowe powiadomienia push – omówienie
• Jak działa Push
• Subskrybowanie użytkownika
• Interfejs uprawnień
• Wysyłanie wiadomości za pomocą bibliotek Web Push
• Protokół Web Push
• Obsługa zdarzeń push
• Wyświetlanie powiadomienia
• Zachowanie powiadomień
• Typowe wzorce powiadomień
• Najczęstsze pytania dotyczące powiadomień push
• Typowe problemy i zgłaszanie błędów

Ćwiczenia w Codelabs

• Tworzenie klienta powiadomień push
• Tworzenie serwera powiadomień push