Azioni di notifica in Chrome 48

All'inizio del 2015 abbiamo introdotto le notifiche e la messaggistica push in Chrome per Android e desktop. È stato un grande passo avanti sul web. Gli utenti potevano iniziare a interagire in modo più approfondito con le esperienze sul web anche quando il browser era chiuso.

Anche se è fantastico poter inviare questi messaggi, l'unica azione che potevi fare con uno di questi messaggi era fare clic e aprire una pagina oppure ignorarla del tutto.

Se osservi le notifiche fornite in modo nativo alle app su piattaforme mobile come iOS e Android, ognuna consente allo sviluppatore di definire azioni contestuali che l'utente può richiamare e con cui può interagire. In Chrome 48 abbiamo ora aggiunto una funzionalità simile a Notifiche web su desktop e Chrome per Android.

Screenshot della notifica

L'aggiunta all'API è piuttosto semplice. Devi solo creare un array di azioni e aggiungerle all'oggetto NotificationOptions quando chiami showNotification da una registrazione di ServiceWorker (direttamente in ServiceWorker o in una pagina tramite navigator.serviceWorker.ready).

Attualmente Chrome supporta solo due azioni per ogni notifica. Alcune piattaforme potrebbero essere in grado di supportarne di più e altre potrebbero non supportarne meno o nessuna piattaforma. Puoi determinare ciò che è supportato dalla piattaforma controllando Notification.maxActions. Negli esempi seguenti supponiamo 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 direttamente icone all'azione (ancora), ma puoi utilizzare le emoji e il set di caratteri Unicode esteso per aggiungere maggiore contesto ai pulsanti di notifica.

Ad esempio:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

Ora che hai creato e aggiornato la notifica 😻, l'utente può interagire con la notifica in futuro. Tutte le interazioni con la notifica attualmente (a partire da Chrome 48) avvengono tramite l'evento notificationclick registrato nel tuo service worker e possono essere un clic generico sulla notifica o un tocco specifico su uno dei pulsanti di azione. Tieni presente che in futuro potrai anche rispondere all'eventonotificationclose.

Per capire quale azione ha eseguito l'utente, devi esaminare la proprietà action dell'evento e poi scegliere se aprire una nuova pagina in cui l'utente possa completare un'azione o 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 dell'applicazione senza creare un'interfaccia utente. Ad esempio, un utente potrebbe selezionare "Mi piace" o "Eliminare" un post di social media che eseguirà l'azione sui dati locali dell'utente e quindi sincronizzarla con il cloud senza aprire una UI (anche se è buona norma inviare un messaggio alla modifica dei dati a qualsiasi finestra aperta 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 fallback ragionevole per un'attività che ti aspetti che l'utente faccia semplicemente facendo clic sulla notifica.

Se vuoi vedere come funziona oggi, dai un'occhiata a Peter Beverloo Notification Test Harness e leggi le specifiche per le notifiche o segui le specifiche man mano che vengono aggiornate.