Uno de los conceptos más discutidos en el mundo del diseño web es el diseño responsive. Se han escrito miles de artículos sobre el diseño responsive, y creo que ya no nos quedan fuerzas para hablar más de ello. De hecho, creemos que ya está todo dicho. De todas maneras, el diseño responsive cuenta con una limitación importante, siempre estará basado en el tamaño de la ventana del navegador que esté utilizando el usuario.
Mientras que esto viene bien, por ejemplo, para mostrar imágenes en el tamaño y resolución correctos, no es ideal en toda clase de situaciones, por ejemplo con los vídeos. Lo que realmente necesitamos, en esos casos, es más información acerca de las capacidades de red del dispositivo.
Imagina que estás visitando YouTube en tu smartphone o tablet. Te encuentras en casa conectado a tu WiFi. En ese caso, seguro que no te preocupa lo más mínimo la tasa de datos que están siendo descargados, sino más bien en el contenido del vídeo a alta calidad que estás disfrutando. Pero el caso varía si tienes que depender de conexiones 3G o 4G. En ese caso, solamente querrás ver el vídeo. La calidad será secundaria.
Creo que está claro que cualquier desarrollador que se precie debe optimizar los assets para permitir que las páginas carguen lo más rápido posible. Sin embargo, utilizando el ejemplo anterior, servir un vídeo a alta resolución no es una pérdida del ancho de banda del usuario, sino una mejora de la experiencia del usuario.
La Network Information API es exáctamente lo que necesitamos para obtener más información sobre la conexión de red del dispositivo que el usuario esté utilizando.
¿Qué es?
La Network Information API nos proporciona acceso al tipo de conexión que el sistema utiliza para comunicarse con la red: red móvil, Wi-Fi, Bluetooth, etc. También nos proporciona una función para los scripts para ser notificados si cambia el tipo de conexión. Esto es para permitirnos hacer cambios dinámicos en el DOM y/o informar al usuario de que el tipo de conexión de red ha cambiado.
La primera versión de la Network Information API se lanzó en 2011, pero la API se ha modificado varias veces desde entonces. A pesar de los cambios, los casos en los que podemos usar esta API son tan interesantes que realmente vale la pena explorarla. En este artículo veremos algunas de las propiedades y eventos de esta interesante API.
Implementación
La versión actual de la API nos brinda un objeto de conexión que pertenece al objeto window.navigator. El objeto de conexión contiene una propiedad, type, el cual nos devuelve el tipo de conexión que está utilizando el usuario. La propiedad type puede tener uno de los siguientes valores:
- bluetooth
- celular
- ethernet
- none
- wifi
- other
- unknown
Algunos de estos valores, tales como Bluetooth y WiFi, son fáciles de entender, mientras que otros necesitan un poco más de explicación. El tipo celular se refiere a una conexión móvil, tales como 3G, 4G, etc. El tipo other significa que el tipo de conexión actual se desconoce, pero no es ninguno de las conexiones listadas antes. El tipo unknown significa que el usuario ha establecido una conexión de red, pero no se puede determinar qué tipo de conexión es.
Además de type, la Network Information API nos proporciona el evento ontypechange. Se dispara cada vez que el tipo de conexión cambia.
Los desarrolladores podemos utilizar la Network Information API para cambiar ciertas características en función del tipo de conexión actual. Por ejemplo, podemos frenar un proceso que ocupa un ancho de banda significativo si se detecta que el dispositivo utiliza una conexión móvil. La API también nos permite asignar una clase específica para el elemento html, por ejemplo, de high-bandwidth, tal y como hace Modernizr. Podemos aprovechar el CSS para cambiar una o más propiedades de un elemento, como la imagen de fondo.
Ahora que sabemos lo que hace la Network Information API, vamos a ver qué navegadores la soportan.
Demo
Hasta ahora, hemos visto las propiedades y los eventos que nos brinda la API, así como casos de uso. En esta sección, vamos a crear una página web sencilla para ver la API en acción.
La demostración consiste en una página de HTML 5 que contiene una lista desordenada de tres elementos. Cada elemento contiene un fragmento de texto para comprobar el valor de las propiedades expuestas por la vieja y la nueva especificación de la API de información de la red. Los elementos de la lista están ocultos por defecto y sólo se muestran si las propiedades correspondientes son compatibles.
La demo también detecta si el navegador implementa la antigua versión de la API y si el navegador es compatible con la Network Information API. En el primer caso, verás el mensaje API version supported, y en el segundo caso, el mensaje será API not supported.
Las pruebas para el soporte de la Network Information API son muy simples, como puedes ver a continuación:
// Deal with vendor prefixes
var connection = window.navigator.connection ||
window.navigator.mozConnection ||
null;
if (connection === null) {
// API not supported :(
} else {
// API supported! Let's start the fun :)
}
Para detectar si la versión implementada es antigua, podemos comprobar la presencia de la propiedad metered, como muestro a continuación:
if ('metered' in connection) {
// Old version
} else {
// New version
}
Una vez que hemos probado el soporte de la Network Information API y hemos descubierto qué versión es compatible con el navegador, podemos adjuntar un controlador para el evento correcto. Dentro del controlador actualizamos el texto del elemento de la lista correspondiente, por ejemplo type para la nueva especificación API.
Puedes encontrar el código completo de la demo a continuación:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Aurelio De Rosa">
<title>Network Information API Demo by Aurelio De Rosa</title>
<style>
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{
max-width: 500px;
margin: 2em auto;
padding: 0 0.5em;
font-size: 20px;
}
h1
{
text-align: center;
}
.api-support
{
display: block;
}
.hidden
{
display: none;
}
.value
{
font-weight: bold;
}
.author
{
display: block;
margin-top: 1em;
}
</style>
</head>
<body>
<h1>Network Information API</h1>
<span id="ni-unsupported" class="api-support hidden">API not supported</span>
<span id="nio-supported" class="api-support hidden">Old API version supported</span>
<ul>
<li class="new-api hidden">
The connection type is <span id="t-value" class="value">undefined</span>.
</li>
<li class="old-api hidden">
The connection bandwidth is <span id="b-value" class="value">undefined</span>.
</li>
<li class="old-api hidden">
The connection is <span id="m-value" class="value">undefined</span>.
</li>
</ul>
<small class="author">
Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a>
(<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br />
This demo is part of the <a href="https://github.com/AurelioDeRosa/HTML5-API-demos">HTML5 API demos repository</a>.
</small>
<script>
var connection = window.navigator.connection ||
window.navigator.mozConnection ||
null;
if (connection === null) {
document.getElementById('ni-unsupported').classList.remove('hidden');
} else if ('metered' in connection) {
document.getElementById('nio-supported').classList.remove('hidden');
[].slice.call(document.getElementsByClassName('old-api')).forEach(function(element) {
element.classList.remove('hidden');
});
var bandwidthValue = document.getElementById('b-value');
var meteredValue = document.getElementById('m-value');
connection.addEventListener('change', function (event) {
bandwidthValue.innerHTML = connection.bandwidth;
meteredValue.innerHTML = (connection.metered ? '' : 'not ') + 'metered';
});
connection.dispatchEvent(new Event('change'));
} else {
var typeValue = document.getElementById('t-value');
[].slice.call(document.getElementsByClassName('new-api')).forEach(function(element) {
element.classList.remove('hidden');
});
connection.addEventListener('typechange', function (event) {
typeValue.innerHTML = connection.type;
});
connection.dispatchEvent(new Event('typechange'));
}
</script>
</body>
</html>
Fuente: Avinash Zala