Introdução
A API Notifications permite mostrar notificações ao usuário sobre determinados eventos, tanto de forma passiva (novos e-mails, tweets ou eventos da agenda) quanto nas interações do usuário, independente da guia em foco. Há uma especificação de rascunho, mas não está em nenhum padrão.
Você pode seguir estas etapas simples para implementar notificações em apenas alguns minutos:
Etapa 1: verificar o suporte à API Notifications
Verificamos se webkitNotifications é compatível. O nome webkitNotifications é porque ele faz parte de uma especificação de rascunho. A especificação final terá uma função notifications().
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
Etapa 2: permitir que o usuário conceda permissões para que um site mostre notificações
Qualquer um dos construtores que mencionamos vai gerar um erro de segurança se o usuário não tiver concedido manualmente permissões ao site para mostrar notificações.
Para gerenciar a exceção, use uma instrução try-catch, mas também o método checkPermission para a mesma finalidade.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Se o aplicativo da Web não tiver permissões para mostrar notificações, o método requestPermission vai mostrar uma barra de informações:
No entanto, é muito importante lembrar que o método requestPermission funciona apenas em manipuladores de eventos acionados por uma ação do usuário, como eventos de mouse ou teclado, para evitar barras de informações não solicitadas. Nesse caso, a ação do usuário é o clique no botão com o ID "show_button".
O snippet acima nunca vai funcionar se o usuário não tiver clicado explicitamente em um botão ou link que aciona o requestPermission em algum momento.
Etapa 3: anexar listeners e outras ações
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Neste ponto, convém encapsular todos esses eventos e ações criando sua própria classe de notificação para manter o código mais limpo, embora isso esteja fora do escopo deste tutorial.