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

Dicas 1Comments

Descubra os segredos dos Bots que levaram Bosolnaro, Lula e outros políticos a se eleger!

Share this on WhatsAppAtualmente mais de 50% do acesso a internet é causada por Bots(Robôs). Bots, são programas(softwares) desenvolvidos para automatizar processos, ou seja, com ele você pode extrair informações

Workshop Maratona Bootstrap gratuito

Share this on WhatsAppAprenda a usar e customizar 3 dos principais plugins com Bootstrap. Que tal 3 dias de aulas ao vivo e gratuitas falando somente de Bootstrap? Neste workshop

Ferramentas 0 Comments

Notepad.cc pode lhe ajudar em seu trabalho, veja como!

Share this on WhatsAppConheça agora o Notepad.cc, um bloco de notas online Notepad.cc é uma ferramenta extremamente simples, seu objetivo é levar o recurso de bloco de anotações em qualquer

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