Le notifiche PPush ti consentono di offrire agli utenti un'esperienza straordinaria come quella di un'app, avvisandoli in caso di aggiornamenti importanti e tempestivi, come i messaggi di chat in arrivo. La piattaforma di notifica è relativamente nuova nei browser e con un numero sempre maggiore di casi d'uso e requisiti aggiunti, stiamo assistendo a molte aggiunte alle API per le notifiche. Non fa eccezione Chrome 50 (beta a marzo 2016), con ben 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 creare un'esperienza coerente,
- tenere traccia degli eventi di chiusura delle notifiche per sincronizzare le notifiche e fornire dati e analisi,
- gestire l'esperienza di notifica quando una sostituisce quella attualmente visualizzata.
In Chrome 50 sono stati aggiunti anche payload per le notifiche push. Per rimanere al corrente dell'API Notifications così come viene implementata in Chrome, segui le spec e lo strumento di monitoraggio dei problemi delle specifiche.
Crea pulsanti di azione accattivanti con icone personalizzate
In un recente post sui pulsanti di azione per le notifiche in Chrome 49, ho detto che non è possibile allegare immagini ai pulsanti di notifica per renderli accattivanti e accattivanti, ma si possono utilizzare i caratteri Unicode per le emoji incorporate e così via. Ora non devi preoccuparti: con questa recente aggiunta 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 di azione varia in base alla piattaforma. Ad esempio, su Android l'icona avrà 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 delle azioni, quindi assicurati di utilizzarle per fornire il contesto dell'azione e non come unico indicatore dell'intenzione.
Infine, dato che le risorse devono essere scaricate, è buona norma ridurre al minimo le dimensioni delle icone e pre-memorizzazione nella cache dell'evento di installazione. Al momento della scrittura di questo articolo, i recuperi delle risorse di notifica in Chrome non vengono ancora instradati tramite il service worker.
Eventi di chiusura delle notifiche
Una funzionalità delle notifiche richiesta di frequente è la possibilità di sapere quando l'utente ha ignorato una notifica. Non abbiamo avuto modo di farlo fino a quando una recente serie di modifiche alla specifica delle notifiche non ha aggiunto un evento notificationclose.
Utilizzando i valori notificationclick e notificationclose, puoi capire in che modo gli utenti interagiscono con le notifiche. Sono lasciati aperti per molto tempo e poi li hanno chiusi attivamente oppure li hanno colti immediatamente?
Un caso d'uso comune è la possibilità di sincronizzare le notifiche tra dispositivi. Se l'utente ignora una notifica sul proprio dispositivo desktop, la stessa notifica deve essere ignorata anche sul dispositivo mobile. Non abbiamo ancora la possibilità di eseguire questa operazione in modalità invisibile (ricorda che per ogni messaggio push deve essere visualizzata una notifica), ma l'utilizzo di notificationclose ti consente di gestire questa funzionalità permettendoti di monitorare lo stato della notifica per l'utente sul tuo server e di sincronizzarlo con gli altri dispositivi mentre l'utente li utilizza.
Per utilizzare l'evento notificationclose, registralo all'interno del service worker. Si attiverà 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 requestInteraction è false o non viene impostato, se la notifica non viene ignorata manualmente dall'utente, ma automaticamente dal sistema, l'eventonotificationclose non viene attivato.
Di seguito è riportata una semplice implementazione. Quando l'utente ignora la notifica, ottieni l'accesso all'oggetto notifica da cui puoi eseguire una logica personalizzata.
self.addEventListener('notificationclose', e => console.log(e.notification));
Puoi verificarlo nel generatore di notifiche; riceverai un avviso alla chiusura della notifica.
Non infastidire gli utenti quando sostituisci una notifica esistente
Sicuramente Zio Ben stava parlando del sistema di notifica e non dei poteri di Peter Parker quando ha detto: "Da un grande potere deriva una grande responsabilità". Il sistema di notifica è un mezzo potente per interagire con gli utenti. Se abusate della sua fiducia, le notifiche verranno disattivate e potresti perderle del tutto.
Quando crei una notifica, puoi impostarla in modo che generi un avviso sonoro o una vibrazione per attirare l'attenzione dell'utente. Inoltre, puoi sostituire una notifica esistente riutilizzando il relativo attributo "tag" su un nuovo oggetto di notifica.
Prima di Chrome 50, ogni volta che creavi una notifica o ne sostituivi una esistente, veniva generato un segnale di vibrazione o veniva riprodotto un avviso sonoro, il che poteva causare frustrazione agli utenti. Ora in Chrome 50 hai il controllo su ciò che accade durante la rinotifica tramite un semplice flag booleano chiamato "renotify". Il nuovo comportamento predefinito quando utilizzi lo stesso tag per le notifiche successive è la modalità silenziosa e, in quanto sviluppatore, devi attivare la "nuova notifica" all'utente impostando il flag su "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Puoi provarlo nel generatore di notifiche.
Gestisci il timestamp mostrato all'utente
Su Android, le notifiche di Chrome mostrano per impostazione predefinita gli orari di creazione nell'angolo in alto a destra. Purtroppo, questa potrebbe non essere l'ora in cui la notifica è stata effettivamente generata dal sistema. Ad esempio, l'evento potrebbe essere stato attivato quando il dispositivo era offline oppure 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 indicare l'ora da visualizzare nella notifica.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Al momento il timestamp è visibile soltanto su Chrome per Android. Anche se non è visibile sui computer, ciò influirà sull'ordine delle notifiche sia su dispositivi mobili che su computer.