Seu Curso

  • Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase font size
  • Default font size
  • Decrease font size

Exibindo notificações fora do browser (com Javascript)

Imprimir
Avaliação do Usuário: / 10
PiorMelhor 

O HTML5 não é tão novo, mas ainda existem várias funcionalidades que muitos desenvolvedores desconhecem, e uma delas é o Web Notifications.

Web Notifications é uma simples API em Javascript utilizada para exibir mensagens para o usuário e funciona mesmo que a página ou o navegador não estejam visíveis. A mensagem é exibida fora do browser e acima de qualquer outro programa aberto pelo usuário, então mesmo que o usuário esteja trabalhando em outra janela ele visualizará a mensagem. Veja uma demonstração:

No entanto, deve-se ficar atento quanto a compatiblidade dos navegadores. As versões mais atuais dos navegadores Firefox, Chrome, Opera e Safari já são compatíveis, enquanto nenhuma versão do Internet Explorer possui suporte. Dados completos e atualizados podem ser obtidos em http://caniuse.com/#feat=notifications.

Segue uma exemplo básico e comentado do uso da API em Javascript:

<!DOCTYPE html>
<html lang="pt-br">
 <head>
 <meta charset="UTF-8">
 <title>Web notification</title>
 </head>
 <body>
 <button onclick="notificarUsuario()">Testar</button>
 <script>
 function notificarUsuario(){
 // Caso window.Notification não exista, quer dizer que o browser não possui suporte a web notifications, então cancela a execução
 if(!window.Notification){
 return false;
 }
 
 // Função utilizada para enviar a notificação para o usuário
 var notificar = function(){
 var tituloMensagem = "Atenção usuário Fulano!";
 var icone = "http://www.seucurso.com.br/images/stories/logo.png";
 var mensagem = "Você recebeu uma nova mensagem em seu email";
 return new Notification(tituloMensagem,{
 icon : icone,
 body : mensagem
 });
 };
 
 // Verifica se existe a permissão para exibir a notificação; caso ainda não exista ("default"), então solicita permissão.
 // Existem três estados para a permissão:
 // "default" => o usuário ainda não deu nem negou permissão (neste caso deve ser feita a solicitação da permissão)
 // "denied" => permissão negada (como o usuário não deu permissão, o web notifications não irá funcionar)
 // "granted" => permissão concedida
 
 // A permissão já foi concedida, então pode enviar a notificação
 if(Notification.permission==="granted"){
 notificar();
 }else if(Notification.permission==="default"){
 // Solicita a permissão e caso o usuário conceda, envia a notificação
 Notification.requestPermission(function(permission){
 if(permission=="granted"){
 notificar();
 }
 });
 }
 };
 </script>
 </body>
</html>

Mais opções para o web notifications podem ser obtidas em https://developer.mozilla.org/en-US/docs/Web/API/Notification/Using_Web_Notifications

Adicionar comentário


Código de segurança
Atualizar

You are here: