Aitor Sánchez - Blog - Nov. 1, 2023, 6:12 p.m.
¿Necesitas minimizar tu aplicación sin que tu usaurio realice alguna acción has pensado en App Minimize de Ionic? O, quizás ya sabes cómo se hace, pero te falta algún detalle que pulir para poder usarla ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás a implementar Ionic App Minimize en tu app para que puedas minimizar la aplicación cuando se te antoje, sin necesidad de interacción con el usuario, o sí.
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.
Y ahora si, comenzamos. Let´s go!
A fin de cuentas, se trata de una pequeña librería que nos permitirá minimizar nuestra aplicación en plataformas Android. Algo similar a lo que sucede cuando pulsas el botón de "Home" de nuestro dispositivo, pero cuando tú quieras hacerlo.
La principal ventaja de esto es, cómo veremos en el ejemplo, que al no cerrarse la app y únicamente minimizarse, esta no pierde el estado actual en el que se encuentra. Vamos, que cuando el usuario la vuelva a abrir, comenzará a usarla desde donde lo dejó y no desde 0 siempre y cuando no la haya cerrado a mano.
Cómo todos los componente externos, necesitamos realizar una instalación para poder utilizarlo en nuestra aplicación. Para ello vamos a hacer uso de las dos siguientes líneas de consola:
$ ionic cordova plugin add cordova-plugin-appminimize
$ npm install --save @ionic-native/app-minimize
La primera instalará el plugin de Cordova necesario para poder comunicarnos con la parte nativa del sistema.
La segunda instalará el código TS que nos permitirá comunicarnos con el plugin.
Al igual que el paso anterior, al tratarse de una biblioteca fuera del core de Ionic tenemos que incluirla a los providers de nuestra app. Para tal fin, nos dirigimos al archivo "app.module.ts" y en el array de providers incluimos la clase así:
import { AppMinimize } from '@ionic-native/app-minimize/ngx';
...
providers: [
...,
AppMinimize,
...
]
...
Aunque ya lo he comentado al comienzo, dicho componente únicamente soporta una plataforma:
Ya llegamos al punto clave del tutorial, cómo podemos utilizarlo. Bien, cómo en todos los tutoriales de la web, vamos a ver un ejemplo de código y después lo comentamos debajo ¡Vamos con ello!
import { Platfrom } from 'ionic-angular';
import { AppMinimize } from '@ionic-native/app-minimize';
constructor(private platform: Platform, private appMinimize: AppMinimize) { }
...
this.platform.registerBackButtonAction(() => {
this.appMinimize.minimize();
});
Un ejemplo sencillo, cuando el usuario haya pulsado el botón "back" y se encuentre dentro de esta clase, la aplicación se minimizará.
En primer lugar, importaremos las clases "Platform" del paquete "ionic-angular" que nos permitirá conocer información sobre la plataforma donde se está ejecutando la app. También importaremos la clase en cuestión "AppMinimize" del paquete "@ionic-native/app-minimize".
Posteriormente, inyectaremos una instancia de cada una de las clases a través del constructor de nuestro componente.
Ahora, y mediante el método "registerBackButtonAction" que nos notificará cuando el usuario ha pulsado el botón "back", minimizaremos la aplicación utilizando el método "minimize" de nuestra instancia de la clase "AppMinimize".
Espero que más o menos haya quedado claro. Es un ejemplo muy básico, pero totalmente funcional que podrás incorporar en cualquiera de tus aplicaciones.
Y ahora, vamos a profundizar un poquito en sus campos de clase y funciones ¡Vamos allá!
Recordemos que únicamente hablaremos de las funciones y campos que están disponibles en la case en cuestión. Las funciones y variables de los padres no serás comentadas.
Esta función nos permitirá minimizar la aplicación en el dispositivo.
No recibe ningún parámetro y retorna una promesa que tenemos que controlar. La promesa llevará un objeto con información sobre la ejecución de la función, pero lo más importante de esta es, al resolverse conoceremos que ha terminado de realizarse la acción.
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, hasta aquí el artículo de hoy. Espero haberte ayudado a entender cómo puedes miniminzar tu app sin que el usuario tenga que hacer nada, y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!