Saltar al contenido

FCM Ionic | Aquí te enseño a usarlo cómo un PRO

FCM Ionic

En el artículo de hoy vamos a hablar un poco más en profundidad de lo que es el FCM Ionic, o mejor dicho, Firebase Cloud Messaging o mejor aún, notificaciones Push, o push notifications, en Ionic mediante esta plataforma. Algo, qué a día de hoy, es más que necesario si queremos que nuestra app suba en los rankings debido a la interacción con el usuario. ¿Y cómo? Sencillo, aumenta mucho el engagement si la usamos bien.

Yepaaaa! Hola guapa lectora / majo lector. ¿Qué tal van pasando las fiestas? Espero que genial, porque yo me estoy pegando unas “vacaciones” de curro que no veas. No paro ni un segundo. Bueno, como he comentado en la introducción, hoy vamos a ver un poquito más cómo podemos comenzar con las notificaciones Push en Ionic con la integración / integration de FCM Ionic y cómo podemos implementar estas notificaciones con este Tutorial. Vamos a ello.

Antes de continuar, comentarte que llevo varias semanas en los servidores de Raiola Netowrks. Y no véas cómo funcionan… Van DPM. Yo he mejorado el rendimiento de las APIS y las webs más de un 30%. ¿Por qué te digo esto? Pues por si te puede ayudar. Si quieres contratar un nuevo hosting, o migrar lo que tienes, te los recomiendo y te invito a que los pruebes. Aquí tienes un enlace con más Info. Solo espero que te puedan ayudar cómo lo han hecho conmigo.

Cómo instalar FCM Ionic / add FCM plugin

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 @ionic-native/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.

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.

Plataformas soportadas

Podemos hacer uso de este componente en:

  • For Android
  • For iOS

Está excluido, de momento, Windows Phone y la web (para esta plataforma ya hay algo parecido, pero hablaremos de ello otro día)

 

Configuración / Setup de FCM Ionic

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…

 

Ejemplo / Example de cómo usar FCM Ionic

Llegados a este punto, y visto todo lo anterior, estamos en posición de ver un ejemplo. Allá va:

import { FCM } from '@ionic-native/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 notificaciones 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.

Métodos y campos de clase

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.

getToken()

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.

 

onTokenRefresh()

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.

 

suscribeToTopic(tema: string)

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.

 

unsuscribeFromTopic(topic: string)

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.

 

onNotification()

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.

El objeto data que nos llega con la notificación.

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.

 

FCM en el Browser / Navegador

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 🙂

 

Cómo usar / cambiar el badge de las notificaciones / notifications

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-badge

El 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) {
    ...
});

 

Cómo poner un custom sound a las notificaciones

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

 

Aclaración FCM VS Firebase

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.

 

Y para los más ganduletes, el videotutorial del componente


Pues parece, que por lo menos de momento, esto es todo. Más adelante iré añadiendo más cositas a este artículo así que estate atento a nuevas publicaciones/actualizaciones.

Un saludo cordial y espero haberte ayudado. Si ha sido así agradecería que lo compartieras con tus colegas por las redes o si sabes de alguien que le pueda interesar, házselo saber. Te estaré eternamente agradecido.

Por otro lado, te invito a que te pases por este enlace. Se trata de El Círculo, y es una comunidad online que estoy montando alrededor de esta genial disciplina que es la programación. Dentro tienes todos los detalles.

Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.