Vinícius Knob

A API de Notificações permite que páginas web controlem a apresentação de notificações do sistema para o usuário final. Essas notificações estão em um nível acima da janela atual da página web, isso permite que elas sejam apresentadas mesmo que a guia não esteja selecionada, ou que você esteja utilizando um programa/aplicativo diferente. A API foi projetada para possui total compatibilidade com sistemas de notificação existentes nas diferentes plataformas.

Em plataformas compatíveis, existem dois passos muito simples para lançar notificações:

Solicitando permissão ao usuário

A solicitação de permissão para envio de notificações é um passo muito interessante. Que mundo seria esse se as notificações estivessem livres para uso desenfrado por todos os sites? Seria o carnaval eterno na web (acho que de qualquer forma isso já está acontecendo com alguns sites). Para evitar o problema clássico do uso sem limites, a API foi criada com uma premissa básica: notificações precisam ser ativadas pelo usuário final.

O seguinte código lança a solicitação de permissão, que nada mais é do que um popup, parecido com um tooptip ou popover, onde existe uma pergunta e as opções de resposta: permitir ou bloquear.

Notification.requestPermission();

Quando solicitar?

Depende. Gosto de pensar que essa decisão tem a ver com "se colocar no lugar do usuário". A maioria dos sistemas solicita a permissão ao carregar a página, mas tudo vai depender do tipo de conteúdo e do público alvo. Pense comigo, o conteúdo pode chamar mais atenção do usuário que a solicitação e ela acabar sendo ignorada. Quando uma solicitação é ignorada ela mantém o status default, ou seja, notificações não serão lançadas. O público alvo pode resultar no mesmo problema, pois se o seu sistema atinge pessoas que tem pouco ou nenhum conhecimento do que seria uma notificação elas podem simplesmente ignorar ou até bloquear (status "denied") a solicitação. Por padrão, os browsers não efetuam múltiplas solicitações de permissão se o usuário já bloqueou a primeira.

Lançando notificações

Após obter a permissão do usuário, seu sistema está apto a lançar notificações. O status da API está "granted" e criar uma notificação é muito simples:

new Notification(title, options);

title: Na notificação, o title fica na parte superior, com mais destaque;
options: Existem diversas opções de configuração, porém as que você realmente precisa conhecer são body e icon. O body recebe um texto mais descritivo, mais longo que o title, e que será apresentado no centro da notificação. Já o icon é uma url de uma imagem para ser apresentada na esquerda da notificação.




Isso é o suficiente para sua notificação ser apresentada ao usuário =)

Na imagem demonstrada acima você pode observar um exemplo de notificação existente no Queiroz.js. Já falei do Queiroz.js aqui no blog. No Queiroz.js, utilizo as notificações para avisar aos usuários de que alguns determinados horários do dia estão próximos de chegar. Isso ajuda consideravelmente o usuário que pode estar efetuando atividades em outras janelas, mas mesmo assim verá a notificação. Esse é um exemplo real, e foi utilizado exatamente da mesma forma que explico acima.

Você deseja que o usuário aceite a permissão, pois ele entende aquilo e sabe do que se trata, ou você simplesmente quer que ele aceite e viva com uma notificação que pode se tornar algo muito estressante e gerar críticas ruins? A maioria dos sites não se importa com a resposta para essa pergunta. Não seja mais um nesse grupo.

Se você utiliza o sistema Dimep Kairos assim como eu, então você precisa conhecer o Projeto Queiroz.js.

Nesse post quero explicar o que é o Projeto Queiroz.js, motivação, finalidade, tecnologias envolvidas, enfim, quero apresentá-lo de uma maneira melhor da que foi feita no README do GitHub, e demonstrar como uma simples extensão para navegador pode facilitar a vida de muita gente.

Queiroz.js é uma extensão JavaScript para o serviço online de ponto chamado Dimep Kairos. Basicamente, a extensão fornece cálculos para facilitar a tomada de decisão no dia-a-dia. Se você tem curiosidade em conhecer o código, ou mesmo participar da criação do mesmo, pode conferí-lo aqui.

Como muitas coisas na área da programação, Queiroz.js nasceu da união de dois ingredientes: problema e conhecimento. Eu me perguntava "por que esse programa não mostra cálculo algum?", depois pensei "vou criar algo em JavaScript para rodar nesse console e logar o que preciso".

Como já foi dito, tudo começou no console de um navegador. Entre um console.log e outro, fui debbugando a interface de ponto, catando elementos, classes, tentando observar os padrões existentes até conseguir trazer para variáveis JavaScript os checkpoints contidos na tela.

Depois do console, foi para um arquivo onde cresceu até atingir a marca de quase 900 linhas de código. Eis a versão 1.0. O formato userscript ganhou lugar e as extensões Tampermonkey no Chrome e Grancemonkey no Firefox começaram a serem utilizadas como gerenciadores para guardar e executar o script. Nesse ponto o arquivo já estava rolando em conversas de Skype e e-mails.

A versão 2.0 foi marcada pela completa reescrita da estrutura do código. Com Gulp, consegui modularizar. Já estava sendo utilizado o Revealing Module Pattern, então não foi tão difícil separar em arquivos, e colocar o Gulp para automatizar diversas tarefas como concatenação e minificação.

A versão 3.0 teve uma grande reescrita do módulo core. Esse módulo é responsável por ordenar a chamada de cada um dos outros módulos fazendo com que todas as operações aconteçam em ordem, desde a coleta dos dados até a apresentação dos resultados. Essa versão também disponibilizou a primeira possibilidade de interação com o usuário: a funcionalidade DayOff, que permite "desligar" dias da semana que são feriados, ou coisas do tipo. Alguns commits depois, surgiu o TimeOn que permite informar folgas em horas. Recentemente, foi incluído a integração com Notifications API.

Não existe mistério. O código literalmente lê a view, coleta os valores de ponto, efetua as conversões para objetos Date e String, efetua cálculos em milisegundos e renderiza novos componentes em tela apresentando todos cálculos em formato humano. Tudo com JavaScript.

A montagem dos componentes HTML também é feita em JavaScript. Entretanto, antes da versão 3.0, foi feita uma propaganda sobre a mesma utilizando um modal. Esse modal foi feito em HTML puro, Gulp fazia a minificação, injetava em uma variável String utilizando replacement, depois renderizava em tela utilizando innerHTML.

Tudo na extensão é JavaScript. A estrutura que não é. O projeto hoje possui HTML, CSS, Strings e JavaScript. A união de tudo isso ocorre graças ao Gulp. Se você olhar no GitHub verá que existem arquivos separados para cada coisa, mas o que realmente é utilizado encontra-se na pasta dist, arquivo queiroz.min.js, que é um compilado de todos os módulos/arquivos.

Bom, em primeiro lugar: Conhecimento e Experiência. Queiroz.js me possibilitou conhecer inúmeras tecnologias, tanto novas como aprofundar as já conhecidas. Git e GitHub, por exemplo, mesmo utilizando no trabalho, hoje posso dizer que tenho muito mais conhecimento em Git Distribuído do que tinha antes. Padrões de Projeto com JavaScript também é algo muito bom e fácil de ser utilizado: Revealing Module Pattern, Observer Pattern e Module Pattern dão vida e organização ao Queiroz.js. Gulp.js é algo que realmente me deixou feliz: um automatizador de tarefas extremamente fácil de utilizar e graças ao Gulp.js a versão minificada e distribuída é tão simples de ser criada.

Em segundo lugar: Networking. Você realmente percebe que nada pode ser criado sozinho e considerado algo suficiente a todos. Receber constantemente opiniões de inúmeros colegas de profissão é algo incrível. Por diversas vezes eu respondo: "Como eu não pensei nisso?!". E imediatamente eu anoto para incluir.

Queiroz.js tem muito que evoluir ainda, que tal fazer parte disso também?

Nos dias 25 e 26 de agosto de 2017 aconteceu em Porto Alegre o evento BrazilJS Conf 2017, o qual tive o prazer de participar. O evento é focado no universo JavaScript, porém se você acha que verá pessoas mostrando como criar uma variável ou fazer um array na linguagem, você está errado!

Depois desse evento percebi como me acomodei com as situações do cotidiano. Aprendendo um framework aqui, um plugin ali, e pronto, está tudo bem para meu portifólio pessoal de ferramentas de sucesso. Eu estava errado.

É nessas ocasiões, como no BrasilJS, que volto a perceber como a área de TI corre, voa. A quantidade de novas tecnologias que já estão a pleno vapor, prontas para serem exploradas, e eu aqui no meu mundinho perfeito. Não posso diminuir o passo!

Dentre os assuntos do evento, selecionei alguns que me chamaram atenção e que provavelmente serão foco de estudos nos próximos tempos: