Firebase Cloud Messaging and Ionic 2

Hola, este es el primer blog que escribo, estaré subiendo material referente a Ionic 2, Angular y Java.

Antes de iniciar este tutorial, es necesario tener conocimientos previos de JavaScript y TypeScript, aunque no es completamente necesario....

¡Comencemos!

Instalar ionic

Para ello, sigue los pasos que se muestran en la página oficial del framework.

Iniciar un nuevo proyecto Ionic

Para ello, en tu terminal, teclea lo siguiente.

$ ionic start firebase-example blank

Con ello crearemos un proyecto Ionic en blanco, es posible también crear aplicaciones con tabs o sidemenu, elije el que más te guste.

Agregar los FCM-Plugin

Para continuar con nuestro proyecto, ingresaremos a la carpeta creada y agregaremos el plugin con los siguientes comandos en la terminal.

$ ionic cordova plugin add cordova-plugin-fcm
$ npm install --save @ionic-native/fcm

Agregar configuraciones de Firebase

Se debe tener una cuenta en Google Firebase.

Una vez, creada la cuenta, agregaremos un nuevo proyecto del cual, enviaremos las notificaciones a cada dispositivo.

Ahora, en nuetro proyecto, agregaremos una nueva aplicación, debemos agregar el nombre del paquete del proyecto Ionic que tenemos, en mi caso estoy utilizando "com.fcm.example."

Ahora que tenemos nuestra aplicación configurada en Firebase, procedemos a descarga el archivo > google-services.json.

Accedemos a la pesataña que dice: "Mensajeria en la nube" y copiamos la clave de servidor, esto con la finalidad de enviar los mensajes a traves de POSTMAN.

Es momento de volver a nuestra aplicación Ionic y copiamos el archivo descargado en el directorio principal. Hecho esto, procedemos a agregar la plataforma Android a nuestro proyecto.

$ ionic cordova platform add android

E inicia la programación yeah!! El momento esperado

Configurar nombre de paquete de aplicación

Abrimos el archivo > config.xml y le modificamos el id

<widget id="com.fcm.example" .....

Agregar FCM al módulo

Para poder injectar el plugin, agregamos FCM al módulo de la siguiente forma:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {FCM} from "@ionic-native/fcm";

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    FCM,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Debe importarse el plugin y agregarse en el apartado providers.

Registrar token y recibir notificaciones

Ahora, programaremos la forma de recibir las notificaciones, para ello modificaremos el archivo: "app.component.ts".

//agregar el import
import {FCM, NotificationData} from "@ionic-native/fcm";

  //inyectar el plugin a través del constructor del componente
  constructor(public platform: Platform, public statusBar: StatusBar,
              public splashScreen: SplashScreen,
              private fcm:FCM) {
    this.initializeApp();
    //agregar funcionalidades

  }
  
  
  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      //la aplicación esta lista, vamos a obtener y registrar el token en Firebase
      //y procesar las notificaciones
      this.fcm.getToken()
        .then((token:string)=>{
          //aquí se debe enviar el token al back-end para tenerlo registrado y de esta forma poder enviar mensajes
          // a esta  aplicación
          //o también copiar el token para usarlo con Postman :D
          console.log("The token to use is: ",token);
        })
        .catch(error=>{
          //ocurrió un error al procesar el token
          console.error(error);
        });

      /**
       * No suscribimos para obtener el nuevo token cuando se realice un refresh y poder seguir procesando las notificaciones
       * */
      this.fcm.onTokenRefresh().subscribe(
        (token:string)=>console.log("Nuevo token",token),
        error=>console.error(error)
      );

      /**
       * cuando la configuración este lista, vamos a procesar los mensajes
       * */
      this.fcm.onNotification().subscribe(
        (data:NotificationData)=>{
          if(data.wasTapped){
            //ocurre cuando nuestra app está en segundo plano y hacemos tap en la notificación que se muestra en el dispositivo
            console.log("Received in background",JSON.stringify(data))
          }else{
            //ocurre cuando nuestra aplicación se encuentra en primer plano,
            //puedes mostrar una alerta o un modal con los datos del mensaje
            console.log("Received in foreground",JSON.stringify(data))
          }
         },error=>{
          console.error("Error in notification",error)
         }
      );

    });
  }
  

Ahora, nuestra aplicación esta lista para recibir las notificaciones, lo que prosigue es enviar un mensaje a través de Postman, en seguida muestro las ilustraciones tanto de los mensajes que se reciben en background como en foreground

Enviar mensaje por Postman

Observa que lleva un header de autorización con el valor:
key=API_KEY
El API_KEY es la clave del servidor que hemos copiado previamente.

El cuerpo del mensaje que estoy usando es:

NOTA: puedes notar que el mensaje tiene un atributo to el valor debe ser el token que te devuelve el plugin, para que de esta forma sólo envies el mensaje a un dispositivo en específico, verifica la documentación de Google Firebase para ver más limitantes en los mensajes. Además de ello, la notificación incluye el atributo click_action. Ésto es para que podamos procesar el mensaje cuando hacen TAP en la notificación, esto lo puedes revisar en el repo de fcm-plugin que esta en GitHub.

Basta de charla, enviemos el mensaje

Mensaje de prueba en dispositivo en background

Esto aparece en el inspector de Google Chrome:

y esto en mi dispositivo Android

y ahora con una notificación cuando tenemos nuestra app en primer plano.

Cool!! Ahora, puedes agregar la funcionalidad en back-end para enviar notificaciones desde tu aplicación y no con Postman ni cURL ni nada más

Por cierto, dejo el link de GitHub con la funcionalidad de este tuto ..... por si no quieres seguir el tutorial, está todo configurado, incluso el archivo de google-services.json, obviamente con mi cuenta.

https://github.com/VCGDEV/firebase-example