Apresentando Notificações Desktop no Navegador (Novo Padrão da W3C) com JS

Muitos por ai devem ter visto uma janelinha de notificação do Gmail ao receber uma mensagem na caixa de entrada, bom no começo achei que era um recurso exclusivo do Gmail e Google Chrome mas para minha surpresa não.

Estas notificações não foram inventadas exclusivamente para o Google Chrome, na verdade é um padrão W3C que está sendo implementado aos poucos nos navegadores.

Referência: http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html

Até o momento em testes meus, nas novas versões dos navegadores (exceto safari e internet explorer) estão sendo exibidas corretamente, infelizmente ainda não achei um modo de personalizar o estilo da mesma, mas já está de bom tamanho.

Bom chega de papo e vamos ao exemplo conforme abaixo.


<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<script type="text/javascript">
// Solicita a permissão para realizar as notificações
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
// Função para exibir as notificações
function NofiticacaoGoogleChrome() {
if (!Notification) {
alert('Notificações de área de trabalho que não estão disponíveis no seu navegador. Tente com o navegador Google Chrome');
return;
}

if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Titulo da Notificação - Nome do Site', {
icon: 'https://cdn3.iconfinder.com/data/icons/ose/Warning.png',
body: "Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos.",
});

notification.onclick = function () {
window.open("http://site.com.br/pagina.html");
};

}

}
</script>

</head>
</body>

<script type="text/javascript">
window.onload = function(){
NofiticacaoGoogleChrome();
}
</script>
</body>
</html>

 

Charles Corrêa on FacebookCharles Corrêa on GoogleCharles Corrêa on PinterestCharles Corrêa on RssCharles Corrêa on TwitterCharles Corrêa on VimeoCharles Corrêa on Youtube
Charles Corrêa
Administrador dos Sites Charles Corrêa, Blog Charles Corrêa e outros mais, programador web deste 2002 e sempre se atualizando as novas tendência do mercado, trabalho com soluções para SMS Marketing, E-mail Marketing, SEO, Mídias Sociais e moderador do fórum da Comunidade Brasileira do PHP-Fusion Brasil.
Também trabalhando com Internet Marketing desde 2004.

Um comentário sobre “Apresentando Notificações Desktop no Navegador (Novo Padrão da W3C) com JS

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Leia o post anterior:
Como pesquisar por valores NULL (Nulos) ou Not NULL (Não Nulos) em uma tabela no MySQL?

Os operadores de comparação IS NULL e IS NOT NULL são usados quando precisamos verificar se determinados campos de nossas...

Fechar