Aitor Sánchez - Blog - Oct. 30, 2023, 5:39 p.m.
¿Quieres enviar notificaciones Push en tu aplicación Ionic mediante FCM Ionic cómo el niño cartero de las películas? O, quizás, ya lo has hecho y lo que te falta es conocer alguna función o campo para implementarlo cómo quieres ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps móviles desde 2014, Y en este artículo vas a aprender, de manera sencilla y con ejemplos, a mandar notificaicones push a través de FCM.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
En primer lugar, y como con la mayoría de módulos externos, a menos que sean nativos, nos hace falta instalar el plugin y el componente en el proyecto. Para ello vamos a usar las siguientes dos líneas de consola:
$ ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
$ npm install --save @awesome-cordova-plugins/fcm
Posteriormente vamos a ver cómo podemos agregar la dependencia en el proyecto para poder inyectarla en los constructores:
Nota: Recuerda que este paso solo es necesario si estás utilizando versiones inferiores de Ionic 4 o no usas el módulo NGX.
import { FCM } from '@awesome-cordova-plugins/fcm/ngx';
providers: [
...,
FCM,
...
]
Bueno, pues con esto ya estaríamos en disposición de usar la librería. Ahora vamos a continuar con lo que nos toca.
Podemos hacer uso de este componente en:
Está excluido, de momento, Windows Phone y la web (para esta plataforma ya hay algo parecido, pero hablaremos de ello otro día)
Pues para nuestra alegría, este componente, de manera directa, no necesita de configuración alguna. Ya te enseñaré más adelante como construir nuestros componentes extendiendo de los componentes que nos provee el sistema.
¡Perooooo!, hay un detalle importante que tenemos que hacer aquí. Tenemos que registrar la app dentro de la consola de Firebase. Si aún no sabes cómo se hace, estoy preparando un artículo en el que te lo enseño, pero aún no está terminado. Así que te invito a que busques un poco en google “conseguir google-services.json de Firebase”.
Posteriormente, cuando tengamos el archivo en nuestro poder, tenemos que incluirlo dentro de nuestra app. Pero, un pequeño detalle, tenemos que ponerla dentro de la construcción de Android a nivel de la carpeta “app”:
Platforms->Android->app
Cuidado con esto, es posible que cada vez que hagas un “platform remove android” se elimine el archivo y lo tengas que volver a incluir. Si alguno de los presentas sabe cómo solventar este problema que lo diga en los comentarios, todos estaremos encantados de saberlo, me incluyo en esto.
Continuemos…
Llegados a este punto, y visto todo lo anterior, estamos en posición de ver un ejemplo. Allá va:
import { FCM } from '@awesome-cordova-plugins/fcm/ngx';
constructor(private fcm: FCM) {}
...
this.fcm.subscribeToTopic('marketing');
this.fcm.getToken().then(token => {
backend.registerToken(token);
});
this.fcm.onNotification().subscribe(data => {
if(data.wasTapped){
console.log("Received in background");
} else {
console.log("Received in foreground");
};
});
this.fcm.onTokenRefresh().subscribe(token => {
backend.registerToken(token);
});
this.fcm.unsubscribeFromTopic('marketing');
Para comenzar el tutorial, importamos el módulo a nuestra clase TS.
Después incluimos en nuestro constructor una inyección privada de FCM. Este es el componente que nos permite manejar todo el tema de las notificaciones Push.
Continuamos diciéndole al sistema que nos queremos suscribir a un “topic” que es un tema. Puedes leer más información sobre estos aquí: https://firebase.google.com/docs/cloud-messaging/android/topic-messaging Esto lo que nos permite es enviar mensajes segmentados dependiendo del tema al que esté suscrito el usuaria.
Seguidamente, la función getToken() nos permite almacenar el token que FCM ha asignado a nuestros dispositivo en caso de que queramos enviar push notifications desde este a otros dispositivos como hace WhatsApp por ejemplo. Si quieres saber un poco más, visita este enlace: https://como-programar.net/ionic/push/. En él te explicamos un poco más sobre el tema.
La siguiente función, onNotification() , es la más importante. Es la que nos permite controlar el código que se ejecuta al recibir una notificación. Es un Observable y se controla con el método suscribe(data). De acuerdo a esto, la notificación llegará si la app esta en foreground como en background. El mismo objeto “data” trae consigo el campo “wasTapped” para saber si el usuario ha accedido a la app desde la notificación o tenía la app abierta. A partir de aquí deja volar tu imaginación con la cantidad de cosas que se pueden lograr.
“onTokenRefresh()” Se ejecutará automáticamente cuando FCM cambie el token de usuario. Recuerdo que este token es el que se usará para enviar notificaciones desde nuestra app a otros usuarios.
Y la última línea nos permite desconectarnos del canal que le pasemos como parámetro.
Bueno, ¿el ejemplo está claro? Espero que sí. Ahora vamos a ver los campos de clase y las funciones que tenemos para hacer cositas con este cojonudo componente.
Es probable, que si estás intentando ver que muestra este código:
this.fcm.onNotification().subscribe(data => {
if(data.wasTapped){
console.log("Received in background");
} else {
console.log("Received in foreground");
};
});No puedas hacerlo por una simple razón. Este código se está ejecutando cuando pulsas la notificación. Por lo que la app aún no está abierta y el navegador no puede controlar ese código e imprimir lo que le estamos pidiendo. Es uno de los princpales problemas de que no funcione / not working. De todas maneras, te invito a que revises que tu Payload está bien aquí: https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#notification-vs-data-payloads. Si no se soluciona con ninguna de las dos opciones, déjamelo en los comentarios y lo vemos más en profundidad.
Ahora vamos a ver un poco las posibilidades que nos otorga este módulo para que podamos trabajar con él. Aunque no cuente con gran variedad de funciones, las posibilidades son infinitas al ver uno de ellos que os comentaré cual es ahora.
Esta función, nos permite recuperar el token (get device token) que nos tiene asignado Firebase en el dispositivo donde se está ejecutando la app. Este token nos sirve para poder enviar notificaciones de manera individual al dispositivo. Visita el enlace que he puesto arriba para conocer más detalles. Pero para que te hagas una idea, cada vez que se inicia la api de Firebase en un dispositivo se le asigna un ID. Este ID es el que hay que enviar a Firebase desde otro lugar para que le llegue una notificación a este. ¿Me he explicado?
No recibe parámetros y devuelve una promesa que contiene un String que contiene el Token.
Esta función se ejecuta de manera independiente y asíncrona y se ejecuta cuando la api de Firebase nos ha cambiado de token.
Retorna un observable que contiene un String con el nuevo token.
Esta función se suscribe a un canal por el que serán entregados los datos de las notificaciones.
El parámetro es el nombre del canal y devuelve una promesa con el resultado de la suscripción, si se ha completado o no.
La versión opuesta del método anterior, nos permite eliminar una suscripción de un canal para dejar de recibir notificaciones.
El parámetro es el nombre del canal y devuelve una promesa que nos permite conocer si hemos eliminado bien o no la suscripción.
Vale, este es el método que he explicado al principio. Al poder controlar, en primera instancia, si el usuario está dentro, o no, de la app podemos efectuar unas cosas u otras. Y, por otro lado, la promesa que nos devuelve lleva consigo parámetros que nosotros podemos enviar y recibir desde la app.
Por lo que, con esos datos, podemos efectuar lo que nosotros queramos y como queramos.
No recibe parámetros y devuelve un observable que se ejecutará cada vez que se reciba una notificación, o en su defecto la app se abra desde una notificación. Aconsejo que revises lo que lleva consigo el objeto data, verás cómo es bastante increíble.
Como he explicado en el ejemplo, el objeto data que nos llega con la notificación es el que contiene todo lo que podemos esperar de algo así. Pero uno de los campos, que también lo hemos visto en el ejemplo, es wasTapped. Que en caso de que hayamos pulsado sobre la notificación este será true y en caso contrario, porque la app está abierta, será false.
He entrado a actualizar este artículo para explicaros que estoy terminando de realizar un artículo donde hablaremos pronto de cómo podemos utilizar el FCM de Ionic en el Browser. Pero el lo que lo termino os voy a dejar un enlace, aunque está en inglés, de un blog que sigo desde hace tiempo y que este concepto lo explica perfectamente, aquí va. Espero que os sea de gran ayuda :)
Seguimos avanzando. Poco a poco el blog se va haciendo más completo y eso me gusta. En gran parte se está llenando por que contesto a vuestras preguntas dentro de los artículos, así que genial. Bueno, ahora vamos a ver cómo podemos cambiar el badge del icono / icon de una aplicación desde nuestro código.
Para todo el que no lo sepa, el badge es el típico círculo que aparece encima de los logos de nuestras apps cuando tenemos una notificación. Por ejemplo, WhatsApp pone la cantidad de mensajes que tienes sin leer.
Para tal fin vamos a utilizar el plugin de Cordova que se encarga de ello.
cordova plugin add cordova-plugin-badgeEl primer paso, cómo era de esperar, hay que instalarlo.
Ahora bien, hay que tener especial cuidado con esto que vamos a ver a continuación. El plugin solo se podrá usar/configurar cuando el dispositivo ya esté listo. Para ello tenemos lo siguiente que has visto millones de veces.
document.addEventListener('deviceready', function () {
// cordova.plugins.notification.badge ya se puede usar
}, false);
Y bueno, una vez listo, ya podemos jugar un poco más con él. Vamos a ponerle un número a nuestro badge con el siguiente código:
cordova.plugins.notification.badge.set(10);
Pongamos que tenemos un servicio de notificaciones cómo el de WhatsApp (valga la redundancia) y queremos que se incremente desde fuera la cantidad de notificaciones. Para eso tendríamos el siguiente código listo:
cordova.plugins.notification.badge.increase(2, function (badge) {
// Nuestro badge ahora vale 11 (10 que había + 2)
});
Y para terminar con la explicación de cómo usarlos, aquí está el código para limpiar el badge:
cordova.plugins.notification.badge.clear();
Es necesario hacer hincapié en que en IOS es necesario solicitar permisos a nuestros usuarios en caso de que queramos enviar notificaciones de este tipo de la siguiente manera:
cordova.plugins.notification.badge.requestPermission(function (granted) {
...
});
Y si lo que queremos es comprobar si los permisos están aceptados ya, o no, sería con el siguiente código:
cordova.plugins.notification.badge.hasPermission(function (granted) {
...
});
Pues bien, para poder en marcha esta función necesitamos, en primer lugar, agregar al payload que se envía desde el servidor a las aplicaciones de la siguiente manera:
pushData = {
registration_ids : [ ],
notification:{
sound: "police_siren.mp3",
title: "El título de mis notificación",
body: "El cuerpo de la notificación",
},
data: {
param1:"Value1",
param2:"Value2"
}
}
Cómo has podido ver, tenemos que definir en la parte del server el nombre del audio a reproducir. Ahora vamos a la app y hacemos lo siguiente en config.xml:
<resource-file src="src/assets/sound/police_siren.mp3" target="police_siren.mp3" />
Posteriormente, y después de haber realizado los dos pasos, vamos a incluir en el directorio que hemos puesto en la linea XML el archivo en cuestion.
Y con esto ya estaría todo funcionando. Cuando enviemos una notificación push desde el server con la línea 'sound: "police_siren.mp3"' sonará con el nuevo sonido
A ver, muchos me habéis consultado, incluso he visto por la red, que hay gente preguntando las diferencias entre FCM y Firebase. Pues bien, es imposible realizar una comparación por que FCM es parte de Firebase.
Si quieres conocer un poco más que es Firebase, pásate por aquí. Es nuestro tutorial y en el puedes informarte que es Firebase.
Pero si no quieres pasar por el enlace, FCM es la parte de las notificaciones PUSH que nos provee Firebase. Las siglas FCM son de Firebase Cloud Messaging. Digamos que es él el que nos facilita que nosotros podamos servir estas notificaciones push a nuestros usuarios desde su sistema. De otra manera, tendríamos que montar un servidor de notificaciones push que sería un poco más complejo y tedioso. Y más sabiendo que FCM es "gratis".
Lo que hacemos cuando mandamos una notificacion mediante la api de FCM es enviar la notificación a los servidores de Google para que la entreguen cuando le digamos, y pueda.
¿Lo has entendido? Si no es así, déjamelo en los comentarios y lo vemos un poco más en profundidad.
Mira, si tu optimizas el logo de tu aplicación, sus descargas aumentan y tu ganas más dinero. Esto es así. Pues bien, para que lo puedas hacer mejor, más cómodo y más rápido, hemos creado esta aplicación. Una herramienta de IA que evalua tu código y te da consejos sobre cómo mejorarlo. No te espoileo, en el enlace hay un video en el que lo explico todo.
Espero haberte ayudado con tu tarea y nos vemos en el siguiente artículo ¡Hasta entonces, que vaya bien!