Faz tempo que quero tratar este assunto, visto que já sofri um bocado para fazer as configurações do FCM (Firebase Cloud Messaging) em projetos Ionic, mas aí falam: — Ah, mas é só adicionar o plugin e tá tudo certo… (Modo tableflip ativado).

Na data de escrita deste artigo, estou utilizando as seguintes versões dos frameworks:

Beleza, vamos começar…

Para criar um projeto Ionic, execute o comando

ionic start NomeDoMeuApp --type=angular

Dentro do diretório do seu projeto vamos adicionar o plugin de push:

ionic cordova plugin add phonegap-plugin-push

npm i --save @ionic-native/push

Adicione também as dependências para o rxjs (Necessária para fazer uma subscrição nos eventos do plugin — registro, notificações que chegam, erros…)

npm i --save rxjs

npm i --save rxjs-compat

Vamos precisar executar este projeto em um device físico (qualquer iPhone ou iPad), para vermos as notificações chegando.

Para isso execute os comandos

ionic cordova platform add ios
ionic cordova build ios

Caso de um erro no segundo, não se preocupe, vamos abrir o Xcode com o projeto gerado pelo Ionic e fazer os ajustes por lá, o primeiro erro geralmente é pela falta de uma equipe(ou Euquipe) de desenvolvimento cadastrada no programa de desenvolvedor Apple, para assinar o projeto, navegue até o diretório platforms/ios e execute open NomeDoMeuApp.xcworkspace .

Agora, nas configurações do projeto, na Aba General, atente-se pelo nome do pacote utilizado, deve ser o mesmo usado no AppId na conta de desenvolvedor Apple

Agora podemos rodar o build novamente, mas desta vez pode fazê-lo dentro do Xcode mesmo, para facilitar, pressione command + shift + k para limpar o projeto e command + b para executar o build.

— Ah cara, deu erro de novo, desisto, vou mudar de ramo e vender cosméticos(Nada contra)!

Calma amiguinho, tem jeito pra tudo nessa vida, vamos configurar o Firebase e ele lhe dará algo que vai ajudar nessa caminhada.

Abra o firebase, faça login no mesmo e crie um projeto com um nome qualquer.

No painel principal das configurações do projeto criado anteriormente, vá na parte inferior e clique em iOS:

Agora lembra do nome do pacote do projeto gerado acima, br.com.pacote.app , vamos utilizá-lo:

Registre o App e avance para a próxima etapa e baixe o arquivo GoogleService-Info.plist

Avance as próximas etapas, e abra as configurações do projeto Firebase novamente, e vá na segunda Aba Cloud Messaging , onde poderá ver um local para adicionarmos uma chave gerada na conta de desenvolvedor Apple:

Vamos criar a chave para conexão de serviços externos, na conta de desenvolvedor Apple.

Avance nas opções seguintes, faça o download da chave, e guarde-a em local seguro, pois não será possível realizar um novo download, volte ao Firebase, Configurações de Cloud Messaging, e envie a chave no campo mencionado acima.

Agora, vamos voltar para nosso Xcode, e colocar o arquivo de configuração GoogleService-Info.plist , arrastando o mesmo para dentro do nosso projeto, na barra esquerda do Xcode, logo abaixo do MyApp.

Agora, espero que você já tem o cocoapods instalado em seu Mac (Caso não tenha, faça a instalação aqui), execute o mesmo dentro do diretório MyApp/platforms/ios com o comando pod install , isso fará que as dependências do Firebase sejam devidamente instaladas.

Vamos novamente ao Xcode pressionecommand + shift + k e command + b .

Aqui, deu tudo certo, caso aí tenha dado um erro, deixe-me saber nos comentários.

Vamos escrever um pouco de código( Já tava na hora né :D ).

Abra seu projeto no editor de textos de sua preferência e vamos adicionar a inicialização do plugin de Push no ponto de partida do nosso app, o arquivo app.component.ts , ficando assim:

import { Component } from ‘@angular/core’
import { Platform } from ‘@ionic/angular’
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’
import { StatusBar } from ‘@ionic-native/status-bar/ngx’
import { Push, PushObject } from ‘@ionic-native/push/ngx’

@Component({
  selector: ‘app-root’,
  templateUrl: ‘app.component.html’
})

export class AppComponent {

constructor(
  private platform: Platform,
  private splashScreen: SplashScreen,
  private statusBar: StatusBar,
  private push: Push
) {
  this.initializeApp()
}

initializeApp() {

  this.platform.ready().then(() => {
    this.statusBar.styleDefault()
    this.splashScreen.hide()
    this.push.hasPermission().then(res => {
      if (res.isEnabled) {
        console.log(‘Has permission to send notifications…’)
      } else {
         console.log(‘It doesn\'t has permissions! :(‘)
      }
    })

    const pushObj: PushObject = this.push.init({
      android: {
        senderID: ‘mySenderIdFromFB’
      }, ios: {
        badge: true,
        sound: true,
        alert: true
      }
    })

    pushObj.on(‘registration’).subscribe(res => {
      console.log(`A registration ID: ${res.registrationId}`)
    })

    pushObj.on(‘notification’).subscribe(res => {
      console.log(`A notification has arrived here! ${res.message}`)
    })
    pushObj.on(‘error’).subscribe(res => {
      console.error(`An error has occurred… ${res}`)
    })
  });
 }
}

Feito isso, podemos compilar novamente nosso app com o comando

ionic cordova build ios

Assim vamos executá-lo em um iPhone. Abra o Xcode, procure pelo seu device na lista ao lado do botão de executar e mande rodar…

Acompanhe a execução pelo Xcode, deve aparecer um Token logo abaixo da mensagem A registration ID: -meu-token- , copie este código.

Voltamos no console do Firebase e desta vez vamos enviar nosso push notification.

Clique em Enviar sua primeira mensagem.

Em seguida clique em Testar no dispositivo.

Caso esteja com app aberta, a mesma aparecerá no console do Xcode conforme código escrito acima A notification has arrived here!. Com a app fechada, o push aparecerá na tela inicial do seu iPhone.

É isso aí leitor, caso tenha acontecido algum problema que o seu Push não chegou, não hesite em chamar nos comentários, ficarei muito feliz em ajudar!

Saudações queridos developers, estou aqui para atualizar minha primeira história escrita aqui no Medium, a qual ensina a integrar uma aplicação Android, escrita utilizando o Framework Ionic com o Firebase e suas Push notifications.

Na primeira versão daquele artigo, utilizei o Cordova para fazer o build da aplicação Android, desta vez, quero utilizar o Capacitor, pois o mesmo facilita e agiliza em muito os processos de adicionar plugins nativos, execução e a compilação da aplicação para futuro deploy nas lojas.

Bom, chega de lero lero e vamos ao código, e vou partir da premissa que você já tem configurado o ambiente com Node, Ionic e Android.

Vamos começar criando um projeto Ionic, para este tutorial, irei utilizar o Angular como framework para o frontend, mas sinta-se livre para escolher o que mais lhe agrada, a escolha do framework não intervém no funcionamento das Push notifications. Para isso execute o comando:

ionic start MeuApp --type=angular

Agora, vamos rodar a nossa aplicação para ver se está tudo certo, avance para o diretório da mesma:

cd /MeuApp && ionic serve

Isso faz com que a aplicação seja executada no browser, mas esse não é o foco no momento, é só pra testar mesmo, bora continuar…

Vamos adicionar o Capacitor executando o seguinte comando, ainda dentro do diretório raiz do app:

npm install @capacitor/core @capacitor/cli

Agora vamos inicializar o Capacitor:

npx cap init

Agora para executar a aplicação em um emulador Android ou dispositivo físico, é só executar a seguinte sequência:

npm run build
npx cap add android
npx cap copy
npx cap run android

Você deve ver a aplicação sendo executada no dispositivo selecionado. Agora vamos começar as configurações do Firebase para utilizarmos seus recursos, caso já tenham um projeto lá, é só pegar o arquivo google-services.json para utilizá-lo aqui.

Acesse o console do Firebase com a sua conta Google e em seguida selecione Add Project:

Clique no ícone do Android, para iniciar a criação do app dentro do Firebase.

Preencha o formulário a seguir, até poder fazer o download do google-services.json (Guarde este arquivo). Onde pede o pacote da aplicação, você pode localizá-lo no arquivo capacitor.config.json, ou ainda no AndroidManifest.xml.

Feito o download do json de configuração, vamos adicioná-lo dentro do projeto Android, na pasta app, mais especificamente em:

MeuApp/android/app

Agora vamos adicionar o plugin de Push Notifications:

npm install @capacitor/push-notifications
npx cap sync

Substitua o conteúdo do arquivo capacitor.config.json pelo seguinte:

{
  "appId": "io.ionic.starter",
  "appName": "MeuApp",
  "webDir": "www",
  "bundledWebRuntime": false,
  "plugins": {
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  }
}

Agora, vamos adicionar um trecho de código para recuperar o token do dispositivo para ser usado para futuros envios de Push Notifications, abra o arquivo referente ao ponto de partida do app Ionic, src/app/app.component.ts e vamos substituir pelo seguinte código:

Novamente:

npm run build
npx cap copy
npx cap run android

Executando a aplicação, vamos ao debug, pelo inspector do Chrome, ao abrir o console, poderemos visualizar o Token para enviarmos um Push de teste:

Ao abrir o console, deverá ver a resposta do console.log que colocamos dentro do construtor do app.component.ts

Ao copiar este Token volte ao Firebase, selecionando Cloud Messaging no menu lateral, e em seguida, Send your first message:

Para ver a mensagem chegando, feche a aplicação por enquanto.

Clique no botão Send test message para poder informar o token de teste:

Volte ao emulador ou dispositivo físico e deverá ver a mensagem de teste como no exemplo abaixo.

Ainda não configuramos o ícone, deixarei isso para um outro artigo, pois o mesmo depende de alguns ajustes no projeto Nativo, feito pelo Android Studio. Mas ja adianto, que será necessário um ícone branco em um fundo transparente.

Enviando uma notificação com a aplicação aberta, a mesma será capturada no segundo eventListener que adicionamos no código do app.component.ts.

O código completo para comparação, encontra-se aqui. Lembre-se de substituir o arquivo android/app/google-services.json pelo que você fez download no console do Firebase.

Bom, por este artigo era isso que eu tinha para explicar, caso tenham dúvidas, ou sugestões, fiquem a vontade para comentar, pretendo responder todos sempre que possível. Espero que tenham curtido a leitura, até a próxima!

[DEPRECIADO] — Caso esteja começando um projeto Ionic agora, recomendo utilizar o Capacitor ao invés do Cordova, então, reescrevi esta história e você pode encontrá-la aqui. Se for só uma integração com projeto existente, segue que é sucesso!

[…] sempre vejo uma galera desesperada quando o assunto é push notifications, não sabem por onde começar, ou acham que é algo complicado. Pois eu estou aqui para dizer que não é complicado, bom, nem tanto assim. Bora lá ver.

Primeiramente vamos aos requisitos para criação de um projeto Ionic com cordova para a plataforma Android:

Precisaremos do Node mais recente instalado;

Se já tem, é só seguir para a execução do comando npm i -g ionic cordova;

Certifique-se de ter o Android Studio ou o Android SDK com as build tools devidamente configurados.

Feito isso vamos a geração do projeto:

ionic start MeuAppIncrivel --type=angular

O Ionic irá perguntar qual template de projeto utilizar, para este nosso teste simples utilize o blank.

O comando acima cria um projeto Angular com as dependências do Ionic, agora é navegar até a pasta dele, adicionar a plataforma Android e o plugin para recebermos os push notifications:

cd MeuAppIncrivel

ionic cordova platform add android@latest

Após a adição da plataforma Android no nosso projeto, vamos executá-lo para ver se está tudo indo bem. Para isso, execute o comando ionic cordova run android.

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

ionic cordova plugin add phonegap-plugin-push

npm i @ionic-native/push

Execute novamente o projeto para ver se está tudo bem.

O erro acima é devido a falta do arquivo de configurações do Firebase no projeto Android. Vamos então ao Firebase gerar nosso projeto, e baixar o bendito arquivo. Acesse https://firebase.google.com/, efetue login ou crie sua conta, e no canto superior direito da sua tela, poderá ver um link “Go to console”, “Ir para console” ou ainda “Aceder à consola”, clique neste rapazinho.

Ao clicar em Adicionar projeto, você deverá ver uma tela para informar o nome e aceitar os termos.

Após adicionar o projeto, vamos criar o projeto Android dentro do Firebase, para isso clique no seguinte botão na imagem a seguir:

Agora, utilizando de um editor de textos de sua preferência, abra o arquivo config.xml, nele você poderá ver que existe um id, esse id é o nome do pacote que será utilizado nos seus projetos Android ou iOS, se for o caso apenas copie, utilize este id para a geração do projeto no Firebase.

Após o registro, estará disponível o download do arquivo google-services.json, necessário para rodar nosso app.

Por enquanto vamos guardar nosso arquivo na raiz do projeto, copiando o mesmo em seguida para o seguinte diretório:

/RaizMeuProjeto/platforms/android/app

Agora podemos executar novamente o comando ionic cordova run android para ver se tudo vai bem.

Antes de começar a por a mão no código, vamos habilitar o Firebase Cloud Messaging, para isso no menu lateral do Firebase, abra as configurações do seu projeto e vá na aba Cloud Messaging

Na aba Cloud Messaging, procure pelo “Código do remetente” ou “Sender id”.

Se o projeto executou, bora configurar o Firebase cloud messaging e escrever um pouco de código (Já era hora né).

Dentro do seu editor, procure pelo arquivo app.component.ts, o mesmo deve estar localizado em /MeuAppIncrivel/src/app, vamos adicionar o nosso código de inicialização no ponto de entrada do app.

O arquivo app.component.ts deve ficar parecido com o acima. Adicione o Push na sessão de providers no seu app.module.ts, ficando assim:

Agora vamos executar nosso projeto com o comando ionic cordova run android e abrir o Google Chrome e o seu debugger chamando a seguinte URL: chrome://inspect/#devices e selecionando o seu dispositivo e elemento a ser inspecionado como a seguir:

Selecione inspect e vá em console, poderá ver o texto mostrando o id de registro do Firebase (Uma string grande), copie este token e vamos ao painel do Firebase para enviar nossa primeira notificação:

Vá em “Enviar sua primeira mensagem”.

Volte no debugger do Chrome poderá ver a mensagem recebida.

Com o App minimizado ou fechado é possível ver a notificação:

Acho que é isso para este artigo, um simples “Hello world” para este caso que pode gerar dor de cabeça em alguns desenvolvedores em finais de projeto. Caso encontrem alguma inconformidade, não esqueçam de comentar, sentirei honrado em ajudar.

Push notifications no Android com Ionic 4 e Firebase was originally published in Codengage on Medium, where people are continuing the conversation by highlighting and responding to this story.