Push notifications no Android com Ionic 5 e Firebase

Push notifications no Android com Ionic 5 e Firebase

Fala Dev!
Hoje resolvi trazer um artigo que pode ajudar muita gente que trabalha desenvolvendo aplicativos e sites e deseja utilizar push notification em seu projeto.

O que é push notification?

Push notification é uma forma diferente, interessante e eficaz de se comunicar com seus clientes.
Este recurso permite você se comunicar com os usuários que acessam seu site ou que tenha instalado algum aplicativo, seja ele android ou ios.

Como funciona o push notification?

Basicamente seu funcionamento é bem simples, quando um site é acessado ou aplicativo android e ios é aberto, é executado um código que solicita ao push notification firebase que aquele usuário quer ser registrado para receber notificações.

É gerado um TOKEN (uma string enorme criptografada) que pode ser armazenada em seu banco de dados para que o dono do site ou app utilize para enviar mensagens para aquele usuário.

Push notification é free

Bom o Firebase permite que utilizamos o Push Notification gratuitamente e irei mostrar como utilizamos ele neste artigo.

Onde é possível utilizar o Push Notifications

Como mencionei acima podemos utilizar em qualquer aplicação web, independente de tecnologia e também utilizarmos em aplicações mobiles como android e ios.

Implementando Push Notification no Android com Ionic Framework 5

Bom agora chega de conversa e vamos por a mão na massa!

Passo 1 – Montando o ambiente

Primeiro passo é ter o ambiente do Ionic montado, para isso instale o Node.JS. Logo em seguida abra o prompt de comando e vamos instalar o Ionic Framework em sua máquina.

Bom, neste momento já temos o Ionic instalado e vamos para o próximo passo.

Passo 2 – Criando nosso projeto

Para criar nosso projeto é bem simples, no seu prompt de comando acesse um diretório onde ficará seu projeto,

E agora iremos criar nosso projeto Ionic 5, para isso execute o comando

O Ionic-Cli irá perguntar se deseja usar Angular ou React, selecione Angular.
Logo em seguida ele vai perguntar o template, em nosso caso escolhemos o template blank.
Ionic também irá perguntar se deseja usar o Capacitor, eu sempre marco sim, porque na medida que o projeto cresce eu sempre acabo usando.

Passo 3 – Configurando nosso projeto

Chegou o grande momento de iniciarmos as configurações do push notification no android.
Para isso será necessário instalarmos a plataforma android, execute o seguinte comando.

Será gerada uma nova pasta no seu projeto chamada platforms conforme mostrado abaixo:

Agora abra seu emulador ou conecte seu device e configure para que possamos rodar o aplicativo e ver se está tudo funcionando normalmente.

Em nosso exemplo eu irei utilizar um emulador android.
Se você não tem um emulador abra o Android Studio e crie um acessando o botão Configure > AVD Manager e selecione o emulador que desejar, caso ainda não exista crie o de sua preferencia.

Instalando o plugin utilizado para realizar o Push Notification

Agora iremos adicionar o plugin responsável por gerenciar as notificações, com os seguintes comandos:

O comando acima adiciona o plugin no arquivo package.json

Agora iremos mandar baixar os arquivos necessários na pasta node_modules para trabalhar.

Agora com o plugin instalado basta configurar o projeto.

Agora abra o arquivo app.component.ts que fica em D:\Videos\push\MeuApp\src\app, vamos adicionar o código necessário para seu App se registrar no Firebase.

Perceba que adicionamos uma função que ao iniciar o projeto ele irá se registrar no firebase, perceba que deixei o senderId vazio, lá você precisa colocar o código do remetente. Esse código você terá ao criar o projeto na plataforma do Firebase.

Não se esqueça de adicionar o Push em seu provider do arquivo app.module.ts.

Agora vamos nos registrar no Firebase, acesso o site https://console.firebase.google.com/
Se ainda não for cadastrado, se cadastre e se autentique que verá uma tela semelhante a está.

Crie seu projeto e escolha android.

Selecione opção android

Adicione o nome do seu projeto no firebase

O nome do seu projeto fica no arquivo config.xml como podemos ver abaixo:

Agora acesse as configurações de seu projeto


Após acessar as configurações do projeto acesse o menu Cloud Messaging, logo abaixo você terá acesso ao código do remetente.

Copie seu código do remetente e adicione na função initializeFirebase do seu app.component.ts

Após o registro, estará disponível o download do arquivo google-services,json que deverá ser salvo dentro do seu projeto na pasta.

Este arquivo contém informações do seu projeto firebase.

Bom, agora está tudo pronto, basta apenas atualizarmos o nosso emulador ou device com a nova versão do fonte.
Para isso execute os comandos abaixo:

O comando acima atualiza os arquivos alterador na pasta platforms/android

Agora vamos rodar nosso app.

Seu app irá rodar no emulador ou no device.

Abra seu Navegador Chrome na seguinte url chrome://inspect/#devices, ele irá mostrar os devices que estão conectados em seu computador, em nosso caso usamos o emulador. Ao clicar em Inspect você verá seu app dentro das ferramentas de desenvolvedor do Chrome e vai perceber que no console temos o código do seu aparelho que foi registrado no Firebase.

Como podemos ver na imagem, este é seu código registrado no Firebase.

É interessante salvar esse código, pois você poderá mandar mensagem para um único usuário se for necessário.

Vamos enviar nossa primeira mensagem

Acesse o menu do firebase e clique em Cloud Messaging

Agora envie sua primeira mensagem, lembrando que você pode até mesmo agendar um horário para notificar seus clientes.

Em meu caso eu enviei 2 mensagens.

Mesmo com o App fechado sua notificação vai chegar!

Veja na prática como implementar push notifications no android

Bom espero que tenham gostado do conteúdo, não se esqueça de participar de nosso grupo de estudos e se cadastrar para receber novidades do site e receber cupons de cursos gratuitos.

Participe de nossos Grupos de Estudo

Receber novidades do site e receber cupons de desconto e cursos gratuitos

Vejo vocês no próximo artigo!

Previous COMO fazer CRUD em C# com LiteDB (Embedded NoSQL)
Next Como rodar aplicativo android no celular e debugar pelo browser do PC

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

Mobile 1Comments

[IONIC 3] – Selecionar items com ion-Slide e ion-Chip

Share this on WhatsAppOlá galera, tudo bem com vocês?   Hoje vou mostrar aqui, como utilizar o componente ion-slide e ion-chip, e manipular componente em tempo de execução, utilizando também

Mobile 2 Comments

Live 04 – Ionic Framework 5 + Capacitor + Web + Desktop e Mobile

Share this on WhatsAppFala Dev!Resolvi criar uma live no dia 05/maio as 21:30h para batermos um papo sobre o Ionic Framework 5 e entendermos a importância e as vantagens de

Mobile 0 Comments

Curso Grátis Ionic – Estrutura de Pastas e Arquivos do Projeto

Share this on WhatsAppOlá galera, tudo bem? Bom, dando sequência à série “Iniciando com Ionic”, já esta no ar o novo vídeo. Nesse vídeo vamos conhecer um pouco sobre a

2 Comments

  1. BigPhill
    junho 02, 10:04 Reply
    Bom dia Paulo! Muito legal o seu site. Tem muitas dicas que estão ajudando muitíssimo. Você sabe se tem um jeito de gerar os pushs utilizando firebase mas para app web? Vi um tutorial seu sobre a classe notifications no youtube e cheguei ao seu site por ele. Desde já agradeço! Um grande abraço!
    • Paulo Rogério
      junho 11, 12:38 Reply
      Tem sim amigo, mas tem que dar uma olhada na documentação do firebase. Não tenho exemplo pronto para te mandar.

Leave a Reply