Powiadomienia PPush pozwalają zapewnić użytkownikom wrażenia podobne do aplikacji, informując ich o ważnych i aktualnych aktualizacjach, takich jak przychodzące wiadomości czatu. Platforma powiadomień jest stosunkowo nowa w przypadku przeglądarek. W miarę dopracowywania kolejnych przypadków użycia i wymagań widzimy wiele nowych interfejsów API do powiadomień. Chrome 50 (wersja beta w marcu 2016 r.) nie jest wyjątkiem i obejmuje co najmniej 4 nowe funkcje, które dają deweloperom większą kontrolę nad powiadomieniami. Dzięki temu możesz:
- dodawać ikony do przycisków powiadomień,
- zmienić sygnaturę czasową, aby zapewnić spójne wrażenia użytkowników.
- śledzić zdarzenia zamknięcia powiadomień, aby synchronizować powiadomienia i dostarczać statystyki.
- zarządzać sposobem ponownego wysyłania powiadomień, gdy powiadomienie zastąpi aktualnie wyświetlane powiadomienie.
Do Chrome 50 dodaliśmy też ładunki na powiadomienia push. Aby być na bieżąco z tym, jak API jest wdrożony w Chrome, przestrzegaj spec i narzędzia do śledzenia problemów ze specyfikacją.
Tworzenie atrakcyjnych przycisków działań za pomocą ikon niestandardowych
W ostatnim poście o przyciskach działań związanych z powiadomieniami w Chrome 49 wspominaliśmy, że do przycisków powiadomień nie można dołączać obrazów, aby były one atrakcyjne i efektowne, ale można używać znaków Unicode do wstawiania emotikonów itp. Nie ma powodu do obaw: dzięki ostatnim dodaniu możesz określić obraz przycisku polecenia:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
Wygląd ikony działania różni się w zależności od platformy. Na przykład na Androidzie ikona będzie miała ciemnoszary filtr w wersji Lollipop i nowszych, a na komputerach – biały filtr wstępny w wersji Lollipop, a na komputerach – pełnokolorowy. (uwaga: dyskutuje o przyszłości tej funkcji na komputerach). Niektóre platformy mogą nawet nie być w stanie wyświetlać ikon działań, dlatego upewnij się, że służą one do wywołania kontekstu działania, a nie jako jedynego wskaźnika intencji.
Zasoby muszą być pobrane, dlatego dobrze jest dbać o to, aby ikony były jak najmniejsze i umieszczać je w pamięci podręcznej podczas instalacji. (W momencie zapisu pobrania zasobów powiadomień w Chrome nie są jeszcze kierowane przez skrypt service worker).
Zdarzenia zamknięcia powiadomienia
Częstą funkcją powiadomień jest możliwość sprawdzenia, kiedy użytkownik odrzucił powiadomienie. Nie było to możliwe, dopóki w ramach ostatnich zmian w specyfikacji powiadomień nie dodano zdarzenia „powiadomienie zamknięć”.
Korzystając z kliknięcia powiadomienia i zdarzenia zamknięcia powiadomienia, możesz się dowiedzieć, jak użytkownicy korzystają z Twoich powiadomień. Czy pozostawia je otwarte na dłuższy czas, a potem aktywnie je odrzuca, czy też reagują na nie od razu?
Popularnym przypadkiem użycia jest możliwość synchronizowania powiadomień między urządzeniami. Jeśli użytkownik odrzuci powiadomienie na komputerze, to samo powiadomienie na urządzeniu mobilnym również powinno zostać zamknięte. Nie jesteśmy jeszcze w stanie robić tego dyskretnie (pamiętaj, że każda wiadomość push musi mieć wyświetlane powiadomienia), ale opcja powiadamianiaclose pozwala na śledzenie stanu powiadomienia użytkownika na serwerze i synchronizowanie ich z innymi urządzeniami w miarę korzystania z nich.
Aby używać tego zdarzenia, zarejestruj je w skrypcie service worker. Będzie ono uruchamiane tylko wtedy, gdy użytkownik aktywnie odrzuci powiadomienie, na przykład gdy odrzuci określone powiadomienie lub wszystkie powiadomienia na pasku zadań (w Androidzie).
Jeśli flaga wymaga interakcji ma wartość Fałsz lub jest nieskonfigurowana, zdarzenie „notificationclose” nie zostanie wywołane, jeśli powiadomienie nie zostanie zamknięte ręcznie przez użytkownika, ale automatycznie przez system.
Poniżej przedstawiamy prostą implementację. Gdy użytkownik odrzuci powiadomienie, uzyskasz dostęp do obiektu powiadomienia, za pomocą którego możesz wykonać niestandardowe działania.
self.addEventListener('notificationclose', e => console.log(e.notification));
Możesz to sprawdzić w generatorze powiadomień. Gdy zamkniesz powiadomienie, otrzymasz alert.
Zastępuj powiadomienia, aby nie denerwować użytkowników
Jestem pewien, że Wujek Ben mówił o systemie powiadomień, a nie o mocach Petera Parkera, mówiąc: „Wielka moc to wielka odpowiedzialność”. System powiadomień to skuteczne narzędzie do interakcji z użytkownikami. Jeśli nadużyjesz ich zaufania, wyłączymy wszystkie powiadomienia, a Ty całkowicie je utracisz.
Tworząc powiadomienie, możesz ustawić alert dźwiękowy lub wibrację, aby zwrócić uwagę użytkownika. Możesz też zastąpić istniejące powiadomienie, ponownie wykorzystując atrybut „tag” w nowym obiekcie powiadomienia.
Przed Chrome 50 za każdym razem, gdy tworzysz lub zastępujesz istniejące powiadomienie, uruchamiało się ono wzór wibracji lub oddawał dźwięk dźwiękowy, co mogło irytować u użytkowników. W Chrome 50 za pomocą prostej flagi wartości logicznej o nazwie „renotify” masz kontrolę nad tym, co dzieje się w trakcie ponownego powiadamiania. Nowym domyślnym działaniem w przypadku używania tego samego tagu w kolejnych powiadomieniach jest wyciszenie, a deweloper musi włączyć „ponowne powiadamianie użytkownika” za pomocą flagi „true”.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Możesz wypróbować tę funkcję w Generatorze powiadomień.
Zarządzaj sygnaturą czasową wyświetlaną użytkownikowi
W Androidzie powiadomienia Chrome domyślnie pokazują czas utworzenia w prawym górnym rogu. Niestety może to nie być godzina, kiedy powiadomienie zostało wygenerowane przez Twój system. Na przykład zdarzenie mogło zostać wywołane, gdy urządzenie było offline, lub powiadomienie o zbliżającym się spotkaniu. W Chrome 50 dodaliśmy nową właściwość „timestamp”, która umożliwia deweloperom podanie godziny, która powinna być wyświetlana w powiadomieniu.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Ta sygnatura czasowa jest obecnie widoczna tylko w Chrome na Androida. Chociaż nie jest to widoczne na komputerach, będzie miało wpływ na kolejność powiadomień zarówno na urządzeniach mobilnych, jak i na komputerach.