Event Listeners en Cordova para Android y iOS

Al empezar una aplicación de Cordova una de las primeras cosas a tener en cuenta son sus event listeners, relacionados con el ciclo de vida de una app. Se trata de unos pocos eventos que conviene tener en cuenta, especialmente cuando tenemos que conservar cambios o estados al pasar nuestra aplicación a segundo plano (porque entra una llamada o porque el usuario aprieta el backbutton) y al volver a primer plano.

Así que examinemos brevemente estos event listeners:

Relacionados con el Ciclo de Vida

deviceready

el evento esencial, marca cuando Cordova está cargada y preparada para accederse, para evitar que la parte del Javascript sea llamada antes de que esté accesible en el DOM. Una vez se dispara este evento, el sistema ya escucha nuestra programación.

pause

se dispara cuando una aplicación pasa a segundo plano o background (ver especificaciones particulares para iOS). Es especialmente importante para guardar estados o datos importantes que no queramos que el usuario pierda.

resume

se dispara cuando una aplicación pasa a primer plano (ver especificaciones particulares para iOS)

Relacionados con los Botones (sólo Android)

backbutton

sobrescribe el comportamiento por defecto del botón de ir atrás

menubutton

sobrescribe el comportamiento por defecto del botón de menú

searchbutton

sobrescribe el comportamiento por defecto del botón de buscar

Ejemplos

function writeConsole() {
 console.log("DEVICE READY");
 document.addEventListener("pause", onPause, false);
 document.addEventListener("resume", onResume, false);
 document.addEventListener("backbutton", onBackKeyDown, false);
 document.addEventListener("menubutton", onMenuKeyDown, false);
 document.addEventListener("searchbutton", onSearchKeyDown, false);
 cordova.plugins.email.isAvailable( function (isAvailable) {
 console.log("EMAIL PLUGIN AVAILABLE");
 });
}
function onPause() {
 console.log("ON PAUSE");
}
function onResume() {
 console.log("ON RESUME");
}
function onBackKeyDown() {
 console.log("ON BACK KEY DOWN");
}
function onMenuKeyDown() {
 console.log("ON MENU KEY DOWN");
}
function onSearchKeyDown() {
 console.log("ON SEARCH KEY DOWN");
}

Ponemos nuestra llamada a writeConsole() en el ready del documento. El ready dependerá del framework de vista que utilicemos. Por ejemplo, si utilizamos (muy recomendable) ionic, lo deberíamos poner en el $ionicPlatform.ready:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
    writeConsole()
  });
})

Más información en la página oficial de Cordova.