Interaction requise pour les notifications – Expérience utilisateur plus fluide des notifications sur ordinateur

Nous avons beaucoup appris depuis que les notifications et les messages push sont arrivés dans Chrome. L'un des commentaires spécifiques concernant les appareils de bureau était que les notifications restent à proximité et visibles sur l'écran de l'utilisateur jusqu'à ce qu'il les ignore activement.

Lorsque la page est ouverte, il est possible de créer un minuteur JavaScript simple qui fermera automatiquement la notification. Mais nous vivons aujourd'hui dans un monde avec un service worker: les applications Web peuvent survivre au-delà d'une fenêtre et les service workers sont mis en veille le plus rapidement possible pour économiser des ressources. Nous avons donc besoin d'un autre moyen de créer une bonne expérience pour les utilisateurs.

La spécification de notification a été récemment mise à jour pour permettre au développeur d'indiquer que la notification ne doit pas être ignorée automatiquement par le système.

Une notification est associée à un indicateur de préférence d'interaction qui est associé, qui est initialement désactivé. Si cette règle est définie, elle indique que sur les appareils dotés d'un écran suffisamment grand, la notification doit rester accessible jusqu'à ce que l'utilisateur l'active ou la ferme.

Cela peut sembler étrange, mais cela implique que, sauf indication contraire, la notification doit être supprimée de l'affichage après une courte période.

Chrome 47 (bêta en octobre 2015) est désormais compatible avec l'option requireInteraction. Sauf si elles sont explicitement fournies et définies sur true, toutes les notifications sur ordinateur seront ignorées au bout de 20 secondes environ. Il est toutefois intéressant de noter que Chrome vient de supprimer le centre de notifications de toutes les plates-formes de bureau (à l'exception de ChromeOS). Cela signifie que les notifications réduites sont considérées comme ignorées et ne sont pas accessibles lors d'un appel à getNotifications par un service worker.

Sur Chrome pour Android, comme les notifications sont réduites dans la zone de la barre de notifications, l'option requireInteraction est ignorée.

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

Tester la fonctionnalité