Omówienie powiadomień push

Omówienie powiadomień push, dlaczego warto z nich korzystać i jak działają.

Kayce Basques

Czym są powiadomienia push?

Dzięki komunikatom push możesz zwrócić uwagę użytkowników na informacje, nawet gdy nie korzystają oni z Twojej witryny. Nazywa się je wiadomościami push, ponieważ pozwalają przekazywać informacje do użytkowników, nawet gdy są oni nieaktywni. Porównaj technologię push z technologią pull, aby lepiej zrozumieć tę kwestię.

Powiadomienia wyświetlają użytkownikom niewielkie fragmenty informacji. Witryny mogą używać powiadomień, aby informować użytkowników o ważnych, pilnych wydarzeniach lub o czynnościach, które musi wykonać użytkownik. Wygląd i działanie powiadomień różnią się w zależności od platformy:

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

Komunikaty push i powiadomienia to 2 oddzielne, wzajemnie się uzupełniające technologie. Push to technologia umożliwiająca wysyłanie wiadomości z serwera do użytkowników nawet wtedy, gdy nie korzystają oni aktywnie z Twojej witryny. Powiadomienia to technologia wyświetlania przekazanych informacji na urządzeniu użytkownika. Można z nich korzystać bez komunikatów push. Kiedyś może być możliwe używanie wiadomości push bez powiadomień dla użytkowników (cicha wiadomość push), ale przeglądarki obecnie na to nie zezwalają. W praktyce są zwykle używane razem. Użytkownik bez wiedzy technicznej prawdopodobnie nie rozumie różnicy między wiadomościami push a powiadomieniami. W tej kolekcji powiadomienia push mają na celu połączenie przesłania wiadomości, a następnie jej wyświetlenia jako powiadomienia. Mówiąc o komunikatach push, mamy na myśli wyłącznie technologię push. Mówiąc o powiadomieniach, mamy na myśli wyłącznie technologię powiadomień.

Dlaczego warto korzystać z powiadomień push?

  • Dla użytkowników powiadomienia push to sposób na otrzymywanie w odpowiednim czasie, trafnych i precyzyjnych 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 najważniejsze kroki wdrażania powiadomień push to:

  1. Dodanie logiki klienta w celu poproszenia użytkownika o zgodę na wysyłanie powiadomień push, a następnie wysyłanie informacji o identyfikatorze klienta na Twój serwer w celu ich przechowywania w bazie danych.
  2. Dodano logikę serwera do obsługi komunikatów push na urządzeniach klienckich.
  3. Dodano logikę klienta umożliwiającą odbieranie wiadomości przekazanych na urządzenie i wyświetlanie ich jako powiadomień.

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

Uzyskiwanie uprawnień do wysyłania powiadomień push

Najpierw witryna musi uzyskać zgodę użytkownika na wysyłanie powiadomień push. Powinno to być aktywowane gestem użytkownika, np. kliknięciem przycisku Tak obok promptu 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 będą wyświetlać jakiś interfejs, aby formalnie potwierdzić, że użytkownik chce wyrazić zgodę na powiadomienia push. Ten interfejs różni się w zależności od platformy.

Subskrybowanie powiadomień push klienta

Gdy uzyskasz zgodę, witryna musi rozpocząć proces subskrybowania powiadomień push. Możesz to robić za pomocą JavaScriptu przy użyciu interfejsu Push API. W trakcie procesu subskrypcji trzeba będzie podać publiczny klucz uwierzytelniania. Więcej informacji znajdziesz później. Po rozpoczęciu procesu subskrypcji przeglądarka wysyła żądanie sieciowe do usługi internetowej zwanej usługą push, o której dowiesz się więcej później.

Zakładając, że subskrypcja się powiodła, przeglądarka zwraca obiekt PushSubscription. Dane te należy przechowywać długoterminowo. Zwykle odbywa się to przez wysłanie informacji do serwera, który kontrolujesz, a następnie do zapisania ich w bazie danych.

Uzyskiwanie uprawnień do wysyłania wiadomości push. Pobieranie PushSubscription. Wyślij PushSubscription na swój serwer.

Wyślij wiadomość push

Serwer nie wysyła wiadomości push bezpośrednio do klienta. Zajmuje się to usługa push. Usługa push to usługa internetowa kontrolowana przez dostawcę przeglądarki użytkownika. Aby 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 dotyczące protokołu web push powinno zawierać:

  • jakie dane należy umieścić 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 powinna przestać próbować wysłać wiadomość po 10 minutach.

Normalnie żądanie protokołu web push jest wysyłane przez serwer, który kontrolujesz. Oczywiście serwer nie musi sam tworzyć nieprzetworzonego żądania usługi internetowej. Istnieją biblioteki, które to obsługują, na przykład web-push-libs. Podstawowym mechanizmem jest jednak żądanie usługi internetowej przez HTTP.

Serwer wysyła żądanie protokołu Web Push Protocol do usługi push, a następnie wysyła ją do urządzenia użytkownika.

Usługa push otrzymuje Twoje żądanie, uwierzytelnia je i przekierowuje wiadomość push do odpowiedniego klienta. Jeśli przeglądarka klienta jest offline, usługa push umieszcza komunikat push w kolejce do momentu, aż przeglądarka stanie się online.

Każda przeglądarka używa dowolnej usługi push. Twórca witryny nie ma nad tym kontroli. Nie jest to problem, ponieważ żądanie protokołu web push jest standaryzowane. Innymi słowy, nie musisz się martwić, z której usługi push korzysta dostawca przeglądarki. Musisz tylko upewnić się, że żądanie protokołu web push jest zgodne ze specyfikacją. Specyfikacja określa między innymi, że żądanie musi zawierać określone nagłówki, a dane muszą być wysyłane w postaci strumienia bajtów.

Musisz jednak upewnić się, że wysyłasz żądanie protokołu web push do odpowiedniej usługi push. Dane PushSubscription, które przeglądarka zwróciła w trakcie procesu subskrypcji, dostarczają tych informacji. Obiekt PushSubscription wygląda tak:

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

Domena endpoint jest zasadniczo usługą push. Ścieżka obiektu endpoint zawiera informacje o identyfikatorze klienta, które pomagają usłudze push określić dokładnie, do którego klienta przekazać wiadomość.

Do szyfrowania używane są keys, co zostało opisane 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 to dostawca przeglądarki decyduje, której usługi push będzie używać, a ta usługa push może być teoretycznie niebezpieczna lub niezabezpieczona. Twój serwer musi używać keys podanego w PushSubscription, aby szyfrować żądania web push.

Podpisywanie żądań protokołu Web Push Protocol

Usługa push uniemożliwia innym osobom wysyłanie wiadomości do Twoich użytkowników. Teoretycznie nie musisz tego robić, ale wymaga tego najprostsza implementacja w Chrome. W przeglądarce Firefox jest ona opcjonalna. Inne przeglądarki mogą wymagać go w przyszłości.

Ten przepływ pracy 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 generujesz jako jednorazowe zadanie. Kombinacja klucza prywatnego i publicznego jest nazywana kluczami serwera aplikacji. Mogą one też być określane jako klucze VAPID. Specyfikacja VAPID definiuje ten proces uwierzytelniania.
  • Subskrybując klienta, aby wysyłał powiadomienia push z kodu JavaScript, musisz podać swój klucz publiczny. Gdy usługa push generuje klucz endpoint dla urządzenia, wiąże podany klucz publiczny z endpoint.
  • Gdy wysyłasz żądanie protokołu Web push, podpisujesz niektóre informacje JSON kluczem prywatnym.
  • Gdy usługa push otrzymuje żądanie protokołu Web push, używa zapisanego klucza publicznego do uwierzytelniania podpisanych informacji. Jeśli podpis jest prawidłowy, usługa push będzie wiedzieć, że żądanie pochodzi z serwera z pasującym kluczem prywatnym.

Dostosowywanie dostarczania wiadomości push

Specyfikacja żądania protokołu web push określa 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 danych (TTL) wiadomości, który określa, jak długo usługa push powinna starać się dostarczyć wiadomość.
  • Pilność komunikatu, która przydaje się, gdy usługa push pomaga oszczędzać baterię klienta, dostarczając tylko wiadomości o wysokim priorytecie.
  • Temat wiadomości, który zastępuje wszystkie oczekujące wiadomości z tego samego tematu najnowszą wiadomością.

Odbieraj i wyświetlaj przekazane wiadomości jako powiadomienia

Gdy wyślesz żądanie protokołu web push do usługi push, będzie ona umieszczała je w kolejce do momentu, gdy dojdzie do jednego z tych zdarzeń:

  1. Klient jest online, a usługa push dostarcza wiadomość push.
  2. Wiadomość wygaśnie.

Gdy przeglądarka kliencka otrzyma przekazany komunikat, odszyfrowuje dane komunikatu push i wyśle zdarzenie push do skryptu service worker. Skrypt service worker to w zasadzie kod JavaScript, który może działać w tle, nawet gdy witryna nie jest otwarta lub przeglądarka jest zamknięta. W module obsługi zdarzeń push skryptu service worker wywołujesz metodę ServiceWorkerRegistration.showNotification(), by wyświetlić informacje jako powiadomienie.

Wiadomość zostanie dostarczona na urządzenie. Przeglądarka wybudza skrypt service worker. Zdarzenie push jest wysyłane.

Co dalej

Laboratoria kodu