Na początku 2015 roku wprowadziliśmy wiadomości push i powiadomienia w Chrome na Androida i komputery. To był świetny krok naprzód w internecie. Użytkownicy mogą wchodzić w głębsze interakcje z internetem nawet po zamknięciu przeglądarki.
Chociaż wysyłanie takich wiadomości jest świetnie, jedynie możliwe było ich kliknięcie i otwarcie strony lub zamknięcie.
Jeśli spojrzysz na powiadomienia wysyłane bezpośrednio do aplikacji na platformy mobilne, np. iOS i Androida, pozwalają one deweloperowi zdefiniować działania kontekstowe, które użytkownik może wywoływać i z którymi może wchodzić w interakcje. W Chrome 48 dodaliśmy podobną możliwość do powiadomień internetowych na komputerze i w Chrome na Androida.
Dodatek do interfejsu API jest dość prosty. Wystarczy utworzyć tablicę działań i dodać je do obiektu NotificationOptions podczas wywoływania showNotification z rejestracji ServiceWorker (bezpośrednio w obiekcie ServiceWorker lub na stronie za pomocą navigator.serviceWorker.ready).
Obecnie Chrome obsługuje tylko 2 działania na każdym powiadomieniu.
Niektóre platformy mogą być w stanie obsługiwać więcej, a inne – mniej lub wcale. Aby sprawdzić, co obsługuje platforma, zaznacz Notification.maxActions. W przykładach poniżej 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żna (na razie dodać ikon) bezpośrednio do działania, 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 zmianie jego wyglądu 😻, użytkownik może w przyszłości wejść w interakcję z powiadomieniem. Interakcje z powiadomieniem (od Chrome 48) są obecnie rejestrowane za pomocą zdarzenia notificationclick zarejestrowanego w skrypcie service worker i może to być ogólne kliknięcie powiadomienia lub kliknięcie jednego z przycisków akcji. Na marginesie: w przyszłości będziesz też mieć możliwość odpowiadania napowiadomienieo wydarzeniu.
Aby dowiedzieć się, jakie działanie wykonał użytkownik, musisz sprawdzić właściwość action w związku z zdarzeniem, a następnie wybrać, czy chcesz otworzyć nową stronę, na której użytkownik może wykonać działanie, czy też wykonać je 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);
Co ciekawe, działania nie muszą otwierać nowego okna, mogą wykonywać ogólne interakcje z aplikacją bez tworzenia interfejsu użytkownika. Użytkownik może na przykład polubić lub usunąć posta w mediach społecznościowych, który wykonałby czynność na danych lokalnych użytkownika, a następnie zsynchronizować go z chmurą bez otwierania interfejsu użytkownika (chociaż dobrze jest wysyłać wiadomość o zmianie danych we wszystkich otwartych oknach, aby umożliwić aktualizację interfejsu). W przypadku czynności, które wymagają interakcji użytkownika, otwiera się okno, w którym może on odpowiedzieć.
Platformy nie będą obsługiwać takiej samej liczby działań, a w niektórych przypadkach w ogóle nie będą obsługiwać przycisków działań związanych z powiadomieniem, więc musisz zadbać o to, aby zawsze można było w rozsądny sposób wykonać zadanie, którego się spodziewasz, aby użytkownik po prostu kliknął powiadomienie.
Jeśli chcesz zobaczyć, jak to wygląda w praktyce już dziś, sprawdź Peter Beverloo's Notification Test Harnes i przeczytaj specyfikację powiadomień. Możesz też śledzić specyfikację w miarę jej aktualizacji.