Na początku 2015 r. wprowadziliśmy w Chrome na Androida i na komputery powiadomienia i wiadomości push. To był duży krok naprzód w internecie. Użytkownicy mogli zacząć bardziej angażować się w działania w internecie, nawet gdy przeglądarka była zamknięta.
Chociaż możesz wysyłać te wiadomości, jedyne, co możesz zrobić, to kliknąć je i otworzyć stronę lub całkowicie je zamknąć.
Jeśli przyjrzysz się powiadomieniom wyświetlanym natywnie w aplikacjach na platformach mobilnych, takim jak iOS czy Android, zauważysz, że w każdym przypadku deweloper może zdefiniować działania kontekstowe, które użytkownik może wywołać i z nimi wchodzić w interakcję. W Chrome 48 dodaliśmy podobną funkcję powiadomień internetowych na komputerach i w Chrome na Androida.
Dodanie do interfejsu API jest bardzo proste. Wystarczy, że utworzysz tablicę działań i dodasz ją do obiektu NotificationOptions, gdy wywołasz funkcję showNotification z rejestracji ServiceWorker (bezpośrednio w ServiceWorker lub na stronie za pomocą navigator.serviceWorker.ready).
Obecnie Chrome obsługuje tylko 2 działania dotyczące każdego powiadomienia.
Niektóre platformy mogą obsługiwać więcej, a inne mniej lub wcale. Aby sprawdzić, co jest obsługiwane na danej platformie, otwórz Notification.maxActions. W następujących przykładach zakładamy, że platforma obsługuje 2 działania.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
Spowoduje to utworzenie prostego powiadomienia z 2 przyciskami. Pamiętaj, że nie możesz bezpośrednio dodawać ikon do działania (jeszcze), ale możesz użyć emotikonów i rozszerzonego zestawu znaków Unicode, aby dodać więcej kontekstu do przycisków powiadomień.
Na przykład:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
Po utworzeniu powiadomienia i nadaniu mu atrakcyjnego wyglądu 😻 użytkownik może w przyszłości z nim wejść w interakcję. Interakcje z powiadomieniem są obecnie (w Chrome 48) rejestrowane w usługach workera za pomocą zdarzenia notificationclick. Mogą to być kliknięcia powiadomienia lub dotknięcia jednego z przycisków akcji. W przyszłości będziesz też mieć możliwość odpowiedzi na zdarzenienotificationclose.
Aby dowiedzieć się, jakie działanie wykonał użytkownik, musisz sprawdzić właściwość action w przypadku danego zdarzenia. Następnie możesz otworzyć nową stronę, aby użytkownik wykonał działanie, lub wykonać zadanie w tle.
self.addEventListener('notificationclick', function(event) {
var messageId = event.notification.data;
event.notification.close();
if (event.action === 'like') {
silentlyLikeItem();
}
else if (event.action === 'reply') {
clients.openWindow("/messages?reply=" + messageId);
}
else {
clients.openWindow("/messages?reply=" + messageId);
}
}, false);
Ciekawostką jest to, że działania nie muszą otwierać nowego okna. Mogą one wykonywać ogólne interakcje z aplikacją bez tworzenia interfejsu użytkownika. Użytkownik może na przykład „polubić” lub „usunąć” wpis w mediach społecznościowych, co spowoduje wykonanie tej czynności na danych lokalnych, a następnie zsynchronizowanie ich z chmurą bez otwierania interfejsu użytkownika (chociaż dobrą praktyką jest wysłanie wiadomości o zmianie danych do wszystkich otwartych okien, aby można było zaktualizować interfejs). W przypadku działania wymagającego interakcji z użytkownikiem otwórz okno, w którym użytkownik będzie mógł udzielić odpowiedzi.
Platformy nie obsługują tej samej liczby działań, a w niektórych przypadkach wcale nie obsługują przycisków akcji powiadomienia. Dlatego zawsze musisz zapewnić rozsądne działanie zastępcze, które będzie zgodne z oczekiwaniami użytkownika, gdyby kliknął powiadomienie.
Jeśli chcesz zobaczyć, jak to działa, zapoznaj się z testami powiadomień Petera Beverloo oraz przeczytaj specyfikację powiadomień lub śledź aktualizacje specyfikacji.