Então cá estamos novamente. Desta vez vamos falar um pouco sobre o que são Desktop Notifications, para o que são úteis, porque ainda temos que usar com uma certa parcimônia e alguns exemplos funcionais da API.
O que são Desktop Notifications
Vou assumir que toda alma que chega neste post tem um e-mail ou pelo menos sabe para que serve (just kidding :D). Bom, Desktop Notifications é uma maneira de integrar o navegador com o seu ambiente desktop. Quantos softwares você já instalou no seu SO (Sistema Operacional para os menos intimos) ou plugins para o seu navegador, só para saber que tu recebeste um e-mail ou uma menção no Twitter. Com Desktop Notications, nada disso é mais necessário, isso já vem "embutido" no navegador.
Para que servem?
Bom, exemplos são vários, mas podemos citar:
- Integração com o Twitter (Tweetdeck for Chrome já faz o uso disse de forma magistral);
- WebIM (Web Instant Messengers) – O imo.im implementou as notificações quando a janela não está em foco;
- Notificação de e-mails – O GMail já tem o recurso e, até onde sei, é o único a implementar;
Estes são só alguns exemplos funcionais de Desktop Notifications, mas existe uma gama enorme de outras coisas que podem ser feitas, ficando a cargo do desenvolvedor implementar.
Então porque o uso com parcimônia?
Já perceberam que no mundo do desenvolvimento Web sempre tem um "porém" na história? Infelizmente, aqui também não é uma excessão :/ . Nativamente, apenas o motor WebKit tem o recurso. É, nem o Firefox e nem Opera ainda possuem o recurso, muito menos previsão de suportar (#fail). O Internet Explorer, bom, deixa pra lá.
Então temos que fazer um uso correto das notifications (vou tratá-las somente por notifications de agora em diante). Podemos traduzir isso como "adicionar verificações e fallbacks" para cada um desses safados que ainda não implementaram as notifications:
if (!window.webkitNotifications) {
//fallback, mensagem, xingamento, etc
}
Colocando a mão na massa!
Bom, não vamos chorar sobre o leite derramado e vamos usar o Chrome[http://www.google.com/chrome] (sim, ele usa o WebKit[http://www.webkit.org/], não sabia?) para testar as notifications.
Para usar as notifications na sua aplicação, temos que ter noção de três (na verdade quatro) chamadas para a API:
- window.webkitNotifications.checkPermission() – Retorna 0 se o dominio tem acesso as notifications ou 1 se não tiver ainda decidido e 2 caso tenha negado acesso;
- window.webkitNotifications.requestPermission(callback) – Solicita acesso as notifications para o dominio. O callback é executado após a tomada de decisão;
- window.webkitNotifications.createNotification(icon, title, text) – Retorna a instancia da notification. É utilizado o método show() para mostrá-la;
- window.webkitNotifications.createHTMLNotification(link) – Faz a mesma coisa que createNotification, mas carrega um link na notification.
Conhecendo essas chamadas, podemos montar um exemplo simples para demonstrar o potencial das notifications. No caso, vamos fazer um wrapper para gerenciar nossas notifications, e usá-la em um simples e simpático "Bem vindo" ao clicar em um botão (tão anos 90)
Notification = {
support: function(){
if(window.webkitNotifications){
return true;
} else {
return false;
}
},
permission: function(){
return window.webkitNotifications.checkPermission();
},
requestPermission: function(callback){
window.webkitNotifications.requestPermission(function() {
if (callback) {
callback(window.webkitNotifications.checkPermission() == 0);
}
});
},
notify: function(icon, title, text, expires){
if(Notification.permission() == 0){
var notify = window.webkitNotifications.createNotification(icon, title, text);
notify.show();
if(expires){
setTimeout(function(){
notify.cancel();
},
expires
);
}
}
}
}
Explicando:
- Linha 1 – Criamos o wrapper para as funções de notificação;
- Linha 2 a 8 – Função que verifica se o sistema tem suporte a notifications;
- Linha 9 a 11 – Retorna a permissão para a página (0 = Sim, 1 = Não setado, 2 = Não);
- Linha 12 a 18 – Função que solicita a permissão do usuário para mostrar notificações. Caso seja passado um callback, executa ele passando true como parâmetro;
- Linha 19 a 31 – Mostra o notify, com a opção de fechar automaticamente a notification depois de certo tempo (expires, em ms).
Bom, com nosso wrapper criado, é só aplicar ele em nossas páginas. Veja um demo dele em funcionamento.
Luz no fim do túnel
Pelo menos para os usuários do Firefox, existem soluções para "emular" as notifications, através de add-ons. O que eu achei melhor foi o HTML5 Notifications que funcionou perfeitamente no meu ambiente (Ubuntu 11.04), só demonstrando de uma maneira diferente (NotifyOSD).
That's all folks, see you around :)
Mais links sobre o assunto:
Leia também:
Bom post. Só complementando, de usar esta tecnologia, vale a pena salientar que o Firefox em algumas versões retorna TRUE para a verificação de window. webkitNotifications, acredite ou não. Tive este problema. O ideal é por enquanto, deixar fixado removendo quaisquer browsers que não sejam chrome.
abs
Muito interessante Djalma, nos testes que efetuei aqui (Firefox 4 e Firefox 5, ambos rodando no Ubuntu 11.04) não obtive o mesmo resultado que tu. Pode compartilhar a versão do firefox e o OS que tu verificou isso?