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

Conheça os melhores Podcasts para Desenvolvedores

Share this on WhatsAppFique atualizado ouvindo Podcasts Hoje resolvi trazer aqui no blog alguns podcasts que poderão ajudar a vida dos desenvolvedores. Antes de dar as dicas dos podcasts, eu

Criando aplicações robustas com André Baltieri

Share this on WhatsAppVeja como criar projetos bem estruturados Atualmente vejo no mercado diversas propostas de arquitetura de software, muitas delas interessantes e outras chegam dar arrepio só de ver.

Mobile 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,

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