Introdução
A API Notifications permite mostrar notificações ao usuário para eventos específicos, tanto de forma passiva (novos e-mails, tweets ou eventos da agenda) quanto em interações do usuário, independentemente de qual guia está em foco. Há uma especificação de rascunho, mas ela não está em nenhum padrão.
Siga estas etapas simples para implementar notificações em poucos minutos:
Etapa 1: verificar se há 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 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 manualmente permissões ao site para mostrar notificações.
Para processar a exceção, você pode usar uma instrução try-catch, mas também pode usar 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 infobar:
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 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 clicar 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, talvez seja necessário encapsular todos esses eventos e ações criando sua própria classe Notification para manter o código mais limpo, embora isso esteja fora do escopo deste tutorial.