JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Cómo sacar partido en tus aplicaciones al modo de ahorro de datos de los navegadores

En nuestro mundo occidental de abundancia, alto poder adquisitivo (respecto a otras zonas del mundo), tarifas planas 4G y cientos de Mbps en casa a precio de risa, cuando navegas por Internet lo que menos te importa es cuánto ancho de banda consumes.

Sin embargo, en muchos otros países y en determinadas circunstancias (por ejemplo, cuando estás con el roaming en el extranjero) el ahorro de datos al visitar webs es una cuestión crucial.

Respondiendo al indicador de ahorro de datos

Para este tipo de casuísticas existe una característica sugerida en el IETF llamada Data-Save Hint, que forma parte de la propuesta HTTP Client Hints creada por el desarrollador de Chrome Ilya Grigorik en 2015. Aunque sigue siendo tan solo una propuesta, lo cierto es que ya está implementado en varios navegadores móviles y es fácil de incorporar a los principales navegadores de escritorio.

La propuesta consiste en que los navegadores que deseen ahorrar datos a la hora de conectarse a un sitio Web lo manifiestan enviando una cabecera HTTP save-data con el valor on, lo cual informará al servidor con el que nos conectamos que nos interesa ahorrar todos los datos que podamos.

Es decir, esta cabecera por sí sola no hace nada, sino que son los servidores Web los que tienen que responder ante su presencia.

Cuando un navegador tiene esta característica activada podemos ver la cabecera en todas las peticiones:

Aspecto de la cabecera incluida en todas las peticiones al activar save-data

Esta cabecera es muy fácilmente detectable en el servidor con cualquier lenguaje de servidor:

  • ASP.NET: Request.Headers("save-data")
  • PHP: $_SERVER['HTTP_SAVE_DATA']
  • Node.js: req.get('save-data') (con Express)
  • Java: request.getHeader("save-data"); (con la clase HttpServletRequest)
  • Python: request.headers.get('save-data') (con Flask, añadiendo previamente la línea from flask import request)

Vale, y una vez activada ¿para qué nos sirve?

Pues podemos hacer muchas cosas para respetar la necesidad o deseo de nuestro visitante de usar la mínima cantidad de datos:

  • Sirviendo una versión reducida de la página, usando menos contenido supérfluo, devolviendo menos imágenes y vídeos, sirviendo las versiones minimizadas de los archivos CSS y JavaScript, eliminando la descarga de fuentes tipográficas no incluidas de serie en los navegadores...
  • Devolviendo versiones reducidas en tamaño de las imágenes, tanto modificando las direcciones como respondiendo con un módulo HTTP que redirija a otras versiones de las imágenes en caso de tener la cabecera, como añadiendo clases CSS marcadoras a ciertos elementos que forzarán el uso de diferentes recursos gráficos en este caso.
  • Cortando comunicaciones en segundo plano: tanto llamadas AJAX o señales, como evitar abrir WebSockets...

Es decir, al final se trata de evitar al máximo el trasiego de datos entre cliente y servidor.

Detección en lado cliente

Como seguramente sabes existe una propiedad global del navegador llamada navigator que nos ofrece información variada sobre el navegador actual. Esta interfaz posee una propiedad connection de tipo NetworkInformation que entre otras informaciones nos devuelve (en teoría) el estado del ajuste save-data mediante la propiedad saveData.

Es decir, si queremos obtener el estado actual de ahorro de datos bastaría con escribir:

var ahorroActivado = navigator.connection.saveData;

que devolverá true o false en función de si está o no activado.

Esto es estupendo porque nos permite no tener que depender del servidor en, por ejemplo, sitios estáticos, y actuar en consecuencia modificando la página de algun modo.

Sólo hay un problema: en el momento de escribir esto, no funciona en ningún navegador, ni móvil ni de escritorio.

Es decir, la propiedad sí que existe, pero siempre devuelve false independientemente del estado de ahorro de datos que tengamos. O al menos esa es mi experiencia...

Lo vamos a ver enseguida en la práctica.

Cómo activar el ahorro de datos en los navegadores y comprobar su funcionamiento

Es en los navegadores móviles de Android (los más comunes con mucha diferencia) en los que esta característica se ha implementado. En concreto Chrome es el pionero e incorpora un modo llamado "Lite Mode" (que en español se traduce como "Modo básico", traducción que no me gusta nada) que usa esta característica para implementarlo.

Por regla general está desactivado por defecto, o al menos en España, no sé en móviles dirigidos a otros mercados, pero he leído por ahí buscando datos al respecto (hay muy, muy pocos) que en algunos países de asia más del 20% de los usuarios lo tienen activado.

Por ejemplo, vamos a ver en funcionamiento con Chrome para Android esta página de ejemplo que he creado, que muestra el estado por defecto (sin ahorro de datos), y cómo se activa, volviendo a mostrar el resultado al refrescar la página en este modo (dale a play):

Como puedes ver, la detección mediante JavaScript no funciona y siempre devuelve false, pero la detección en el servidor (en este caso con ASP.NET) funciona perfectamente, como es lógico.

Vamos a ver lo mismo pero en Opera para Android:

El resultado es el mismo, pero se activa de manera más simple y directa.

Personalmente me gusta tenerlos siempre activados.

Otros navegadores móviles como Brave, Edge o Firefox no tienen la característica disponible. En iOs, Safari no tiene nada similar, aunque el sistema tiene un modo de ahorro de datos pero que no tiene nada que ver con esta característica.

En el escritorio los navegadores más habituales como Chrome o Firefox no ofrecen soporte de serie para esta característica, pero es muy fácil añadírsela con un par de extensiones, en concreto con estas dos:

Si las instalas a partir de ese momento todas las peticiones que hagas con estos navegadores hacia el exterior irán con la cabecera incluida. Puedes verla en funcionamiento en el caso de Chrome (sería idéntico en Firefox) en esta pequeña animación, en la que alterno entre activarla y desactivarla mostrando los resultados de la misma página de ejemplo:

Efecto de activar y desactivar la extensión en el escritorio

La mayor pega de la extensión es que no puedes activarla o desactivarla usando el icono que coloca en la barra superior del navegador, lo cual parece fácil de implementar pero no lo han hecho. Es decir, es un todo o nada y tienes que ir a las propiedades de la extensión para hacerlo, com se ve en mi animación. Pero generalmente tenerla activada no te va a provocar problemas tampoco así que... Como tú veas.

En resumen

La característica de ahorro de datos de los navegadores todavía no está muy extendida, pero en los casos que de verdad es necesaria (usuarios con restricción de datos, malas conexiones o costes muy elevados de conexión) que nuestra aplicación responda automáticamente a este modo es un plus muy grande que nos puede ayudar a satisfacer a estos usuarios y ganar puntos ante ellos, además de demostrar calidad. Por supuesto, si trabajas para usuarios que van a tener probablemente estas restricciones, como gente de países menos desarrollados o personal que trabaja en zonas remotas (como obras de ingeniería grandes), es algo que puede resultar muy útil.

La única manera segura de detectarlo, y también la que más flexibilidad nos va a dar, es hacerlo en el servidor leyendo la cabecera correspondiente. Es trivial conseguirlo en todos los lenguajes de backend. Al hacerlo podemos variar el comportamiento de la página para ahorrar muchos datos.

Su detección por JavaScript no es fiable y en mi experiencia actualmente falla siempre.

¡Espero que te resulte util!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Agregar comentario