Powiadomienia push umożliwiają użytkownikom korzystanie z aplikacji w wygodny sposób. Mogą oni otrzymywać ważne i aktualne informacje, np. wiadomości na czacie. Platforma powiadomień jest stosunkowo nowym elementem w przeglądarkach, a wraz z tym, jak przybywa zastosowań i wymagań, do interfejsów API powiadomień wprowadzamy coraz więcej zmian. Chrome 50 (w wersji beta w marcu 2016 r.) nie jest wyjątkiem. Zawiera aż 4 nowe funkcje, które dają deweloperom większą kontrolę nad powiadomieniami. Możesz:
- dodawać ikony do przycisków powiadomień,
- zmienić sygnaturę czasową, aby zapewnić spójność,
- śledzić zdarzenia zamykania powiadomień, aby ułatwić synchronizację powiadomień i przekazywać dane analityczne;
- zarządzać wyświetlaniem powiadomień, gdy jedno powiadomienie zastępuje aktualnie wyświetlane powiadomienie.
W Chrome 50 dodano też dane Payload dla powiadomień push. Aby być na bieżąco z interfejsem Notifications API w wersji zaimplementowanej w Chrome, zapoznaj się z specyfikacją i śledzeniem problemów z tą specyfikacją.
Tworzenie przycisków z ikonami niestandardowymi
W niedawnym poście na temat przycisków akcji powiadomień w Chrome 49 wspomniałem, że nie można dołączać obrazów do przycisków powiadomień, aby były atrakcyjne, ale można używać znaków Unicode do umieszczania emotikonów w tekście. Nie musisz się już martwić: dzięki tej niedawnej zmianie możesz teraz określić obraz przycisku działania:
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 akcji różni się w zależności od platformy. Na przykład na Androidzie ikona będzie miała ciemnoszary filtr w Lollipop i nowszych wersjach oraz biały filtr w wersjach starszych niż Lollipop. Na komputerze będzie ona w pełni kolorowa. (Uwaga: trwa dyskusja na temat przyszłości tej funkcji na komputerach). Niektóre platformy mogą nie wyświetlać ikon działań, dlatego upewnij się, że używasz ich, aby zapewnić kontekst działania, a nie jako jedyny wskaźnik zamiaru.
I wreszcie, ponieważ zasoby muszą być pobierane, dobrym zwyczajem jest utrzymywanie ikon w jak najmniejszym rozmiarze i ich wstępnej pamięci podręcznej w zdarzeniu instalacji. (w momencie pisania tego tekstu pobieranie zasobów powiadomień w Chrome nie jest jeszcze kierowane przez skrypt service worker).
Zdarzenia zamknięcia powiadomienia
Często prosimy o funkcję, która pozwalałaby nam wiedzieć, kiedy użytkownik zamknął powiadomienie. Nie było to możliwe, dopóki nie wprowadziliśmy zmian w specyfikacji powiadomień, które dodały zdarzenie notificationclose.
Korzystając ze zdarzeń notificationclick i notificationclose, możesz się dowiedzieć, jak użytkownicy wchodzą w interakcje z Twoimi powiadomieniami. Czy użytkownicy przez długi czas trzymają otwarte karty, a potem aktywnie je zamykają, czy działają od razu.
Jednym z popularnych zastosowań jest możliwość synchronizowania powiadomień między urządzeniami. Jeśli użytkownik zamknie powiadomienie na komputerze, to samo powiadomienie powinno zostać zamknięte na urządzeniu mobilnym. Nie mamy jeszcze możliwości robienia tego w sposób cichy (pamiętaj, że każde powiadomienie push musi być wyświetlane), ale dzięki funkcji notificationclose możesz śledzić stan powiadomienia użytkownika na serwerze i synchronizować go z innymi urządzeniami, gdy użytkownik z nich korzysta.
Aby użyć zdarzenia notificationclose, zarejestruj je w usługowym workerze. Zostanie ono wywołane tylko wtedy, gdy użytkownik aktywnie zamknie powiadomienie, na przykład jeśli zamknie konkretne powiadomienie lub wszystkie powiadomienia w swoim zasobniku (na Androidzie).
Jeśli parametr requireInteraction ma wartość Fałsz lub nie jest ustawiony, a powiadomienie nie zostało zamknięte ręcznie przez użytkownika, ale automatycznie przez system, zdarzenie notificationclose nie zostanie wywołane.
Poniżej przedstawiamy prostą implementację. Gdy użytkownik zamknie powiadomienie, otrzymasz dostęp do obiektu powiadomienia, za pomocą którego możesz wykonać niestandardową logikę.
self.addEventListener('notificationclose', e => console.log(e.notification));
Możesz to przetestować w Generatorze powiadomień. Po zamknięciu powiadomienia otrzymasz alert.
Nie irytuj użytkowników, gdy zastępujesz istniejące powiadomienie.
Jestem przekonany, że wujek Ben miał na myśli system powiadomień, a nie moce Petera Parkera, gdy powiedział: „Z wielką mocą łączy się wielka odpowiedzialność”. System powiadomień to skuteczne narzędzie do interakcji z użytkownikami. Jeśli nadużyjesz ich zaufania, wyłączy wszystkie powiadomienia, a Ty możesz je całkowicie utracić.
Podczas tworzenia powiadomienia możesz ustawić, aby było ono wyświetlane z dźwiękiem lub wibracją, aby zwrócić uwagę użytkownika. Możesz też zastąpić istniejące powiadomienie, ponowując użycie atrybutu „tag” w nowym obiekcie powiadomienia.
Przed wersją 50 przeglądarki Chrome za każdym razem, gdy tworzono powiadomienie lub zastępowano istniejące, uruchamiano wibracje lub dźwiękowy alert, co mogło być irytujące dla użytkowników. W Chrome 50 możesz kontrolować, co dzieje się podczas ponownego wyświetlania powiadomienia, za pomocą prostej flagi logicznej o nazwie „renotify”. Nowe domyślne zachowanie podczas używania tego samego „tagu” w przypadku kolejnych powiadomień to milczenie. Jako deweloper musisz wyrazić zgodę na „ponowne powiadamianie” użytkownika, ustawiając flagę na „true”.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Możesz to sprawdzić w Generatorze powiadomień.
Zarządzanie sygnaturą czasową wyświetlaną użytkownikowi
Na Androidzie czas utworzenia powiadomień Chrome jest domyślnie wyświetlany w prawym górnym rogu. Niestety może to nie być czas, w którym powiadomienie zostało wygenerowane przez Twój system. Zdarzenie mogło zostać wywołane, gdy urządzenie było offline, lub powiadomienie mogło zostać wyświetlone w związku z zbliżającym się spotkaniem. W Chrome 50 dodano nową właściwość timestamp, która umożliwia deweloperom określenie czasu, który powinien być wyświetlany w powiadomieniu.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Znak czasowy jest obecnie widoczny tylko w Chrome na Androida. Chociaż nie jest widoczny na komputerze, wpływa na kolejność powiadomień zarówno na urządzeniach mobilnych, jak i na komputerach.
.