Ionic 3 Push Notification tutorial | Native, Firebase Cloud Messaging FCM

Página de firebase cloud messaging


[do_widget id=mailpoet_form-2]

Aprendamos en esta ocasión, cómo recibir notificaciones push en la plataforma de desarrollo móvil Ionic paso a paso: Ionic 3 push notification tutorial.

Introducción / comentarios sobre Ionic 3 Push Notification.

Después de haber pasado 4 días navegando por internet y buscando información al respecto, he de decir una vez más, que la información obtenida no ha sido de utilidad o suficiente.

En algunos sites, tan sólo se hacía referencia al uso de push notifications en android o ios. En otros, a pesar de que se indicaba que la versión de Ionic utilizada era la 3, nos comandos utilizados en consola no correspondían con la misma. Pero bueno, para eso habéis llegado aquí, para solucionar los problemas de configuración que tengáis. Empecemos…

Creando proyecto Ionic 3 Push Notification tutorial.

ionic start push blank

Entramos en la aplicación…

cd push

Instalamos las plataformas a utilizar.

ionic cordova platform add android
ionic cordova platform add ios

Vamos ahora a Firebase Cloud Messaging y continuamos allí.

Creando proyecto Push notification Firebase Cloud Messaging (FCM).

Vamos a https://console.firebase.google.com, nos registramos o hacemos log in en caso de tener ya una cuenta creada.

Pulsamos sobre la opción de «agregar proyecto», y completamos todos los campos requeridos…

Para cubrir las necesidades de todos los usuarios con las plataformas ios y android, creamos 2 proyectos, aunque en el ejemplo de hoy utilizaremos Android:

Cómo crear un nuevo proyecto en Firebase Cloud Messaging (FCM).

[do_widget id=mailpoet_form-2]

Sencillo, una vez estamos en la pantalla principal «Project Overview», vamos a pulsar sobre «agregar app».

Como podéis ver, en mi caso ya tengo la app iOS creada, por lo que vamos a crear en este tutorial la referente a Android. No os preocupéis si estáis desarrollando para iOS, en ambos casos el procedimiento es similar.

Con rellenar el primero de los inputs y pulsar sobre el botón «Registrar app», es suficiente.

A continuación, debemos añadir en nuestro proyecto el script que desde Firebase Cloud Messaging se nos facilita.

La ruta para la plataforma Android Ionic 3 donde debemos dejar el script descargado es: nuestro-proyecto/platforms/android/app/


A continuación, vamos a instalar el plugin phonegap push de Cordova.

Instalando Phonegap-plugin-push de Cordova en Ionic 3.

Antes de salir de Firebase Cloud Messaging, necesitamos conocer cual es el sender ID de nuestra aplicación. Para ello :: Project Overview :: Configuración del proyecto.

Obteniendo ID_SENDER de Firebase Cloud Messaging (FCM).

[do_widget id=mailpoet_form-2]

Vamos al apartado «Cloud messaging» y es ahí donde podemos encontrarlo. En mi caso es 326443840914. Y como veis, he ocultado los valores «clave de servidor» y «clave de servidor heredada» ya que no aplican.

Y ahora sí, vamos de nuevo a nuestra ventana de comandos y ejecutamos la siguiente línea.

ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID=326443840914

Tras la ejecución…

Y por último en este paso, ejecutamos la línea:

npm install --save @ionic-native/push

Genial!!! Ya tenemos todo lo necesario a nivel de plugins y funcionalidad para que nuestras alertas lleguen correctamente. Vamos ahora a modificar los scripts de la aplicación para que podamos recibir los avisos.

Código fuente Ionic 3 Push Notification tutorial.

La modificación de estos scripts es imprescindible para que las notificaciones push funcionen correctamente en nuestro proyecto Ionic 3.

Modificando config.xml en Ionic 3 Push Notification tutorial.

Abrimos el script «config.xml» con nuestro IDE favorito, y modificamos «widget id=» insertando ahí el nombre de nuestro proyecto creado en Firebase.

Código fuente para app.component.ts en Ionic 3 Push Notification tutorial.

Seguimos modificando código fuente, en este caso vamos a abrir este script: «src/app/app.component.ts». Os paso el código como quedaría, he añadido comentarios para que se puedan interpretar las líneas añadidas.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
 
// Implementamos la librería de notificaciones Push.
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,
                private push: Push) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
 
      // Llamada a la función push.
      this.pushSetup();
    });
  }
 
  pushSetup(){
    const options: PushOptions = {
       android: {
           // Añadimos el sender ID para Android.
           senderID: '326443840914'
       },
       ios: {
           alert: 'true',
           badge: true,
           sound: 'false'
       }
    };
 
    const pushObject: PushObject = this.push.init(options);
 
    pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));
    pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration));
    pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
  }
 
}

Código fuente para app.module.ts en Ionic 3 Push Notification tutorial.

Aquí debemos realizar un pequeño cambio, es añadir «Push» como un nuevo provider. Dejaré una captura ya que es sencillo.

Ejecutando la aplicación en simulador.

Es muy importante realizar la ejecución en este orden o no funcionará.
Primero, lanzamos nuestro emulador (Si aquí tenéis problemas, añadir comentarios y os iré dando soporte. Sé a ciencia cierta que hasta que hacemos funcionar el emulador de Android es un gran quebradero de cabeza).

ionic cordova emulate android --target Nexus_5X_API_28_2

Si el emulador ha cargado correctamente… vamos a preparar nuestra aplicación para que corra en él.

ionic cordova prepare

Ha llegado el momento, vamos a correr nuestra aplicación.

ionic cordova run android

Contenido extra.

Vamos ahora al navegador y en la barra de búsqueda insertamos: chrome://inspect/#devices
Esto nos permitirá tener las herramienta de inspector de elementos para dispositivos móviles, en este caso, nuestro emulador.

Si todo ha ido bien, veremos algo como esto…

Lanzando notificaciones Push desde Firebase Cloud Messaging.

Volvemos a Firebase, entramos en el apartado de notificaciones y creamos una nueva. Tan sólo nos queda lanzarla.

Resultado


Tal y como hemos visto, es un proceso largo y complejo, pero al final merece la pena.
Espero que la entrada os sea de utilidad y vuestros comentarios.

Versiones utilizadas, tiempo y dificultad de desarrollo:
Plataforma: Ionic v3
Dificultad: Experto.
Tiempo de desarrollo: 8 horas (investigación + desarrollo).

Publicaciones relacionadas

Summary
Ionic 3 Push Notification tutorial | Native, Firebase Cloud Messaging FCM
Article Name
Ionic 3 Push Notification tutorial | Native, Firebase Cloud Messaging FCM
Author

2 comentarios en “Ionic 3 Push Notification tutorial | Native, Firebase Cloud Messaging FCM”

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable de los datos: Luis María Jordán Muñoz | Finalidad: Responder a la solicitud que me envíes y ofrecerte información | Legitimación: Tu consentimiento de forma expresa | Destinatario: Webempresa mi proveedor de hosting | Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido, para más información, te dejo enlace a mi política de privacidad ... enlace

Ir arriba