Richiesta di interazione con le notifiche: un'esperienza utente più fluida per le notifiche sul desktop

Abbiamo imparato molto da quando le notifiche e i messaggi push sono arrivati in Chrome. Un feedback specifico relativo ai dispositivi della classe Desktop riguarda il fatto che le notifiche rimangono visibili sullo schermo dell'utente fino a quando non vengono ignorate attivamente dall'utente.

Quando la pagina è aperta, puoi creare un semplice timer JavaScript che chiuderà automaticamente la notifica. Ma ora viviamo in un mondo con i service worker: le app web possono vivere oltre il ciclo di vita di una finestra e i Service worker vengono messi in sospensione il più rapidamente possibile per risparmiare risorse. Ciò significa che abbiamo bisogno di un altro modo per creare una buona esperienza per gli utenti.

Di recente, le specifiche relative alle notifiche sono state aggiornate per offrire allo sviluppatore la possibilità di indicare che la notifica non deve essere ignorata automaticamente dal sistema.

A una notifica è associato un flag di preferenza di interazione, che inizialmente non è impostato. Se impostato, indica che sui dispositivi con uno schermo sufficientemente grande la notifica dovrebbe rimanere facilmente disponibile finché l'utente non la attiva o la elimina.

Potrebbe sembrare strano, ma ciò significa che, se non diversamente indicato, la notifica deve 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 venga fornito esplicitamente e sia impostato su true, tutte le notifiche sul computer verranno ignorate dopo circa 20 secondi. La parte interessante, tuttavia, è che di recente Chrome ha appena rimosso il Centro notifiche da tutte le piattaforme desktop (ma ChromeOS). Ciò significa che le notifiche ridotte a icona vengono considerate come ignorate e non accessibili in una chiamata a getNotifications in un service worker.

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'
        });
        });
    }
    });
}

Prova la demo.