Hace algún tiempo os hablé de una nueva Api llamada Page Visibility, con la que teníamos la capacidad de detectar cuándo un usuario tenía la ventana visible. Sin embargo, esto no garantiza que el usuario esté realizando acciones sobre nuestro sitio web, simplemente que no está oculto en la barra de tareas, detrás de otras ventanas, en otro tab, etcétera.
En este post me gustaría hablaros de la posibilidad de detectar cuándo la página tiene el foco o, lo que es lo mismo, cuándo el usuario está trabajando con nuestra aplicación.
Evento hasFocus
El método hasFocus nos permite comprobar, a través de true o false, si en un momento determinado el documento está activo. Al no tratarse de un evento, es necesario realizar la comprobación periódicamente o bien a consecuencia de otra acción:
[html]<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
width: 384px;
height: 308px;
}
.withoutFocus {
color: white;
background-image: url(‘/images/shrek-cat.jpg’);
}
.withFocus {
color: white;
background-image: url(‘/images/shrek-donkey.jpg’);
}
</style>
</head>
<body>
<div id="userAction">
</div>
<script>
window.onload = function () {
var message = document.getElementById(‘userAction’);
setInterval(function () {
if (document.hasFocus()) {
message.className = "withFocus";
message.innerHTML = "The document has the focus.";
}
else {
message.className = "withoutFocus";
message.innerHTML = "The document doesn’t have the focus";
}
}, 200);
};
</script>
</body>
</html>
[/html]
Si hacemos clic fuera del documento (por ejemplo en la barra de direcciones) comprobaremos que tanto el texto como la imagen cambian. En este caso se está haciendo una comprobación cada 200 milisegundos a través de un setInterval, donde comprobaremos si el documento sigue teniendo el foco.
Este ejemplo es extremadamente simple, pero puede ser utilizado para paralizar las actualizaciones del sitio, compaginarlo con Page Visibility, utilizarlo como fallback si no está soportada la Api comentada, etcétera.
Espero que haya sido de utilidad.
¡Saludos!
eso no garantiza que el usuario este haciendo algo, lo que garantiza es que el usuario tenga activa la pagina. Si pulsas la ventana en la barra de direcciones se te activa, pero puedo no estar haciendo nada
Hola,
Gracias por tu comentario. Garantiza que la ventana está activa, al igual que Page Visibility sólo garantiza que la ventana está visible (que tampoco garantiza que el usuario esté haciendo algo con la app).
Sin embargo, con cualquiera de las dos aproximaciones nos aporta mayor control sobre la gestión de nuestros recursos si se quiere. Este tipo de aproximaciones lo utilizan web apps del tipo Tweetdeck, Grooveshark, etcétera. Aunque es una suposición, es algo más acotado pensar que el usuario «puede» estar haciendo algo con nuestro sitio si la ventana está activa o visible, que si la tiene minimizada o ni siquiera tiene el foco 😉
¡Saludos!