Omówienie powiadomień push

Podstawowe informacje o tym, czym są powiadomienia push, dlaczego warto ich używać i jak działają.

Kayce Basques

Czym są powiadomienia push?

Powiadomienia push umożliwiają przekazywanie informacji użytkownikom nawet wtedy, gdy nie korzystają oni z Twojej witryny. Nazwa push oznacza, że możesz „przesyłać” informacje do użytkowników, nawet gdy nie są aktywni. Aby lepiej zrozumieć tę koncepcję, porównaj technologię push z technologią pull.

Powiadomienia zawierają niewielkie porcje informacji. Witryny mogą używać powiadomień, aby informować użytkowników o ważnych wydarzeniach lub działaniach, które muszą wykonać. Wygląd i działanie powiadomień różni się w zależności od platformy:

Przykłady powiadomień na macOS i Androidzie
Przykłady powiadomień na urządzeniach z macOS i Androidem.

Powiadomienia push i powiadomienia to 2 oddzielne, ale uzupełniające się technologie. Push to technologia wysyłania wiadomości z Twojego serwera do użytkowników, nawet jeśli nie korzystają oni aktywnie z Twojej witryny. Powiadomienia to technologia wyświetlania informacji przesyłanych na urządzenie użytkownika. Możesz korzystać z powiadomień bez wysyłania komunikatów push. Pewnego dnia może być też możliwe używanie wiadomości push bez powiadomień widocznych dla użytkowników (ciche powiadomienia push), ale obecnie przeglądarki na to nie zezwalają. W praktyce są one zwykle używane razem. Użytkownik nietechniczny prawdopodobnie nie zrozumie różnicy między wiadomościami push a powiadomieniami. W tej kolekcji, gdy mówimy o powiadomieniach push, mamy na myśli połączenie wysłania wiadomości z jej wyświetleniem jako powiadomienia. Termin wiadomości push odnosi się do samej technologii push. Gdy mówimy o powiadomieniach, mamy na myśli samą technologię powiadomień.

Dlaczego warto korzystać z powiadomień push?

  • Powiadomienia push to dla użytkowników sposób na otrzymywanie aktualnych, istotnych i dokładnych informacji.
  • Dla Ciebie (właściciela witryny) powiadomienia push to sposób na zwiększenie zaangażowania użytkowników.

Jak działają powiadomienia push?

Ogólnie rzecz biorąc, najważniejsze kroki do wdrożenia powiadomień push to:

  1. Dodanie logiki klienta, która prosi użytkownika o pozwolenie na wysyłanie powiadomień push, a potem wysyła informacje o identyfikatorze klienta na serwer do przechowywania w bazie danych.
  2. Dodawanie logiki serwera do wiadomości push na urządzeniach klienckich.
  3. Dodawanie logiki klienta do odbierania wiadomości wysłanych na urządzenie i wyświetlania ich jako powiadomień.

W dalszej części tej strony znajdziesz bardziej szczegółowe informacje o tych czynnościach.

Uzyskiwanie uprawnień do wysyłania powiadomień push

Po pierwsze, Twoja witryna musi uzyskać zgodę użytkownika na wysyłanie powiadomień push. Powinna być wywoływana przez użytkownika, np. przez kliknięcie przycisku Tak obok prompta Do you want to receive push notifications?. Następnie zadzwoń pod numer Notification.requestPermission(). System operacyjny lub przeglądarka na urządzeniu użytkownika prawdopodobnie wyświetli jakiś interfejs, aby formalnie potwierdzić, że użytkownik chce otrzymywać powiadomienia push. Ten interfejs różni się w zależności od platformy.

Subskrypcja powiadomień push przez klienta

Po uzyskaniu zgody Twoja witryna musi zainicjować proces subskrypcji powiadomień push przez użytkownika. Robi się to za pomocą JavaScriptu i interfejsu Push API. Podczas procesu subskrypcji musisz podać klucz uwierzytelniania publicznego. Więcej informacji znajdziesz w dalszej części. Po rozpoczęciu procesu subskrypcji przeglądarka wysyła żądanie sieciowe do usługi internetowej zwanej usługą push. Więcej informacji na ten temat znajdziesz w dalszej części artykułu.

Zakładając, że subskrypcja się powiodła, przeglądarka zwraca obiekt PushSubscription. Te dane będą musiały być przechowywane przez długi czas. Zwykle odbywa się to przez wysłanie informacji na kontrolowanego przez Ciebie serwer, a potem zapisanie ich na serwerze w bazie danych.

Uzyskaj uprawnienia do wysyłania wiadomości push. Pobierz PushSubscription. Wyślij PushSubscription do swojego serwera.

Wysyłanie powiadomienia push

Twój serwer nie wysyła wiadomości push bezpośrednio do klienta. Zajmuje się to usługa push. Usługa push to usługa internetowa zarządzana przez dostawcę przeglądarki użytkownika. Aby wysłać powiadomienie push do klienta, musisz przesłać żądanie usługi internetowej do usługi push. Żądanie usługi internetowej wysyłane do usługi push jest nazywane żądaniem protokołu web push. Żądanie protokołu Web push powinno zawierać:

  • Jakie dane uwzględnić w wiadomości.
  • do którego klienta ma zostać wysłana wiadomość.
  • instrukcje dotyczące tego, jak usługa push powinna dostarczać wiadomości; Możesz na przykład określić, że usługa push powinna przestać próbować wysyłać wiadomość po 10 minutach.

Zwykle żądanie dotyczące protokołu web push przesyłasz za pomocą serwera, który jest pod Twoją kontrolą. Oczywiście serwer nie musi tworzyć żądania usługi WWW w postaci surowych danych. Istnieją biblioteki, które mogą za Ciebie to zrobić, np. web-push-libs. Jednak mechanizm bazowy to żądanie usługi sieciowej przez HTTP.

Twój serwer wysyła żądanie protokołu web push do usługi push, a usługa push wysyła wiadomość na urządzenie użytkownika.

Usługa przesyłania powiadomień push odbiera Twoje żądanie, uwierzytelnia je i przekierowuje powiadomienie do odpowiedniego klienta. Jeśli przeglądarka klienta jest offline, usługa push dodaje wiadomość do kolejki do momentu przejścia w tryb online.

Każda przeglądarka korzysta z dowolnej usługi push. Twórca witryn nie ma nad tym kontroli. To nie jest problem, ponieważ żądanie protokołu Web push jest standaryzowane. Innymi słowy, nie musisz się martwić, której usługi push używa dostawca przeglądarki. Musisz tylko sprawdzić, czy żądanie protokołu web push jest zgodne ze specyfikacją. Specyfikacja określa m.in., że żądanie musi zawierać określone nagłówki, a dane muszą być wysyłane jako strumień bajtów.

Musisz jednak upewnić się, że wysyłasz żądanie protokołu web push do właściwej usługi push. Te informacje są zawarte w danych PushSubscription, które przeglądarka zwraca podczas procesu subskrypcji. Obiekt PushSubscription wygląda tak:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

Domena endpoint to w podstawie usługa push. Ścieżka pliku endpoint to informacje o identyfikatorze klienta, które pomagają usłudze push określić dokładnie, do którego klienta ma zostać przekazana wiadomość.

keys są używane do szyfrowania, co zostanie wyjaśnione w następnym kroku.

Szyfrowanie wiadomości push

Dane wysyłane do usługi push muszą być zaszyfrowane. Zapobiega to wyświetlaniu przez usługę push danych wysyłanych do klienta. Pamiętaj, że to dostawca przeglądarki decyduje, której usługi push użyć. Ta usługa może teoretycznie być niebezpieczna lub niezabezpieczone. Twój serwer musi używać keys podanego w PushSubscription do szyfrowania żądań protokołu web push.

Podpisywanie żądań protokołu web push

Usługa push umożliwia zapobieganie wysyłaniu wiadomości do Twoich użytkowników przez inne osoby. Technicznie nie musisz tego robić, ale wymaga tego najprostsza implementacja w Chrome. W przeglądarce Firefox jest opcjonalny. W przyszłości może być ona wymagana w innych przeglądarkach.

Ten proces obejmuje klucz prywatny i klucz publiczny, które są unikalne dla Twojej aplikacji. Proces uwierzytelniania wygląda mniej więcej tak:

  • Klucz prywatny i publiczny generuje się jednorazowo. Kombinacja klucza prywatnego i publicznego to klucze serwera aplikacji. Możesz też zobaczyć je nazywane kluczami VAPID. VAPID to specyfikacja definiująca ten proces uwierzytelniania.
  • Gdy subskrybujesz klienta do powiadomień push z kodu JavaScript, przekazujesz klucz publiczny. Gdy usługa push generuje endpoint dla urządzenia, wiąże podany klucz publiczny z endpoint.
  • Gdy wysyłasz żądanie protokołu web push, podpisujesz niektóre informacje w formacie JSON za pomocą klucza prywatnego.
  • Gdy usługa przesyłania powiadomień otrzymuje żądanie protokołu web push, używa zapisanego klucza publicznego do uwierzytelnienia podpisanych informacji. Jeśli podpis jest prawidłowy, usługa push wie, że żądanie pochodziło z serwera z odpowiadającym kluczem prywatnym.

Dostosowywanie sposobu dostarczania powiadomienia push

Specyfikacja żądania protokołu web push definiuje też parametry, które umożliwiają dostosowanie sposobu wysyłania przez usługę push wiadomości push do klienta. Możesz na przykład dostosować:

  • Czas życia danych (TTL) wiadomości, który określa, jak długo usługa push będzie próbować dostarczyć wiadomość.
  • Pilność wiadomości, która jest przydatna, gdy usługa push dba o żywotność baterii klienta przez dostarczanie tylko wiadomości o wysokim priorytecie.
  • Temat wiadomości, który zastępuje wszystkie oczekujące wiadomości o tym samym temacie najnowszą wiadomością.

otrzymywać i wyświetlać jako powiadomienia;

Po wysłaniu żądania protokołu Web push do usługi push usługa pozostawia żądanie w kolejce do momentu wystąpienia jednego z tych zdarzeń:

  1. Klient łączy się z internetem, a usługa wiadomości push dostarcza wiadomość push.
  2. Wiadomość wygaśnie.

Gdy przeglądarka klienta otrzyma wiadomość push, odszyfruje dane wiadomości push i wyśle zdarzenie push do elementu sterującego usługi. Skrypt service worker to w podstawie kod JavaScript, który może działać w tle, nawet gdy Twoja witryna jest zamknięta lub przeglądarka zamknięta. W obiekcie service workera wywołujesz metodę push, aby wyświetlić informacje jako powiadomienie.

Wiadomość dociera na urządzenie. Przeglądarka wybudza skrypt service worker. Wyślij zdarzenie push.

Co dalej

Codelabs