Spanish (Español) translation by Rolando Gonzalez (you can also view the original English article)
En tiempos anteriores, teníamos navegadores que no contaban con navegación por pestañas, pero hoy en día, cuando nos fijamos en todos los navegadores disponibles, podemos ver que todos los navegadores ofrecen esto. Siendo un programador, normalmente tengo 10-15 pestañas abiertas a la vez, algunas veces vas más allá de 25-30.
¿ Por qué esta API?
Antes, no era posible determinar que pestaña estaba activa y cual no, pero con la ayuda de la API de Visibilidad de HTML5, podemos detectar si nuestro visitante está mirando nuestra página web o no.
En este tutorial vamos a entender cómo tratar con la API de Visibilidad de HTML5 y una sencilla demostración de descubrir el estado de nuestra página. En esta demostración vamos a modificar el título del documento basado en el estado de la visibilidad de la página.
Chequeando el estado de visibilidad de la página.
Con el lanzamiento de esta API hemos dado la bienvenida a dos nuevas propiedades de documento que hacen dos funciones diferentes. La primera de ellas es document.visibilityState y la segunda document.hidden.
document.visibilityState tiene cuatro valores diferentes que son de la siguiente manera:
- hidden: (Oculto): La página no está visible en ninguna pantalla
- prerender: (Pre-Reproducir): La página se carga fuera de la pantalla y no esta visible para el usuario
- visible: la página esta visible
- unloaded: (Descargada): La página está a punto de descargar (el usuario está navegando lejos de la página actual)
document.hidden es una propiedad booleana, que se establece en false (Falso) si la página es visible y true (Verdadero) si la página está oculta.
Ahora podemos controlar la forma en que nuestros sitios web se comportarán cuando nuestro sitio web está oculta para el usuario.
Ahora mismo sabemos de la disponibilidad de nuestras propiedades, pero ahora es el momento de escuchar el evento para que podamos ser notificados acerca de la nueva condición de la visibilidad de la página. Esto se realiza mediante el evento visibilitychange. Vamos a ver una demostración rápida de cómo trabajar con este evento.
1 |
document.addEventListener('visibilitychange', function(event) { |
2 |
if (!document.hidden) { |
3 |
// The page is visible.
|
4 |
} else { |
5 |
// The page is hidden.
|
6 |
}
|
7 |
});
|
Este código es simplemente un ejemplo básico de la utilización de este evento y descubre el estado actual de la página web. Pero para hacerte saber que estas dos propiedades y métodos se deben utilizar el prefijo de vendedor, debido a que estos eventos y propiedades son con prefijos de vendedor en algunos de los navegadores. Ahora vamos a ver el mismo código de una manera que sirva en distintos navegadores:
1 |
// Get Browser-Specifc Prefix
|
2 |
function getBrowserPrefix() { |
3 |
|
4 |
// Chequear por la propiedad sin prefijos.
|
5 |
if ('hidden' in document) { |
6 |
return null; |
7 |
}
|
8 |
|
9 |
// Todos los prefijos posibles.
|
10 |
var browserPrefixes = ['moz', 'ms', 'o', 'webkit']; |
11 |
|
12 |
for (var i = 0; i < browserPrefixes.length; i++) { |
13 |
var prefix = browserPrefixes[i] + 'Hidden'; |
14 |
if (prefix in document) { |
15 |
return browserPrefixes[i]; |
16 |
}
|
17 |
}
|
18 |
|
19 |
// La API nos es soportada por el navegador.
|
20 |
return null; |
21 |
}
|
22 |
|
23 |
// Obtener la propiedad specífica oculta del navegador
|
24 |
function hiddenProperty(prefix) { |
25 |
if (prefix) { |
26 |
return prefix + 'Hidden'; |
27 |
} else { |
28 |
return 'hidden'; |
29 |
}
|
30 |
}
|
31 |
|
32 |
// Obtener la propiedad de estado visible del navegador
|
33 |
function visibilityState(prefix) { |
34 |
if (prefix) { |
35 |
return prefix + 'VisibilityState'; |
36 |
} else { |
37 |
return 'visibilityState'; |
38 |
}
|
39 |
}
|
40 |
|
41 |
// Obtener el evento specífico del navegador
|
42 |
function visibilityEvent(prefix) { |
43 |
if (prefix) { |
44 |
return prefix + 'visibilitychange'; |
45 |
} else { |
46 |
return 'visibilitychange'; |
47 |
}
|
48 |
}
|
49 |
Tenemos todas las propiedades del navegador con el prefijo y el evento está listo para ser aplicado. Ahora vamos a cambiar nuestro código
1 |
// Obtener el prefijo del navegador
|
2 |
var prefix = getBrowserPrefix(); |
3 |
var hidden = hiddenProperty(prefix); |
4 |
var visibilityState = visibilityState(prefix); |
5 |
var visibilityEvent = visibilityEvent(prefix); |
6 |
|
7 |
document.addEventListener(visibilityEvent, function(event) { |
8 |
if (!document[hidden]) { |
9 |
// The page is visible.
|
10 |
} else { |
11 |
// The page is hidden.
|
12 |
}
|
13 |
});
|
¿Dónde podemos usar esta API?
Hay un número de diferentes escenarios en los que podemos considerar el uso de esta API.
- Imagínese que usted está en el panel de control de la página y la página está conectando constantemente y obteniendo información de algún canal RSS o API en intervalos regulares diremos que en dos minutos. Así que podemos restringir la llamada al canal RSS o API si la página no está visible para el usuario (es decir, el usuario no está realmente viendo la página).
- Para un carrusel de imágenes. Podemos limitar el movimiento de imágenes cuando la página se oculta.
- In a similar manner, we can show HTML Notification only when page is hidden to the user.
De una manera similar, podemos mostrar Notificación HTML sólo cuando la página se oculta para el usuario.
Demostración
- Demo 1: Esta demostración presenta el uso de la API de Visibilidad de la página para cambiar el título de página. Ver la demostración
- Demo 2: Esta demo muestra cómo podemos restringir los datos de votación desde el servidor cuando la página está inactiva.
En esta demostración, vamos a examinar cómo podemos restringir la comunicación constante con algún servidor para obtener información actualizada, pero sólo cuando el usuario está mirando la página. Asumo que jQuery ya está incluido en tu página. Aquí vamos a aumentar sólo el conteo, pero esto puede ser reemplazado con la conexión real al servidor.
El HTML
1 |
<!-- Este elemento mostrara un contador actualizado -->
|
2 |
<h1 id="valueContainer">0</h1> |
El JavaScript
1 |
<script type="text/javascript"> |
2 |
|
3 |
// Obtener el prefijo del navegador
|
4 |
var prefix = getBrowserPrefix(); |
5 |
var hidden = hiddenProperty(prefix); |
6 |
var visibilityState = visibilityState(prefix); |
7 |
var visibilityEvent = visibilityEvent(prefix); |
8 |
|
9 |
var timer = null; |
10 |
|
11 |
function increaseVal() { |
12 |
var newVal = parseInt($('#valueContainer').text()) + parseInt(1); |
13 |
$('#valueContainer').text(newVal); |
14 |
document.title = newVal + ': Running'; |
15 |
|
16 |
timer = setTimeout(function() { |
17 |
increaseVal(); |
18 |
}, 1); |
19 |
}
|
20 |
|
21 |
// Cambio de Visibilidad
|
22 |
document.addEventListener(visibilityEvent, function(event) { |
23 |
if (document[hidden]) { |
24 |
clearTimeout(timer); |
25 |
var val = parseInt($('#valueContainer').text()); |
26 |
document.title = val + ': Pause'; |
27 |
} else { |
28 |
increaseVal(); |
29 |
}
|
30 |
});
|
31 |
|
32 |
increaseVal(); |
33 |
|
34 |
</script> |
Compatibilidad para Navegadores
Si quieres ver la compatibilidad con navegadores para esta API, entonces te aconsejo mirar Puedo Usar?. Pero para encontrar la compatibilidad de navegadores programables te sugeriría tomar este artículo Detectar Compatibilidad a las diversas características de HTML5. Hasta el momento tenemos muy buen soporte para esta API en casi todos los principales y más recientes navegadores.
Conclusión
Yo diría que hemos tenido una muy buena API que incluye sólo dos propiedades y un solo evento. De esta manera, se puede integrar fácilmente con tu aplicación existente que puede afectar positivamente tu experiencia de usuario. En última instancia, ahora podemos controlar la forma en nuestros sitios web se comportarán cuando nuestro sitio web está oculto para el usuario.
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
By
