All'inizio del 2015 abbiamo introdotto la messaggistica push e le notifiche in Chrome per Android e computer. È stato un grande passo avanti sul web. Gli utenti potevano iniziare a interagire più a fondo con le esperienze sul web anche quando il browser era chiuso.
È fantastico che tu possa inviare questi messaggi, ma l'unica cosa che potevi fare con uno di questi era fare clic e aprire una pagina o ignorarlo del tutto.
Se esamini le notifiche fornite in modo nativo alle app sulle piattaforme mobile come iOS e Android, ognuna consente allo sviluppatore di definire azioni contestuali con cui l'utente può interagire e che può richiamare. In Chrome 48 abbiamo aggiunto una funzionalità simile alle notifiche web su computer e Chrome per Android.
L'aggiunta all'API è piuttosto semplice. Devi solo creare un array di azioni e aggiungerle all'oggetto NotificationOptions quando chiami showNotification da una registrazione ServiceWorker (direttamente nel ServiceWorker o in una pagina tramite navigator.serviceWorker.ready).
Al momento Chrome supporta solo due azioni per ogni notifica.
Alcune piattaforme potrebbero essere in grado di supportare più dispositivi, mentre altre meno o nessuno. Puoi determinare cosa supporta la piattaforma controllando
Notification.maxActions. Nei seguenti esempi si presuppone che la piattaforma supporti due azioni.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
Verrà creata una notifica semplice con due pulsanti. Tieni presente che non è possibile aggiungere icone direttamente all'azione (almeno per il momento), ma puoi utilizzare le emoji e il set di caratteri Unicode esteso per aggiungere più contesto ai pulsanti delle notifiche.
Ad esempio:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
Ora che hai creato una notifica e le hai dato un aspetto 😻, l'utente potrebbe interagire con la notifica in un secondo momento. Al momento (a partire da Chrome 48), tutte le interazioni con la notifica vengono trasmesse tramite l'evento notificationclick registrato nel tuo service worker e possono essere un clic generale sulla notifica o un tocco specifico su uno dei pulsanti di azione. Nota a margine: in futuro potrai anche rispondere all'eventonotificationclose.
Per capire quale azione ha eseguito l'utente, devi ispezionare la proprietà action nell'evento e poi hai la possibilità di aprire una nuova pagina per consentire all'utente di completare un'azione o di eseguire l'attività in background.
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);
La cosa interessante è che le azioni non devono aprire una nuova finestra, ma possono eseguire interazioni generali con l'applicazione senza creare un'interfaccia utente. Ad esempio, un utente potrebbe mettere "Mi piace" o "Elimina" a un post sui social media, che eseguirà l'azione sui dati locali dell'utente e li sincronizzerà con il cloud senza aprire un'interfaccia utente (anche se è buona norma inviare un messaggio per segnalare la modifica dei dati a tutte le finestre aperte in modo che l'interfaccia utente possa essere aggiornata). Per un'azione che richiede l'interazione dell'utente, apri una finestra in cui l'utente può rispondere.
Poiché le piattaforme non supportano lo stesso numero di azioni o, in alcuni casi, non sono in grado di supportare i pulsanti di azione di notifica, devi assicurarti di fornire sempre un'opzione di riserva sensata per un'attività che è ciò che ti aspetteresti che l'utente faccia se facesse clic sulla notifica.
Se vuoi vedere questa funzionalità in azione oggi stesso, dai un'occhiata al test di notifica di Peter Beverloo e consulta la specifica delle notifiche o segui la specifica man mano che viene aggiornata.