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 197 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

Visual Studio 0 Comments

Conheça ferramentas que agilizam o dia a dia do desenvolvedor!

Share this on WhatsAppMelhore sua produtividade com pequenas ferramentas Não é de hoje que alguns profissionais conseguem se destacar mais do que outros na hora do desenvolvimento, enquanto um ta

FrontEnd 0 Comments

O que é Npm, Bower, Gulp, Nuget, TypeScript e Sass?

Share this on WhatsAppVeja o que é e para que serve essas novas ferramentas! Venho hoje através deste post esclarecer o que é e para que serve as ferramentas Npm,

BackEnd 0 Comments

Conheça os operadores implicit e explicit do C#

Share this on WhatsAppE ai pessoal beleza? Sei que ando sumido ultimamente, mas é devido eu estar gravando vídeo aulas para colocar no site Udemy. Resolvi colocar algum conteúdo pago na Udemy

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