Podstawowe informacje o tym, czym są powiadomienia push, dlaczego warto ich używać i jak działają.
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:
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:
- 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.
- Dodawanie logiki serwera do wiadomości push na urządzeniach klienckich.
- 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.
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.
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 zendpoint
. - 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ń:
- Klient łączy się z internetem, a usługa wiadomości push dostarcza wiadomość push.
- 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.
Co dalej
- Omówienie powiadomień internetowych
- Jak działają powiadomienia push
- Subskrypcja przez użytkownika
- UX uprawnień
- Wysyłanie wiadomości za pomocą bibliotek Web Push
- Protokół Web Push
- Obsługa zdarzeń push
- Wyświetlanie powiadomienia
- Zachowanie powiadomienia
- Typowe wzorce powiadomień
- Najczęstsze pytania dotyczące powiadomień push
- Typowe problemy i zgłaszanie błędów