Veja como criar notificações no Chrome através da classe Notifications!

Veja como criar notificações no Chrome através da classe Notifications!

E ai pessoal tudo beleza? Bom espero que sim! Hoje resolvi trazer um assunto voltado mais para a parte de frontend, onde iremos abordar um assunto bem interessante que são as notificações.

Acho que nesta altura do campeonato já deu para perceber a importância que uma notificação tem ao utilizarmos em nosso site.

As notificações são possíveis em nosso cenário atual, graças uma classe chamada Notifications, ela pertence a nossa API do HTML 5 e seu proposito é nos permitir exibir notificações ao usuário para eventos como novos e-mails, tweets ou eventos de calendário e também nas interações do usuário, independentemente de qual aba esteja aberta.

Bom chega de conversa e vamos observar um pouco de código!

Verifica se o browser é compatível com a API

Verifica ao carregar a página se o usuário aceitou receber notificações, caso não tenha aceito, é enviado um pedido solicitando a autorização.

Estrutura para criar uma notificação!

É possível adicionar uma ação ao clicar na notificação que é exibida para o usuário!

Para ver como tudo funciona na prática veja o vídeo abaixo:

O fonte utilizado no vídeo pode ser acessado através do meu repositório que está no github
https://github.com/pauloanalista/Usando-Notification-no-Chrome

 

 

Previous Curso de MongoDb com C# em português e gratuito!
Next Criando Componente Accordion List com Ionic 3

About author

Paulo Rogério
Paulo Rogério 206 posts

Sou apaixonado por tecnologia e adoro criar aplicações desktop, web e mobile. Adoro aprender e compartilhar conhecimento, meu hobby é ajudar as pessoas.

You might also like

Participe do bate papo ao vivo sobre o TFS

Share this on WhatsAppE ai pessoal beleza? Bom espero que sim, hoje dando uma passada nos grupos de tecnologia no WhatsApp, percebi que algumas pessoas estavam com dúvida de como

Como mudar de vida (bom emprego ou renda extra)

Share this on WhatsAppFala pessoal, hoje venho abordar um assunto do interesse de muitos. Existem muitas pessoas que reclamam da vida dizendo coisas do tipo “Há eu não tive oportunidade

Adicionando eventos em objetos dinâmicos com jQuery

Share this on WhatsAppVeja como trabalhar com eventos no Jquery Hoje venho com um artigo muito simples mas que pode ajudar muita gente. Ontem navegando em alguns grupos do facebook

3 Comments

  1. Marcelo
    fevereiro 03, 15:51 Reply
    Cara aqui no meu localhost o código funcionou legal e nos navegadores que tenho aqui também, no seu localhost pode não ter funcionado devido a falta do atributo da tag script, type="text/javascript", valeu amigão por compartilhar seus conhecimentos com agente.
  2. alexsodre
    agosto 20, 20:24 Reply
    no celular map funciona? no meu pc funcionou blz, mas no celular nao funciona.
  3. Kravin
    dezembro 05, 13:27 Reply
    Muito bom vídeo, Paulo. Obrigado! Só duas dúvidas que são além desse vídeo seu, mas derrepente você pode ajudar. Existem algo similar que eu possa utilizar no Firefox ? O Ionic, hoje em dia, ainda é uma boa opção em relação a programação para dispositivos móveis ? (Pergunto isso devido as novas tecnologias lançadas). Grande abraço!

Leave a Reply