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.
Índice
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 androidionic cordova platform add iosVamos 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).
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).
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=326443840914Tras la ejecución…
Y por último en este paso, ejecutamos la línea:
npm install --save @ionic-native/pushGenial!!! 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_2Si el emulador ha cargado correctamente… vamos a preparar nuestra aplicación para que corra en él.
ionic cordova prepareHa llegado el momento, vamos a correr nuestra aplicación.
ionic cordova run androidContenido 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).
Y recuerda, si te gustó la entrada y quieres estar al día acerca de estos temas, no olvides suscrbirte al blog.
Excelente tutorial, me funcionó a la perfección.
Gracias Abdel.
Muchisimas gracias! Me funcionó perfecto!
Hola , me podrías indicar como podria hacer lo mismo pero con notificaciones dirigidas a determinado dispositivo , gracias .
Muchas gracias por compartir el conocimiento. Tengo un problema en un par de lineas de código, el primero es en el component.ts en la siguiente línea de código:
private push: Push
Esta se declara en el constructor y me arroja el siguiente error:
‘Push’ refers to a value, but is being used as a type here
El segundo es en el module.ts al declarar Push en el provider, me sale el siguiente error:
Type ‘PushOriginal’ is not assignable to type ‘Provider’.
Type ‘PushOriginal’ is missing the following properties from type ‘FactoryProvider’: provide, useFactory
agrego import { Push } from ‘@ionic-native/push’; en el module, si lo quito me aparece el error:
Cannot find name ‘Push’
Soy nuevo en ionic :p me puedes ayudar. Gracias y excelente tutorial.
Hola, seguro ya lo reparaste pero esto se debe a que no estás importando correctamente. cualquier elemento que provenga de native tiene que ser importado desde la carpeta ngx
cambia >import { Push } from ‘@ionic-native/push’;
por>import { Push } from ‘@ionic-native/push/ngx’;
Has encontrado solución para este problema?
He encontrado la solución: https://forum.ionicframework.com/t/ionic-4-cannot-inject-push-into-components/141979
Hola, con la nueva modificacion que va a hacer ios con respescto a HTTP/2‑based Apple Push Notification service (APNs) provider API. Esto afecta a firebase?