Aitor Sánchez - Blog - Nov. 2, 2023, 10:04 a.m.
¿Pensando en una alternativa a FCM para enviar notificaciones push a tus usuarios y has pensado en Ionic App Center Push? O, quizás ya sabes cómo se implementa, pero te falta algún detalle para hacerla funciona ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás a enviar notificaciones push a los usuarios de tus apps sin tener que pasar por el monopolio de FCM y con buenos resultados.
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.
Visto esto, comenzamos. Let´s go!
Básicamente, es una biblioteca que nos permite, en conjunto con su backend, poder enviar notificaciones push a los usuarios de nuestras aplicaciones que la implementen.
La plataforma donde se aloja el backend es propiedad de Microsoft, y por extensión esta librería. Puedes acceder a dicha plataforma desde el siguiente enlace: https://appcenter.ms/
Y una vez finalizada la explicación, vamos con el tutorial.
Al tratarse de una librería de terceros y no estar incluida en el core del sistema, tenemos que instalarla en nuestra aplicación para poder hacer uso de ella. Lo haremos con las dos siguientes líneas de consola:
$ ionic cordova plugin add cordova-plugin-appcenter-push
$ npm install @awesome-cordova-plugins/app-center-push
La primera instalará el plugin de Cordova que permitirá la comunicación con la parte nativa del sistema.
La segunda instalará el código TS necesario para que podamos, desde nuestro código TS, comunicarnos con el plugin.
Al igual que la instalación, al tratarse de un módulo externo al core, tenemos que colocarlo en los providers de nuestra app. Nos dirigimos al archivo "app.module.ts" de nuestra app y lo haremos de la siguiente manera:
import { AppCenterPush } from '@awesome-cordova-plugins/app-center-push/ngx';
...
providers: [
...,
AppCenterPush,
...
]
...
Cómo este es un módulo que si que debe ejecutarse al abrir la app, no debemos colocarlo en otro module que no sea el principal de la app.
Cómo es de imaginar, las plataformas soportadas por la librería son las siguientes:
Llegamos al meollo de la cuestión, pero cómo en todos los tutoriales del curso, vamos a escribir el código y luego comentamos debajo de él ¡Vamos con ellos!
import { AppCenterPush } from '@awesome-cordova-plugins/app-center-push/ngx';
constructor(private appCenterPush: AppCenterPush) { }
...
this.appCenterPush.setEnabled(true).then(() => {
this.appCenterPush.addEventListener('My Event').subscribe(pushNotification => {
console.log('Recived push notification', pushNotification);
});
});
Cómo puedes ver, un código sencillo pero totalmente funcional. Primer importaremos la clase "AppCenterPush" en nuestro archivo para poder hacer uso de su funcionalidad.
Posteriormente, mendiante el constructor inyectaremos una instancia de la clase. Recuerda, si no lo has incluido en los providers de la app, en este paso fallará.
Ahora, a través el método "setEnable" activamos todo el sistema y controlamos el retorno de su promesa para conocer cuando ha terminado de configurar. Una vez resuelta esta, ya podemos hacer uso del resto de funcionalidad que pone a neustra disposición.
Y, para terminar, nos suscribimos al "Observable" que nos devuelve la función "addEventListener" que será la que nos permita definir el canal desde el que vamos a recibir las notificaciones. Cuando el observable sea notificado, nos llegará a través de él la notificación push, con la respectiva información enviada desde el backend, cuando el usuario haya abierto la aplicación.
Con todo esto explicado ya estarías en condiciones de realizar una implementación completa. Ahora veamos un poco más sobre sus campos y funciones.
Cómo la mayoría de librerías que tienen que ver con app center, esta no dispone de mucha variedad de funciones y son las siguientes:
Cómo hemos visto en el ejemplo, nos permite suscribirnos a un evento registrado previamente en el backend de App Center. Dicho evento nos permite filtrar y discriminar a la audiencia que va a recibir la notificación de una manera bastante eficaz.
Nota: Recuerda que no únicamente puedes suscribirte a un evento desde el cliente.
Retornará un observable que tendremos que controlar para saber cuando el usuario ha abierto la aplicación desde una notificación y, por otro lado, si ha llegado alguna iformación con ella.
Nos permite conocer el estado actual del componente. Tanto si está apagado, cómo encendido.
No recibe parámetros y retornará una promesa que tenemos que controlar. Con dicha promesa llegará un booleanos que será el que nos permita conocer en qué estado está.
Este método nos permite encender, o apagar, el módulo en tiempo de ejecución.
Devuelve una promesa que tenemos que controlar. Con ella no llegará nada, pero nos permite conocer cuando ha terminado de realizar todo.
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.
Geniete, espero haberte ayudado a entender cómo puedes enviar estas notificaicones push y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!