▷ Background Mode【 Ionic 】 de 0 a 100 ¡No te lo pierdas!

¿Quieres realizar tareas asíncronas en tu aplicación con el componente Background Mode Ionic? O, talvez, ya sabes cómo se hacen pero te falta algún detalle más para hacerlo funcionar cómo tu quieres ¿verdad?

Si la respuesta es si a alguna de estas dos preguntas, tranquilo. Es totalmente normal porque es algo que no suele explicarse en los tutoriales, sobre todo en cursos de youtube, y es algo totalmente necesario de aprender si queremos hacer aplicaciones de verdad. Es más, hasta a mi me costó un poco pillarle el rollo al principio, cuando lo conocí.

Cómo sabrás, mi nombre es Aitor Sánchez y soy desarrollador de apps desde el año 2014. Y, en este artículo, te enseñaré cómo puedes hacer tus tareas asíncronas de una manera sencilla e intuitiva.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Consultar estructura del artículo

1 Instalar Background Mode Ionic
2 Plataformas disponibles para Ionic Background Mode
3 Background Mode, Configuración preliminar
4 Como usar Background Mode con ejemplos / example
5 Background Mode y sus funciones
6 BackgroundModeConfiguration
7 ¿El componente no funciona? Mira esto
8
9 Más tutoriales de Ionic

Instalar Background Mode Ionic

En primer lugar, como en todos los componentes externos de Ionic, tendremos que realizar una instalación del módulo en nuestro proyecto. Para ello vamos a usar las siguientes dos líneas de consola.

ionic cordova plugin add cordova-plugin-background-mode
npm install @awesome-cordova-plugins/background-mode

La primera de ellas instalará el componente de Cordova que nos permite comunicarnos de manera nativa con el dispositivo en cuestión. Y la segunda instalará en nuestro poeycto el código TypeScript necesario para que podamos interactuar con el plugin.

Plataformas disponibles para Ionic Background Mode

Aunque para muchos suene un poco raro, en este módulo tenemos una pequeña novedad. Podremos hacer uso de él en AmazonFire OS. El famoso FireStick de Amazón, que para quien no lo sepa es un SmartTV portátil, realizado en Android como base de Software, lo puedes ver aquí. En mí casa ya tenemos 2, uno en el Salón y otro en la habitación, pero no desvariemos, sigamos a lo que nos ocupa.

El resto de las plataformas que podemos encontrar son: Android, iOS, Windows y el navegador. La verdad que está disponible para todo y me encanta, soy amante de los procesos en segundo plano, se pueden hacer tantas cosas…

Background Mode, Configuración preliminar

Me estoy preguntando, si quizás, y solo quizás, debería de quitar esta sección de los artículos dado que casi siempre es igual, o solo mostrarla cuando no sea la estándar. ¿Qué opinas?, ¿debería de quitarla? Aunque ya que estamos aquí, veamos.

Para poder hacer uso del módulo necesitamos incluirlo dentro de los providers de nuestra clase. Ya sea la clase principal “AppModule” o una clase aislada. Para ello vamos a tener que realizar lo siguiente dentro de la clase que contenga el decorador “ngModule”

import { BackgroundMode } from '@awesome-cordova-plugins/background-mode/ngx';

...

Providers: [
    ....,
    BackgroundModule,
    ....
]

...

Y ya estaría lista para ser inyectada en los constructores, no es necesario más.

Como usar Background Mode con ejemplos / example

Antes de nada, veamos un claro ejemplo de como poner en marcha toda la maquinaria:

¿Alguien ha dicho how to use? Pues aquí está 🙂

import { BackgroundMode } from '@awesome-cordova-plugins/background-mode/ngx';

constructor(private backgroundMode: BackgroundMode) { }

...

this.backgroundMode.enable();

Como has podido ver, lo primero de todo es importar la clase para que la podamos usar en nuestro documento.

Posteriormente, tendremos que proveernos de una instancia de BackgroundMode inyectándola en nuestro constructor.

Ahora ya estamos a disposición de lo que queramos hacer. Basta con que llamemos a la función enable() para que la aplicación no se cierre cuando salgamos de ella. Así poder, por ejemplo, notificar al usuario de “algo”, encender la pantalla, levantar un sensor o simplemente recibir información desde la red de manera continuada.

Background Mode y sus funciones

Ahora vamos a ver un poco más detalladas las funciones que tenemos disponibles para utilizar desde nuestro módulo.

enable()

Cómo hemos visto en el ejemplo, esta función es la que pone a funcionar toda la maquinaria y la que nos permite poner nuestra aplicación en segundo plano mediante la creación de un provider nativo en tiempo de ejecución.

disable()

Como su propio nombre indica, fuerza la salida del comportamiento que estamos corriendo en segundo plano.

isEnable()

Realizar una comprobación para ver si está ejecutando en ese instante algo en segundo plano. Devuelve un booleano que nos informa de si hay algo ejecutándose o no.

isActive()

Similar a la anterior, pero nos permite conocer si el sistema está activo. La diferencia es que desde que se da la orden, hasta que inicia el proceso de segundo plano, “isEnable” devolvería false y este devolvería “true”.

setDefaultOptions(BackgroundModeConfiguration)

Este método nos permite definir las opciones por defecto con lo que va a funcionar el sistema. Más abajo veremos los campos que tenemos disponibles en la interface “BackgroundModeConfiguration”.

configure(BackgroundModeConfiguration)

Muy similar al anterior, pero para poder cambiar la configuración una vez el sistema esté funcionando.

on(event)

Aquí nos permite pegar un listener/oyente a nuestra instancia para que podamos controlar los sucesos que se ejecutan por debajo. Las posibles opciones de event son las siguientes:

enable -> Se ejecuta cuando comienza el proceso en segundo plano
disable -> Se ejecuta cuando terminar el proceso en segundo plano
activate -> Se ejecuta cuando está el sistema disponible
deactivate -> Se ejecuta cuando el sistema ya no está disponible
failure -> Se ejecuta cuando el sistema ha fallado.

Al ser un listener, esta función devuelve un observable que nos notificará cuando haya sucedido un evento de estos para que lo podamos controlar y tratar como nos plazca.

moveToBackground()

Esta función solo está disponible en Android por que el sistema nos permite mover de background a foreground de manera explícita. Y lo que hace es mover un proceso al background de manera programática.

moveToForeground()

Similar a la anterior, pero sirve para traer un proceso del background al foreground.

disableWebViewOptimization()

Esta función solo está disponible para Android.

Nos permite activar el rastreo de geolocalización por GPS en modo background.

overrideBackButton()

Nos permite sobrescribir el funcionamiento del evento que se dispara cuando pulsamos sobre el botón back. Solo está disponible para Android.

excludeFromTaskList()

Esta función nos permite que el proceso que tengamos en cola sea excluido de la lista de tareas de sistema.

isScreenOff() en Background Mode

Esta función nos devuelve una promesa que trae consigo en el “then” un booleano que nos notifica si la pantalla está activa o no. Lo sé, soy un cansado, pero siempre controlar, incluso si no es necesario, el error de la promesa, aunque sea para imprimir en consola. Esto nos permitirá reducir la cantidad de tiempo de depuración.

Este método solo está disponible en Android.

wakeUp()

Intenta forzar un encendido de pantalla. En determinados dispositivos no funciona, pero no falla. Así que no hay problema.

Esta función solo está disponible para Android.

unlock() en Background Mode

Similar a la anterior, pero directamente le pide al usuario que desbloquee el dispositivo.

Pues hasta aquí llega el apartado de la función. Ahora vamos a ver los campos de los que disponemos en la interface “BackgroundModeConfiguration” que hemos explicado antes.

BackgroundModeConfiguration

title -> string -> El título de la tarea
text -> string -> La descripción de la tarea
icon -> string -> El icono de la tarea que se verá en la barra de estado
color -> string -> El color del fondo de la notificación
resume -> boolean -> Por defecto, cuando se pulse sobre la notificación la aplicación regresará a primer plano. En caso de que este campo sea “false” no se efectuará esta funcionalidad de volver al foreground
hiden -> boolean -> Si se setea a false la notificación será visible con en la pantalla de bloqueo
bigText -> string -> El texto que se mostrará en caso de que expandamos la notificación
ticker -> string -> Similar al anterior, pero cuando se despliega la notificación completa
silent -> boolean -> Si es verdadero no se mostrará la notificación. Por defecto es falso

¿El componente no funciona? Mira esto

Hay algunos de vosotros que me habéis preguntado por que no funciona el componente cómo es debido (not working this :)). Pues la verdad que he estado revisando y depende mucho, muschísimo, de el dispositivo donde se esté ejecutando el servicio. Pero en busca de una solución consistente lo único que os puedo entregar es algo así:

this.backgroundMode.on('activate', () => {
    this.backgroundMode.disableWebviewOptimizations()
    //El resto de nuestro código aquí.
});

Es cierto que en varios dispositivo, cómo en algún samsung, y sobre todo en Android 8, no termina de funcionar bien. Acabo de poner un ticket en GitHub a ver si lo solucionan. A las malas hacemos un fork y se lo mandamos que lo reparen.

Bueno, pues no se hable mucho más de este tema. Simplemente decir que iré actualizando el contenido del artículo para ir ofreciendo, poco a poco, una mejor solución a tus problemas según me los vaya solicitando la comunidad.