Omówienie powiadomień push

Omówienie powiadomień push, powodów, dla których warto z nich korzystać, i sposobu ich działania.

Kayce Basques
Kayce Basques
X GitHub

Czym są powiadomienia push?

Wiadomości push umożliwiają przekazywanie informacji użytkownikom, nawet gdy nie korzystają oni z Twojej witryny. Nazywamy je wiadomościami push , ponieważ możesz „wypychać” 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 fragmenty informacji dla użytkownika. Witryny mogą używać powiadomień, aby informować użytkowników o ważnych, pilnych zdarzeniach lub działaniach, które użytkownik musi wykonać. Wygląd powiadomień różni się w zależności od platformy:

Przykłady powiadomień w systemach macOS i Android.
Przykłady powiadomień w systemach macOS i Android.

Wiadomości push i powiadomienia to 2 oddzielne, ale uzupełniające się technologie. Push to technologia wysyłania wiadomości z serwera do użytkowników, nawet gdy nie korzystają oni aktywnie z Twojej witryny. Powiadomienia to technologia wyświetlania informacji push na urządzeniu użytkownika. Można korzystać z powiadomień bez wiadomości push. Być może w przyszłości będzie też można używać wiadomości push bez powiadomień wyświetlanych użytkownikom (ciche powiadomienia push), ale obecnie przeglądarki na to nie pozwalają. W praktyce są one zwykle używane razem. Użytkownik nietechniczny prawdopodobnie nie zrozumie różnicy między wiadomościami push a powiadomieniami. W tym zbiorze, gdy mówimy o powiadomieniach push , mamy na myśli połączenie wysyłania wiadomości i wyświetlania jej jako powiadomienia. Gdy mówimy o wiadomościach push , mamy na myśli samą technologię push. A gdy mówimy o powiadomieniach , mamy na myśli samą technologię powiadomień.

Dlaczego warto korzystać z powiadomień push?

  • Dla użytkowników powiadomienia push to sposób na otrzymywanie aktualnych, trafnych, 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 wdrażania powiadomień push to:

  1. Dodanie logiki klienta, która prosi użytkownika o zgodę na wysyłanie powiadomień push, a następnie wysyła informacje o identyfikatorze klienta na serwer w celu zapisania ich w bazie danych.
  2. Dodanie logiki serwera, która wysyła wiadomości push na urządzenia klienckie.
  3. Dodanie logiki klienta, która odbiera wiadomości push na urządzenie i wyświetla je jako powiadomienia.

Dalsza część tej strony zawiera szczegółowe wyjaśnienie tych kroków.

Uzyskiwanie zgody na wysyłanie powiadomień push

Najpierw Twoja witryna musi uzyskać zgodę użytkownika na wysyłanie powiadomień push. Powinno to być wywołane przez gest użytkownika, np. kliknięcie przycisku Tak obok pytania Do you want to receive push notifications?. Po potwierdzeniu, wywołaj Notification.requestPermission(). System operacyjny lub przeglądarka na urządzeniu użytkownika prawdopodobnie wyświetli interfejs, który pozwoli użytkownikowi formalnie potwierdzić, że chce otrzymywać powiadomienia push. Ten interfejs różni się w zależności od platformy.

Subskrybowanie klienta na powiadomienia push

Po uzyskaniu zgody Twoja witryna musi rozpocząć proces subskrybowania użytkownika na powiadomienia push. Odbywa się to za pomocą JavaScriptu, przy użyciu Push API. Podczas procesu subskrypcji musisz podać publiczny klucz uwierzytelniania, o którym dowiesz się więcej później. Po rozpoczęciu procesu subskrypcji przeglądarka wysyła żądanie sieciowe do usługi internetowej znanej jako usługa push, o której też dowiesz się więcej później.

Jeśli subskrypcja się powiedzie, przeglądarka zwróci PushSubscription obiekt. Musisz przechowywać te dane długoterminowo. Zwykle odbywa się to przez wysłanie informacji na serwer, nad którym masz kontrolę, a następnie zapisanie ich w bazie danych.

1. Uzyskaj uprawnienia do wysyłania wiadomości push. 2. Pobieranie obiektu PushSubscription. 3. Wyślij PushSubscription na swój serwer.

Wysyłanie wiadomości 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 kontrolowana przez dostawcę przeglądarki użytkownika. Gdy chcesz wysłać powiadomienie push do klienta, musisz wysł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ć:

  • Dane, które mają być zawarte w wiadomości.
  • Klient, do którego ma zostać wysłana wiadomość.
  • Instrukcje dotyczące sposobu dostarczania wiadomości przez usługę push. Możesz na przykład określić, że usługa push ma przestać próbować wysyłać wiadomość po 10 minutach.

Zwykle wysyłasz żądanie protokołu web push za pomocą serwera, nad którym masz kontrolę. Oczywiście Twój serwer nie musi samodzielnie tworzyć surowego żądania usługi internetowej. Istnieją biblioteki, które mogą to zrobić za Ciebie, np. web-push-libs. Jednak podstawowy mechanizm to żądanie usługi internetowej przez HTTP.

Serwer wysyła żądanie protokołu powiadomień internetowych do usługi powiadomień, a ta wysyła wiadomość na urządzenie użytkownika.

Usługa push odbiera Twoje żądanie, uwierzytelnia je i kieruje wiadomość push do odpowiedniego klienta. Jeśli przeglądarka klienta jest offline, usługa push umieszcza wiadomość push w kolejce do momentu, aż przeglądarka będzie online.

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 standardowe. Innymi słowy, nie musisz się martwić, jakiej usługi push używa dostawca przeglądarki. Musisz tylko upewnić się, że żądanie protokołu web push jest zgodne ze specyfikacją. Specyfikacja ta 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ą dostępne w danych PushSubscription, które przeglądarka zwróciła Ci 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 zasadzie usługa push. Ścieżka endpoint to informacje o identyfikatorze klienta, które pomagają usłudze push określić, do którego klienta ma zostać wysłana wiadomość.

keys służą do szyfrowania, co wyjaśniono poniżej.

Szyfrowanie wiadomości push

Dane wysyłane do usługi push muszą być zaszyfrowane. Uniemożliwia to usłudze push wyświetlanie danych wysyłanych do klienta. Pamiętaj, że dostawca przeglądarki decyduje, jakiej usługi push użyć, a ta usługa może być teoretycznie niebezpieczna lub niezabezpieczona. Twój serwer musi używać keys podanych w PushSubscription do szyfrowania żądań protokołu web push.

Podpisywanie żądań protokołu web push

Usługa push umożliwia uniemożliwienie innym osobom wysyłania wiadomości do Twoich użytkowników. Technicznie nie musisz tego robić, ale najprostsza implementacja w Chrome tego wymaga. W Firefoksie jest to opcjonalne. Inne przeglądarki mogą wymagać tego w przyszłości.

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

  • Generujesz klucz prywatny i publiczny jako jednorazowe zadanie. Połączenie klucza prywatnego i publicznego jest znane jako klucze serwera aplikacji. Możesz też spotkać się z nazwą klucze VAPID. VAPID to specyfikacja, która definiuje ten proces uwierzytelniania.
  • Gdy subskrybujesz klienta na powiadomienia push z kodu JavaScript, podajesz swój klucz publiczny. Gdy usługa push generuje endpoint dla urządzenia, łączy podany klucz publiczny z endpoint.
  • Gdy wysyłasz żądanie protokołu web push, podpisujesz niektóre informacje JSON kluczem prywatnym.
  • Gdy usługa push otrzyma żą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 z serwera z pasującym kluczem prywatnym.

Dostosowywanie dostarczania wiadomości push

Specyfikacja żądania protokołu web push definiuje też parametry, które pozwalają dostosować sposób, w jaki usługa push próbuje wysłać wiadomość push do klienta. Możesz na przykład dostosować:

  • Czas życia (TTL) wiadomości, który określa, jak długo usługa push ma próbować dostarczyć wiadomość.
  • Pilność wiadomości, która jest przydatna, jeśli usługa push oszczędza baterię klienta, dostarczają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ą.

Odbieranie i wyświetlanie wiadomości push jako powiadomień

Gdy wyślesz żądanie protokołu web push do usługi push, usługa push umieści Twoje żądanie w kolejce do momentu, aż nastąpi jedno z tych zdarzeń:

  1. Klient przejdzie do trybu online, a usługa push dostarczy wiadomość push.
  2. Wiadomość wygaśnie.

Gdy przeglądarka klienta otrzyma wiadomość push, odszyfruje dane wiadomości push i wyśle zdarzenie push do Twojego service workera. Skrypt service worker to w zasadzie kod JavaScript, który może działać w tle, nawet gdy Twoja witryna nie jest otwarta lub przeglądarka jest zamknięta. W obsłudze zdarzenia push service workera wywołujesz ServiceWorkerRegistration.showNotification(), aby wyświetlić informacje jako powiadomienie.

1. Wiadomość dociera na urządzenie. 2. Przeglądarka wybudza skrypt service worker. 3. Wysyłane jest zdarzenie push.

Co dalej

Ćwiczenia w Codelabs