Reaccionar antes de la suspensión en apps Windows 8 JavaScript


Game OverCuando desarrollamos una aplicación para Windows 8 debemos tener en cuenta los eventos de suspensión y resumen para que nuestra aplicación reaccione correctamente. Al principio, el evento de suspensión nos parecerá un buen candidato para guardar dónde estaba el usuario antes de suspender.

En muchas aplicaciones será así, pero en algunas nos causará algunos problemas que puede que nos pasen desapercibidos, pero no a nuestros usuarios.

Pongamos un pequeño ejemplo: estamos haciendo un juego de zombis hambrientos; durante el mismo, los zombis se nos van acercando peligrosamente. Si por cualquier motivo el jugador cambia de aplicación durante el juego, nosotros, que nos hemos leído bien los requisitos del Windows Store, pondremos el juego en pausa cuando ocurra el evento de suspensión…

La suspensión no es determinista

  • ¿Qué ocurrirá? Cuando el jugador vuelva a su partida habrá perdido porque los zombis ya se lo habrán comido.
  • ¿Por qué? Porque la aplicación habrá continuado en ejecución durante 10 segundos sin que el usuario la vea, suficiente para que el zombi llegue hasta el jugador.
  • ¿Cómo? La suspensión no es de efecto inmediato, no es determinista, ocurre en una ventana de aproximadamente 10 segundos desde que la aplicación no está visible.

Lo que debemos hacer en estos casos es utilizar el evento de cambio de visibilidad para realizar las operaciones necesarias. En las aplicaciones XAML tenemos el evento Window.Current.VisibilityChanged, en JavaScript el evento está en el elemento document y lo encontraremos como visibilitychange.

Para probarlo, creamos una aplicación JavaScript vacía y añadimos el código que sigue. Podremos ver cómo y cuándo se ejecutan estos eventos, pues iremos lanzando el resultado de los eventos por la pantalla:

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    function log(str) {
        var body = document.body;
        function format(txt) {
            return new Date() + ": " + txt + "<br/>";
        }
        body.innerHTML = format(str);
        log = function (txt) {
            body.insertAdjacentHTML("beforeEnd", format(txt));
        };
    }

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            } else {
            }
            args.setPromise(WinJS.UI.processAll());
            
            document.addEventListener("visibilitychange", function (e) {
                log("La visibilidad cambió a " + document.visibilityState);
            });
        }
    };

    app.oncheckpoint = function (args) {
        log("La aplicación se suspendió");
    };

    app.start();
})();

Y aquí podéis ver el resultado, entre que se esconde la aplicación y ésta pasa a modo “hidden” pasan más de 10 segundos:

Anuncios

Un Comentario

  1. Pingback: Motor de animaciones para aplicaciones HTML (Web + Windows Store) « Mouseless Me

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s