Cómo saber el nivel de batería con HTML5

Hace relativamente poco tiempo, solo utilizábamos el móvil para llamar y para enviar mensajes de texto. Para navegar por Internet utilizábamos el ordenador y nada más. Aunque se podía navegar por Internet en el móvil era un servicio muy costoso y para nada veloz, pero con la llegada del 3G todo eso cambió. Actualmente las páginas webs son visitadas por multitud de dispositivos, ya que gozamos de conexión a Internet hayá donde vayamos gracias a las conexiones móviles y al WiFi. Las páginas webs, en estos momentos, deben estar preparadas para mostrarse en cualquier dispositivo. Es lo que se conoce como diseño responsive y siento decirte que, si tu web no se visualiza bien en un teléfono móvil o una tablet, estás muy obsoleto. No solo por los posibles visitantes que puedas perder, sino porque los buscadores han comenzado a penalizar en cuanto a posicionamiento, a aquellas páginas que aún no tengan un diseño responsive.

Existen múltiples frameworks implementados en HTML 5 con los que puedes hacer que una web sea apta para mostrarse en distintos dispositivos. Y es que HTML 5 ha sido uno de los causantes de esta revolución web, por no decir el gran protagonista. Portando la bandera del cambio, HTML5 salió en el momento justo en el que ocurría el boom de la telefonía y las conexiones móviles. Supo incorporar funciones para estos menesteres, facilitando la tarea a millones de desarrolladores que se tenían que ayudar de plugins y librerías para que su proyecto web se adaptara a la demanda del nuevo mercado móvil.

Ahora, gozamos de múltiples funciones que, no solo nos brindan la posibilidad de que una página sea vea bien en un móvil, sino que podemos tener interacción directa con este tipo de dispositivos. Hoy te vamos a mostrar cómo saber el nivel de batería de un dispositivo móvil con HTML5. Dirás, ¿y para que quiero saber esto en mi sitio web? Muy sencillo. Creo que todos queremos que el usuario permanezca el mayor tiempo posible en nuestra página web y para ello, es lógico que debe tener batería. En ciertas páginas web, existen funciones que consumen mucha memoria, agotando la batería del dispositivo. Podemos impedir estas mecánicas cuando el usuario posea poca batería. Útil, ¿verdad? ¿Quieres saber cómo llevarlo a cabo en tus proyectos? Atento...

Lo primero de todo, para llevar a cabo este tutorial tenéis que usar la especificación Battery API o Battery Status API. Esta especificación está aun en Candidate Recommendation por la W3C por lo que es posible que no funcione en todos los navegadores. Una vez aclarado esto, saber que el objeto que contendrá toda la información sobre la batería es BatteryManager . Si queremos tener una instancia de BatteryManager tenemos que llamar al método .getBattery del navegador.

navigator.getBattery().then(function (battery) {...}

Este método nos devolverá una promesa que será resuelta por el objeto en cuestión. Así, podremos acceder a diferente información sobre el estado de la batería como el nivel del usuario gracias a la propiedad .level.

console.log("Nivel de batería " + battery.level * 100 + "%");

Dirás, ¿por qué multiplica por cien el valor devuelto por battery? Pues porque el valor que nos llegará vendrá limitado entre 0,1 y 1. Si queremos tener el porcentaje real de lo que le queda de batería al usuario tendremos que multiplicarlo por cien. Con esto te acabamos de explicar ya puedes decir que sabes mostrar el nivel de batería del usuario en tu proyecto web. Pero la API nos ofrece aún más funciones, como el evento levelchange. Con este evento, podremos saber cuando cambia de nivel la batería. Bien porque se esté cargando o descargando.

Creamos un listener para BatteryManager:

battery.addEventListener('levelchange', function() {...});

Y ahora accedemos a la propiedad level para que nos indique el porcentaje de batería del usuario:

battery.addEventListener('levelchange', function() {
  console.log("Nivel de batería " + battery.level * 100 + "%");
});

Ya habéis visto lo sencillo que es saber el nivel de batería del usuario con HTML 5. Solamente quedaría un punto a revisar, y son los navegadores que soportan esta función. Actualmente es soportado con Chrome, Android Browser, Opera y parcialmente por Firefox. De todas maneras os recomiendo que le echéis un vistazo a esta web para saber las compatibilidades, ya que tienden a cambiar, con los navegadores web. Por nuestra parte nada más, si tienes dudas acerca de cómo realizar este tutorial en alguno de tus proyectos, indícanoslo en los comentarios de más abajo.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP