Paulo Oliveira Full stack web Developer

Screamer-js - Um plugin js de notificação para Browser

Screamer Logo

Fala pessoal, como é que cês tão?! (:P)

Em um dos projetos que trabalhamos na globo, era preciso uma notificação que demorasse mais para desaparecer e que independente da aba do browser nós estivéssemos nós deveríamos conseguir vê-la. Com isso tivemos a ideia de criar um notificador no browser.

Em um hack-day1 na globo.com eu e o Willian Justen fizemos um plugin javascript sanar esse problema. E esse foi quando o Screamer-js nasceu.

O que é?

screenshot

O screamer-js é um plugin javascript (puro =) ) de fácil configuração utilizando o Web Notification API

Screamer.js is a Vanilla Javascript plugin to provide simple yet fully customisable web notifications using Web Notifications API.

Como usar?

1 - Baixe o screamer-js aqui. 2 - Adicione o js na sua pagina. 3 - Em um arquivo js separado ou numa tag script na própria pagina coloque:

1
2
3
4
5
6
7
8
var options = {
    'title': 'Hello',
    'body': 'World!',
    'icon': 'img.png',
    'fade': 1000
}
var scream = new Screamer(options); // Inicializa o screamer com as opções de notificação
scream.notify(); // Executa a notificação

4 - Pronto! Agora você terá uma notificação na sua pagina.

Opções

As opções do screamer são as seguintes:

  • title (string) - Titulo da notificação. (Obrigatório)
  • body (string) - Mensagem da notificação.
  • icon (string) - Caminho com a imagem da notificação.
  • tag (string) - Identificador único para parar notificações duplicadas.
  • lang (string) - Linguagem da notificação. (Default: en).
  • timeout (integer) - Tempo em milissegundo para esconder a notificação.
  • before (function) - Função de callback chamada depois de exibir a notificação.
  • after (function) - Função de callback chamada antes de exibir a notificação.

Queremos ver na prática!

Aqui você pode ver o Demo do screamer funcionando :)

That's all folks!

Espero que você tenha gostado.

Qualquer duvida, deixe nos comentários! :)


  1. Hack-day: é um hackaton que acontece para os funcionários na globo.com poderem criar o que quiserem! 

comments powered by Disqus