Jak działa tryb push

Zanim przejdziemy do interfejsu API, przyjrzyjmy się powiadomieniom push z ogólnej perspektywy, od początku do końca. Dzięki temu, gdy będziemy później omawiać poszczególne tematy lub interfejsy API, będziesz mieć pojęcie, jak i dlaczego są one ważne.

Aby wdrożyć powiadomienia push, musisz wykonać 3 główne kroki:

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óry rejestruje użytkownika do otrzymywania powiadomień push).
2. Wywołanie interfejsu API z backendu lub aplikacji, które powoduje wysłanie powiadomienia 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ę bliżej, co obejmuje każdy z tych kroków.

Krok 1. Po stronie klienta

Pierwszym krokiem jest „zasubskrybowanie” użytkownika do otrzymywania powiadomień 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, musisz uzyskać od przeglądarki obiekt PushSubscription.

Obiekt PushSubscription zawiera wszystkie informacje potrzebne do wysłania powiadomienia push do tego użytkownika. Możesz go traktować jako identyfikator urządzenia użytkownika.

Wszystko to odbywa się w JavaScript przy użyciu interfejsu Push API.

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

Klucze serwera aplikacji, znane też jako klucze VAPID, są unikalne dla Twojego serwera. Umożliwiają one usłudze push określenie, który serwer aplikacji zasubskrybował użytkownika, i upewnienie się, że to ten sam serwer wysyła do niego powiadomienia push.

Gdy zasubskrybujesz użytkownika i uzyskasz obiekt PushSubscription, musisz wysłać szczegóły tego obiektu PushSubscription do backendu lub serwera. Na serwerze zapiszesz tę subskrypcję w bazie danych i użyjesz jej do wysłania powiadomienia push do tego użytkownika.

Krok 2. Wysyłanie powiadomienia push

Gdy chcesz wysłać powiadomienie push do użytkowników, musisz wywołać interfejs API usługi push. To wywołanie interfejsu API będzie zawierać informacje o tym, jakie dane wysłać, do kogo wysłać wiadomość i jakie kryteria dotyczące sposobu wysyłania wiadomości. Zwykle to wywołanie interfejsu API jest wykonywane z serwera.

Możesz sobie zadać te pytania:

• Kim i czym jest usługa push?
• Jak wygląda interfejs API? Czy jest to JSON, XML czy coś innego?
• Co może robić interfejs API?

Kim i czym jest usługa push?

Usługa push odbiera żądanie sieciowe, weryfikuje je i dostarcza powiadomienie push do odpowiedniej przeglądarki. Jeśli przeglądarka jest offline, wiadomość jest umieszczana w kolejce do czasu, aż przeglądarka będzie online.

Każda przeglądarka może korzystać z dowolnej usługi push. Deweloperzy nie mają nad tym kontroli. Nie stanowi to problemu, ponieważ każda usługa push oczekuje tego samego wywołania interfejsu API. Oznacza to, że nie musisz się martwić, która 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 powiadomienia push (czyli adres URL usługi push), wystarczy sprawdzić wartość endpoint w obiekcie PushSubscription.

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

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

W tym przypadku punkt końcowy to 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 korzystać z powiadomień push, zauważysz ten wzorzec.

Klucze w subskrypcji omówimy 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 wywołać interfejs API usługi 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ą wykonać to wywołanie interfejsu API za nas, a także sposobom samodzielnego wykonania tego wywołania.

Co może robić interfejs API?

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

Dane wysyłane z powiadomieniem push muszą być zaszyfrowane. Dzięki temu usługi push, które mogą być dowolne, nie będą mogły wyświetlać danych wysyłanych z powiadomieniem 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 powiadomienie push, usługa push otrzyma wywołanie interfejsu API i umieści wiadomość w kolejce. Ta wiadomość pozostanie w kolejce do czasu, aż urządzenie użytkownika będzie online, a usługa push będzie mogła dostarczyć wiadomości. Instrukcje, które możesz przekazać usłudze push, określają, jak powiadomienie push jest umieszczane w kolejce.

Instrukcje zawierają takie informacje jak:

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

• Określenie pilności wiadomości. Jest to przydatne, jeśli usługa push oszczędza baterię użytkowników, dostarczając tylko wiadomości o wysokim priorytecie.

• Nadanie powiadomieniu push nazwy „tematu”, która zastąpi wszystkie oczekujące wiadomości tą nową wiadomością.

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

Gdy wyślemy powiadomienie push, usługa push będzie przechowywać wiadomość na swoim serwerze do czasu, aż nastąpi jedno z tych zdarzeń:

1. Urządzenie będzie online, a usługa push dostarczy wiadomość.
2. Wiadomość wygaśnie. W takim przypadku usługa push usunie wiadomość z kolejki i nigdy nie zostanie ona dostarczona.

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

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

W zdarzeniu „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 powiadomień push.

Co dalej

• Omówienie powiadomień push w internecie
• Jak działają powiadomienia push
• Subskrybowanie użytkownika
• UX uprawnień
• Wysyłanie wiadomości za pomocą bibliotek powiadomień push w internecie
• Web Push Protocol
• 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