22

Tenho uma aplicação na qual preciso enviar notificações para o usuário, e gostaria que estas aparecessem no desktop, conforme o exemplo abaixo. É possível fazê-lo com JavaScript? Se sim, como? Não queria utilizar o alert(), pois o acho inconveniente. Não precisa funcionar em outros navegadores.

Exemplo de noficicação do "Checker Plus"

exemplo

4
  • 1
    Você provavelmente vai receber diversas respostas com sugestões de implementação. Ainda assim, dá uma olhada nesse plugin pra jQuery beeeemmmm bacana: notifyjs.com Commented 17/01/2014 às 1:15
  • @LuizVieira, não encontrei a parte de notificações para desktop nesse plugin. Commented 17/01/2014 às 2:39
  • Da uma olhada aqui: github.com/irclife/ichat.io/blob/master/assets/javascripts/… Praticamente eu criei um method generico dentro desse projeto onde ele identifica o Browser e gera a notificação!
    – avelino
    Commented 17/01/2014 às 5:19
  • Ah, essa não faz notificação no desktop, foi mals. Na verdade a que faz no Desktop é essa aqui: github.com/alexgibson/notify.js (que é construida sobre a API Notification da resposta do @mgibsonbr). Commented 17/01/2014 às 11:51

1 Resposta 1

25

Há uma funcionalidade sendo planejada para o HTML5 chamada Notification (no momento somente suportada [no desktop] pelos Firefox, Chrome e Safari):

Notification.requestPermission(/* opcional: callback */);

...

var notification = new Notification("Título", {
    icon: 'https://i.sstatic.net/dmHl0.png',
    body: "Texto da notificação"
});
notification.onclick = function() {
    window.open("http://stackoverflow.com");
}

Exemplo no jsFiddle.


Solução específica para o WebKit

Você pode fazê-lo através de window.webkitNotifications, conforme o exemplo abaixo:

var havePermission = window.webkitNotifications.checkPermission();
if (havePermission == 0) {
  // 0 is PERMISSION_ALLOWED
  var notification = window.webkitNotifications.createNotification(
    'https://i.sstatic.net/dmHl0.png',
    'Chrome notification!',
    'Here is the notification text'
  );

  notification.onclick = function () {
    window.open("https://stackoverflow.com/a/13328397/1269037");
    notification.close();
  }
  notification.show();
} else {
    window.webkitNotifications.requestPermission();
}

Exemplo no jsFiddle. Ao clicar pela primeira vez, o browser pedirá permissão ao usuário para exibir notificações. Após aceita, futuros cliques vão exibir a notificação.

Nota: de acordo com a API do chromium (base do Google Chrome, para quem não sabe), o método requestPermission precisa ser chamado em resposta a uma ação do usuário, caso contrário não terá efeito.

This method should only be called while handling a user gesture; in other circumstances it will have no effect.

Entretanto, uma vez que a permissão foi concedida, você poderá chamar createNotification quando quiser (talvez em resposta a um polling no servidor, ou a uma mensagem de um WebSocket, etc). O requestPermission também aceita um callback, se você quiser ser notificado quando o usuário aceitar/recusar a permissão.

Há também uma funcionalidade chamada rich notifications - que extende bastante os tipos de conteúdos suportados na notificação - mas não a conheço em detalhes. Link para a API.

Fonte do código de exemplo: essa resposta no SOEN

5
  • Muito interessante isto! À suporte para este tipo de cenários em outros navegadores? Off-topic, mas fiquei curioso :)
    – Zuul
    Commented 17/01/2014 às 1:41
  • @Zuul Há um padrão sendo plenejado, mas no momento apenas o Chrome e o Firefox já dão suporte a ele.
    – mgibsonbr
    Commented 17/01/2014 às 1:50
  • @Zuul atualizei a resposta com um exemplo usando esse novo padrão.
    – mgibsonbr
    Commented 17/01/2014 às 2:12
  • Muito bom, vou brincar um pouco com isso no final de semana! (é nestes momentos que o sistema deveria permitir mais que um UpVote)
    – Zuul
    Commented 17/01/2014 às 2:42
  • Excelente resposta.
    – BillRizer
    Commented 29/08/2017 às 17:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .