Avaliação do Usuário

Estrela inativaEstrela inativaEstrela inativaEstrela inativaEstrela inativa
 

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:

{code}

<!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>

{/code}

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