Introdução
A API Notifications permite mostrar notificações ao usuário para determinados eventos, de forma passiva (novos e-mails, tweets ou eventos da agenda) e em interações do usuário, independente da guia em foco. Existe uma especificação de rascunho, mas ela não está em nenhum padrão no momento.
Siga estas etapas simples para implementar notificações em apenas alguns minutos:
Etapa 1: verificar se há suporte para a API Notifications
Verificamos se webkitNotifications é compatível. O nome webkitNotifications é usado porque faz parte de uma especificação provisória. 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 a um site para mostrar notificações
Qualquer um dos construtores mencionados vai gerar um erro de segurança se o usuário não tiver concedido permissões manualmente ao site para mostrar notificações.
Para processar a exceção, use uma instrução try-catch ou o método checkPermission.
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 só funciona em manipuladores de eventos acionados por uma ação do usuário, como eventos de mouse ou teclado, para evitar barras de informações indesejadas. 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 acione 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, talvez seja interessante 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.