Omówienie powiadomień push

Omówienie powiadomień push: czym są, dlaczego warto z nich korzystać 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ń w systemach macOS i Android.

Powiadomienia push i powiadomienia to 2 oddzielne, ale uzupełniające się technologie. Powiadomienia push to technologia umożliwiająca wysyłanie wiadomości z serwera do użytkowników, nawet gdy nie korzystają aktywnie z Twojej witryny. Powiadomienia to technologia wyświetlania informacji przesyłanych na urządzenie użytkownika. Powiadomienia można wysyłać bez wiadomości push. Może się zdarzyć, że w przyszłości będzie można wysyłać wiadomości push bez powiadomień dla użytkowników (cicha transmisja push), ale obecnie przeglądarki nie umożliwiają tego. 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 w wdrażaniu 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 działanie użytkownika, np. kliknięcie przycisku Tak obok prompta Do you want to receive push notifications?. Po potwierdzeniu zadzwoń pod numer Notification.requestPermission(). System operacyjny lub przeglądarka na urządzeniu użytkownika prawdopodobnie wyświetli jakiś interfejs użytkownika, aby formalnie potwierdzić, że użytkownik chce otrzymywać powiadomienia push. Ten interfejs różni się na poszczególnych platformach.

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 tego artykułu. 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 została pomyślnie utworzona, 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 serwer, który jest pod Twoją kontrolą, a następnie przechowywanie ich w bazie danych.

Uzyskaj uprawnienia do wysyłania wiadomości push. Pobieranie PushSubscription. Wyślij zdarzenie PushSubscription na serwer.

Wysyłanie powiadomienia push

Twój serwer nie wysyła wiadomości push bezpośrednio do klienta. Robi 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 przesyłania powiadomień umieszcza powiadomienie w kolejce do momentu, gdy przeglądarka uzyska dostęp do internetu.

Każda przeglądarka używa dowolnej usługi push. Jako deweloper witryny nie masz nad tym kontroli. Nie stanowi to problemu, ponieważ żądanie protokołu web push jest ustandaryzowane. 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 endpoint to informacje o identyfikatorze klienta, które pomagają usłudze powiadomień push określić, do którego klienta wysłać powiadomienie.

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, z której usługi push korzystać, a ta usługa może teoretycznie być niebezpieczna lub niepewna. 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 najprostsza implementacja w Chrome tego wymaga. W Firefoxie jest to opcjonalne. 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:

  • Klucze prywatny i publiczny generujesz jako jednorazowe zadanie. Kombinacja klucza prywatnego i publicznego to klucze serwera aplikacji. Mogą też być 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 przesyłania informacji generuje endpointna urządzeniu, powoduje to powiązanie podanego klucza publicznego 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, co jest przydatne, gdy usługa push oszczędza czas pracy baterii klienta, wysyłając 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 żądanie jest przechowywane 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. Wygasa ona.

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.ServiceWorkerRegistration.showNotification()

Wiadomość dociera na urządzenie. Przeglądarka budzi pracownika usługi. Wywołanie zdarzenia push.

Co dalej

Code labs