Nous avons beaucoup appris depuis l'arrivée des notifications et de la messagerie push dans Chrome. Un commentaire spécifique concernant les appareils de classe ordinateur de bureau était que les notifications restaient visibles sur l'écran de l'utilisateur jusqu'à ce qu'il les ferme.
Lorsque la page est ouverte, vous pouvez créer un simple minuteur JavaScript qui fermera automatiquement la notification. Mais nous vivons désormais dans un monde avec des service workers: les applications Web peuvent survivre au-delà de la durée de vie d'une fenêtre et les service workers sont mis en veille aussi rapidement que possible pour économiser des ressources. Nous devons donc trouver un autre moyen de proposer une bonne expérience aux utilisateurs.
La spécification de notification a récemment été mise à jour pour permettre au développeur d'indiquer que la notification ne doit pas être automatiquement ignorée par le système.
Une notification est associée à un indicateur de préférence d'interaction requise, qui n'est initialement pas défini. Si cette valeur est définie, cela signifie que sur les appareils dotés d'un écran suffisamment grand, la notification doit rester facilement disponible jusqu'à ce que l'utilisateur l'active ou l'ignore.
Cela peut sembler étrange, mais cela implique que, sauf indication contraire, la notification doit disparaître de l'écran au bout d'un court laps de temps.
Chrome 47 (bêta en octobre 2015) est désormais compatible avec l'option requireInteraction. Sauf si elle est explicitement fournie et définie sur true, toutes les notifications sur ordinateur sont ignorées au bout d'environ 20 secondes. L'élément intéressant est que Chrome vient récemment de supprimer le centre de notifications de toutes les plates-formes de bureau (sauf ChromeOS). Cela signifie que les notifications réduites sont considérées comme ignorées et ne sont pas accessibles dans un appel à getNotifications dans un service worker.
Dans Chrome pour Android, l'option requireInteraction est ignorée, car les notifications sont réduites dans la zone de la barre des notifications.
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'
});
});
}
});
}