Aprendemos muito desde que as notificações e as mensagens push chegaram ao Chrome. Um feedback específico sobre dispositivos para computadores foi que as notificações permaneciam visíveis na tela do usuário até serem dispensadas ativamente por ele.
Quando a página é aberta, é possível criar um timer simples do JavaScript que fecha automaticamente a notificação. Mas agora vivemos em um mundo com service workers: em que os aplicativos da Web podem continuar após a vida útil de uma janela e os service workers são colocados em suspensão o mais rápido possível para economizar recursos. Isso significa que precisamos de outra maneira de criar uma boa experiência para os usuários.
A especificação de notificação foi atualizada recentemente para oferecer ao desenvolvedor a capacidade de indicar que a notificação não deve ser dispensada automaticamente pelo sistema.
Uma notificação tem uma sinalização de preferência de interação de exigência associada que não é definida inicialmente. Quando definido, indica que, em dispositivos com uma tela grande o suficiente, a notificação precisa permanecer disponível até que o usuário a ative ou dispense.
Isso pode parecer estranho, mas significa que, a menos que seja instruído de outra forma, a notificação precisa ser removida da visualização após um curto período.
O Chrome 47 (Beta em outubro de 2015) agora é compatível com a opção requireInteraction. A menos que seja fornecido explicitamente e definido como true, todas as notificações no computador serão dispensadas após cerca de 20 segundos. O interessante é que o Chrome acabou de remover
a Central de Notificações de todas as plataformas de computadores (exceto o ChromeOS). Isso significa que
as notificações minimizadas são consideradas dispensadas e não podem ser acessadas em uma chamada para getNotifications
em um service worker.
No Chrome para Android, como as notificações são minimizadas na área da bandeja de notificações, a
opção requireInteraction é ignorada.
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'
});
});
}
});
}