Abbiamo imparato molto da quando le notifiche e la messaggistica push sono state introdotte in Chrome. Uno specifico feedback sui dispositivi di classe desktop riguardava il fatto che le notifiche rimanevano visibili sullo schermo dell'utente finché non venivano ignorate attivamente.
Quando la pagina è aperta, è possibile creare un semplice timer JavaScript che chiude automaticamente la notifica. Ma ora viviamo in un mondo con i worker di servizio: le app web possono superare il ciclo di vita di una finestra e i worker di servizio vengono messi in sospensione il più rapidamente possibile per risparmiare risorse. Ciò significa che abbiamo bisogno di un altro modo per creare un'esperienza positiva per gli utenti.
La specifica delle notifiche è stata aggiornata di recente per consentire allo sviluppatore di indicare che la notifica non deve essere ignorata automaticamente dal sistema.
A una notifica è associato un flag di preferenza che richiede l'interazione, inizialmente impostato su "off". Se impostato, indica che sui dispositivi con uno schermo sufficientemente grande la notifica deve rimanere subito disponibile finché l'utente non la attiva o la ignora.
Potrebbe sembrare strano, ma ciò implica che, a meno che non venga indicato diversamente, la notifica dovrebbe essere rimossa dalla visualizzazione dopo un breve periodo di tempo.
Chrome 47 (beta a ottobre 2015) ora supporta l'opzione requireInteraction. A meno che non sia fornito esplicitamente e impostato su true, tutte le notifiche su computer verranno ignorate dopo circa 20 secondi. La parte interessante, però, è che Chrome ha
di recente rimosso il Centro notifiche da tutte le piattaforme desktop (tranne ChromeOS), il che significa che
le notifiche minimizzate sono considerate chiuse e non sono accessibili in una chiamata a getNotifications
in un worker di servizio.
Su Chrome per Android, poiché le notifiche sono ridotte a icona nell'area della barra delle notifiche, l'opzione requireInteraction viene ignorata.
navigator.serviceWorker.register('sw.js');
function showNotifications() {
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('requireInteraction: true', {
body: 'Requires interaction',
icon: '../images/touch/chrome-touch-icon-192x192.png',
requireInteraction: true,
tag: 'require-interaction'
});
registration.showNotification('requireInteraction: false', {
body: 'Does not require interaction',
icon: '../images/touch/chrome-touch-icon-192x192.png',
requireInteraction: false,
tag: 'no-require-interaction'
});
});
}
});
}