Le notifiche push ti consentono di offrire ai tuoi utenti un'esperienza simile a quella di un'app, avvisandoli di aggiornamenti importanti e tempestivi, come i messaggi di chat in arrivo. La piattaforma di notifica è relativamente nuova nei browser e, man mano che vengono definiti sempre più casi d'uso e requisiti, stiamo assistendo a molte aggiunte alle API per le notifiche. Chrome 50 (beta a marzo 2016) non fa eccezione, con non meno di quattro nuove funzionalità che offrono agli sviluppatori un maggiore controllo sulle notifiche. Avrai la possibilità di:
- aggiungere icone ai pulsanti di notifica.
- modificare il timestamp per contribuire a creare un'esperienza coerente,
- monitorare gli eventi di chiusura delle notifiche per contribuire a sincronizzare le notifiche e fornire analisi.
- Gestire l'esperienza di riattivazione della notifica quando una notifica sostituisce quella attualmente visualizzata.
Chrome 50 ha anche aggiunto i payload per le notifiche push. Per non perderti le novità sull'API Notifications così come è implementata in Chrome, segui la specifica e il tracker dei problemi relativi alla specifica.
Crea pulsanti di azione accattivanti con icone personalizzate
In un recente post sui pulsanti di azione delle notifiche in Chrome 49, ho accennato al fatto che non puoi allegare immagini ai pulsanti di notifica per renderli eleganti e accattivanti, ma puoi utilizzare i caratteri Unicode per inserire emoji in linea e così via. Ora non devi più preoccuparti: con questa recente aggiunta ora puoi specificare un'immagine sul pulsante di azione:
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'}]
});
L'aspetto dell'icona dell'azione varia in base alla piattaforma. Ad esempio, su Android all'icona verrà applicato un filtro grigio scuro in Lollipop e versioni successive e un filtro bianco prima di Lollipop, mentre su computer sarà a colori. (Nota: è in corso una discussione sul futuro di questa funzionalità su computer.) Alcune piattaforme potrebbero non essere nemmeno in grado di visualizzare le icone di azione, quindi assicurati di utilizzarle per fornire contesto all'azione e non come unico indicatore dell'intenzione.
Infine, poiché le risorse devono essere scaricate, è buona prassi mantenere le icone il più piccole possibile e pre-cachearle nell'evento di installazione. Al momento della stesura di questo articolo, i recuperi delle risorse di notifica in Chrome non vengono ancora inoltrati tramite il service worker.
Eventi di chiusura della notifica
Una funzionalità richiesta di frequente per le notifiche è la possibilità di sapere quando l'utente ha ignorato una notifica. Non avevamo modo di farlo finché una recente serie di modifiche alla specifica delle notifiche non ha aggiunto un evento di chiusura della notifica.
Utilizzando l'evento notificationclick e l'evento notificationclose puoi comprendere in che modo gli utenti interagiscono con le notifiche. Li lascia aperti per molto tempo e poi li ignora attivamente o li gestisce subito?
Un caso d'uso comune è la possibilità di sincronizzare le notifiche tra dispositivi. Se l'utente ignora una notifica sul proprio computer, la stessa notifica deve essere ignorata anche sul suo dispositivo mobile. Non abbiamo ancora la possibilità di eseguire questa operazione in modo silenzioso (ricorda che ogni messaggio push deve avere una notifica visualizzata), ma utilizzando notificationclose hai la possibilità di gestire questa operazione monitorando lo stato della notifica per l'utente sul tuo server e sincronizzandolo con gli altri dispositivi man mano che li utilizza.
Per utilizzare l'evento notificationclose, registralo all'interno del tuo service worker e verrà attivato solo quando l'utente ha ignorato attivamente una notifica, ad esempio se ignora una notifica specifica o tutte le notifiche nella barra delle app (su Android).
Se il flag requireInteraction è falso o non impostato, se la notifica non viene ignorata manualmente dall'utente, ma automaticamente dal sistema, l'evento notificationclose non viene attivato.
Di seguito è riportata un'implementazione semplice. Quando l'utente ignora la notifica, hai accesso all'oggetto notifica da cui puoi eseguire la logica personalizzata.
self.addEventListener('notificationclose', e => console.log(e.notification));
Puoi testarlo nel Generatore di notifiche. Riceverai un avviso quando chiudi la notifica.
Non infastidire gli utenti quando sostituisci una notifica esistente
Sono abbastanza sicuro che zio Ben parlava del sistema di notifiche e non dei poteri di Peter Parker quando diceva "Da un grande potere derivano grandi responsabilità". Il sistema di notifiche è un mezzo efficace per interagire con gli utenti. Se abusi della loro fiducia, disattivano tutte le notifiche e potresti perderle del tutto.
Quando crei una notifica, puoi impostarla in modo che emetta un avviso acustico o vibri per attirare l'attenzione dell'utente. Inoltre, puoi sostituire una notifica esistente riutilizzandone l'attributo "tag" in un nuovo oggetto di notifica.
Prima di Chrome 50, ogni volta che creavi una notifica o ne sostituivi una esistente, veniva eseguito un pattern di vibrazione o veniva riprodotto un avviso acustico, il che poteva causare frustrazione per gli utenti. Ora in Chrome 50, hai il controllo su ciò che accade durante la nuova notifica tramite un semplice flag booleano chiamato "renotify". Il nuovo comportamento predefinito quando si utilizza lo stesso "tag" per le notifiche successive è di essere silenzioso e, in qualità di sviluppatore, devi attivare la "nuova notifica" all'utente impostando il flag su "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Puoi provare questa funzionalità nel Generatore di notifiche.
Gestire il timestamp visualizzato all'utente
Su Android, per impostazione predefinita le notifiche di Chrome mostrano la data e l'ora di creazione nell'angolo in alto a destra. Purtroppo, questo potrebbe non essere il momento in cui la notifica è stata effettivamente generata dal sistema. Ad esempio, l'evento potrebbe essere stato attivato quando il dispositivo era offline o la notifica potrebbe essere visualizzata per una riunione imminente. A partire da Chrome 50, Chrome ha aggiunto una nuova proprietà 'timestamp' che consente agli sviluppatori di fornire l'ora da visualizzare nella notifica.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Al momento il timestamp è visibile solo su Chrome per Android. Anche se non è visibile su computer, influisce sull'ordine delle notifiche sia su dispositivi mobili che su computer.