Pause y Resume

Mediante los eventos “pause” y “resume” se puede añadir funcionalidad a una aplicación de Apache Cordova, en función de que ésta entre o salga del segundo plano de ejecución. Esto es muy útil para casos en los que se necesita que la aplicación siga realizando acciones o cálculos aún cuando haya pasado a segundo plano, o cuando es necesario controlar cuando abandona este estado.

Para esta demostración partiremos de una de otra de las aplicaciones de demostración del proyecto, más concretamente la que hace referencia al plugin InAppBrowser, mediante la cual una aplicación Cordova puede abrir un navegador web. Se puede consultar previamente la documentación de dicha aplicación.(Mirar en aplicaciones)

Al abrir el navegador mediante este plugin, la aplicación Cordova que lo utiliza pasa a segundo plano de ejecución, del mismo modo que saldrá del mismo cuando el navegador se cierre. En esta sección vamos a controlar ambas condiciones.

Modificando el código de assets/www/index.html en el proyecto correspondiente a la demostración de InAppBrowser. La función onDeviceReady(), que se lanza cuando la API de Cordova está cargada, quedaría de la siguiente forma:

document.addEventListener("deviceready", onDeviceReady, false);
            var button = document.getElementById("show"); 
var veces = 0;
function onDeviceReady(){ document.getElementById("veces").innerHTML = "<span>N&uacute;mero de veces: "+veces+"</span>"; //escuchadores de eventos document.addEventListener("pause", onPause, false); document.addEventListener("resume", onResume, false); button.addEventListener( "click", function(){ /* abrir un nuevo enlace en la ventana InAppBrowser */ var ref = window.open('http://cordova.apache.org', '_system', 'location=no'); ref.show(); }, false ); }
function onPause() {
                veces++;
                document.getElementById("veces").innerHTML = "<span>N&uacute;mero de veces:"+veces+"</span>";
            }
            
            function onResume() {
                alert("Aplicacion activa");
            }

Como podemos ver se trabaja con los siguientes eventos:

  • “pause” – Este evento se lanza cuando la aplicación se ejecuta en segundo plano.
  • “resume” – Este evento se lanza cuando la aplicación vuelve a ejecutarse en primer plano.
  • “deviceready” – Se lanza cuando la API de Cordova está completamente cargada. Esto suele ocurrir antes de que finalice la carga del DOM de Javascript

Cuando la aplicación pase a segundo plano, las instrucciones que se ejecuten con “pause” no van a ser visibles. Por lo tanto, hemos añadido una variable que simplemente va a contabilizar las veces que se pasa a este estado, y después se mostrará en el código HTML.

var veces = 0;   
document.getElementById("veces").innerHTML = "<span>N&uacute;mero de veces "+veces+"</span>";

Seguidamente, se agregan  los correspondientes escuchadores de eventos:

document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);

Dejando tal como está el resto de la función. Por último, se añaden las funciones correspondientes a los eventos. En el caso de onPause(), se controla que cada vez que la aplicación pase a segundo plano, se incremente la variable contador, y posteriormente actualice su valor en el código HTML. De esta forma, el número cambiará cada vez que volvamos a la aplicación:

function onPause() {
     veces++;
     document.getElementById("veces").innerHTML = "<span>N&uacute;mero de veces:"+veces+"</span>";
    }

Cuando la aplicación vuelva al primer plano, simplemente se mostrará un mensaje de tipo alert de JavaScript:

function onResume() {
    alert("Aplicacion activa");
    }

De esta forma, se consegue controlar y añadir funcionalidad a la aplicación cuando entra y sale del segundo plano de ejecución, algo que puede resultar muy útil dependiendo de las necesidades de un proyecto.