Aprendemos muito desde que as notificações e a mensagem push foram lançadas no Chrome. Um feedback específico sobre dispositivos de classe desktop foi que as notificações ficariam visíveis na tela do usuário até que ele as dispensasse.
Quando a página está aberta, é possível criar um timer simples em JavaScript que fecha a notificação automaticamente. Mas agora vivemos em um mundo com service worker: em que os Progressive Web Apps podem viver além da 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 permitir que o desenvolvedor indique que a notificação não deve ser dispensada automaticamente pelo sistema.
Uma notificação tem uma flag de preferência de interação obrigatória associada que não está definida. Quando definido, indica que, em dispositivos com uma tela suficientemente grande, a notificação precisa permanecer disponível até que o usuário a ative ou dispense.
Isso pode parecer estranho, mas implica que, a menos que seja informado o contrário, a notificação será removida da visualização após um curto período.
O Chrome 47 (Beta em outubro de 2015) agora oferece suporte à opção requireInteraction. A menos que seja explicitamente
fornecido e definido como true, todas as notificações no computador serão dispensadas após
aproximadamente 20 segundos. O interessante é que o Chrome
removeu recentemente a central de notificações de todas as plataformas de área de trabalho (exceto o ChromeOS). Isso significa que
as notificações minimizadas são consideradas dispensadas e não são acessíveis em uma chamada para getNotifications
em um worker de serviço.
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'
});
});
}
});
}