Firebase: Push Notification com Ionic 3

Dando continuidade a minha série de artigos sobre Firebase, o primeiro serviço que eu irei demonstrar, será o de Push Notification. Para quem ainda não leu o primeiro artigo dessa série, segue o seu link: Introdução ao Firebase.

Para que você possa ter um melhor entendimento, eu irei implementar esse serviço em um app de notícias, desenvolvido no artigo: Ionic 3: Infinite Scroll, onde demostrei como consumir notícias de uma das API’s do The New York Times.

Clonando o projeto

O primeiro passo será clonar o app. Para isso, digite no seu terminal o comando abaixo:

git clone https://github.com/programadriano/ionic-NYT

Com o projeto clonado, você irá precisar de uma IDE para os próximos passos, eu irei utilizar o Visual Studio Code, mas você pode utilizar uma de sua preferência.

Registrando o APP no Firebase

Agora que você já tem o projeto, o próximo passo será registrar ele no Firebase. Para isso, abra o console do Firebase no link e crie um novo projeto. Para esse artigo, eu irei chamar de pushNYT, as outras opções eu irei deixar como default. Você pode ver esse passo na imagem abaixo:

Com o projeto criado, clique em Add Firebase to your Android app e preencha os campos com os dados do seu projeto.

• Android package name: nome do pacote do seu projeto, você pode encontrar ele no arquivo config.xml
• App nickname (optional): Apelido do projeto na console do Firebase
• Debug signing certificate SHA-1 (optional): Chave da assinatura do seu projeto, quando você publicar o seu projeto na loja do google, você irá precisar gerar esse certificado, mas para esse artigo pode deixar em branco.

Caso você não tenha encontrado o seu arquivo config.xml, você irá precisar adicionar a plataforma Android no seu projeto. Para isso, basta executar o comando ionic cordova platform add android no seu Terminal.

Agora que o seu projeto está registrado, faça download do arquivo google-services.json e adicione ele na raiz do seu projeto, em seguida execute os comandos abaixo no seu terminal:

cordova plugin add cordova-plugin-fcm --save
npm i <a href="http://twitter.com/ionic">@ionic</a>-native/push

Assim que os comandos finalizarem, registre o push nos seus providers:

Configurando o APP

Com o seu app registrado, vamos implementar o código necessário para o envio do primeiro push.

Abra o projeto no seu editor de textos, em seguida vá até o arquivo app.component.ts e atualize ele com o código abaixo:

import { options } from "sw-toolbox";
import { Component } from "@angular/core";
import { Platform, AlertController } from "ionic-angular";
import { StatusBar } from "@ionic-native/status-bar";
import { SplashScreen } from "@ionic-native/splash-screen";
import { Push, PushObject, PushOptions } from "@ionic-native/push";

import { HomePage } from "../pages/home/home";
@Component({
  templateUrl: "app.html"
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(
    platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    public push: Push,
    public alertCtrl: AlertController
  ) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      this.pushsetup();
    });
  }

  pushsetup() {
    const options: PushOptions = {};

    const pushObject: PushObject = this.push.init(options);

    pushObject.on("registration").subscribe((registration: any) => {});

    pushObject.on("notification").subscribe((notification: any) => {
      if (notification.additionalData.foreground) {
        let youralert = this.alertCtrl.create({
          title: notification.label,
          message: notification.message
        });
        youralert.present();
      }
    });
  }
}

Vamos entender o código acima:

• 26: chamando no Constructor o método pushsetup().
• 36: registrando o device no console do Firebase.
• 38 a 46: aqui estamos dando um subscribe para quando uma notificação for enviada, nosso app receba e apresente ela.

Envio de push

Para enviar o push você precisa ter o ambiente de desenvolvimento configurado para desenvolver app para o Android. Como não é o foco desse artigo essa configuração, segue o link que eu utilizei para configurar o meu ambiente: Building Your First App.

Agora abra novamente o console do Firebase e vá até o link: Notification, em seguida clique em New Message e preencha os campos conforme a imagem abaixo:

Com todos os campos preenchidos, clique em Send Message, irá subir um popup para que você possa verificar se os dados estão preenchidos corretamente, valide essa etapa e clique em Send. Para demonstrar esse passo, eu irei utilizar o Vysor, um puglin do Google Chrome que espelha o nosso device.

Com isso nós finalizamos esse artigo. Caso você tenha interesse em baixar a versão final do código desenvolvido aqui, segue o seu link no GitHub.