Aprendemos muito desde que as Notificações e as Mensagens push foram lançadas no Chrome. Um um feedback específico sobre dispositivos computadores foi que as notificações ficaria visível e visível na tela do usuário até ser dispensado ativamente por ele.
Quando a página está aberta, é possível criar um cronômetro JavaScript simples Feche a notificação. Mas agora vivemos em um mundo com service workers: onde os apps da Web podem que passam do ciclo de vida 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 dar ao desenvolvedor a capacidade de indicam 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 associada que é necessária não definido. Quando definido, indica que, em dispositivos com uma tela grande o suficiente, a notificação deve permanecer prontamente disponível até que o usuário ative ou dispense a notificação.
Isso pode parecer estranho, mas significa que, a menos que seja dito o contrário, a notificação deve ser removido da visualização após um curto período de tempo.
O Chrome 47 (Beta em outubro de 2015) agora é compatível com a opção requireInteraction. A menos que seja explicitamente
fornecidos e definidos como true, todas as notificações no computador serão dispensadas após
aproximadamente 20 segundos. A parte interessante é que o Chrome tem
Acabamos de remover a Central de Notificações de todas as plataformas de computador (exceto do 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 Google Chrome para Android, como as notificações são minimizadas na área da bandeja de notificações, a
A opção requireInteraction será 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'
});
});
}
});
}