La API Battery (Batería) en HTML5 con JavaScript

Ver ejemplo Descargar fuente

Si alguna vez has querido ajustar tu aplicación web según el nivel de batería del dispositivo —ya sea para activar un modo oscuro, reducir animaciones o simplemente mostrar un aviso de “te estás quedando sin batería”— entonces la Battery API de HTML5 es exactamente lo que necesitas. Aunque su soporte actual es muy limitado (sí, Firefox te sigo queriendo), sigue siendo una API interesante que te permite trabajar con información energética del dispositivo directamente desde JavaScript.

A lo largo de este artículo te voy a explicar cómo funciona, sus eventos, sus limitaciones y varios casos reales donde la he usado. Vamos a sacarle todo el jugo que nos queda a esta API.

Una de las muchas APIs para JavaScript que permiten trabajar con los componentes de los dispositivos móviles, es la API de la batería, que se encuentra accesible a través del objeto navigator.battery; esta API provee información sobre el nivel de carga actual del dispositivo móvil; además provee una serie de eventos que se ejecutan cuando el dispositivo móvil pasa de un estado a otro, por ejemplo:

• Si el dispositivo móvil pasa de fase de carga a desconectado (de la energía).
• Tiempo de duración de la batería.

Entre otros estados; aunque se pueda llegar a pensar que esta API no tiene mucha utilidad al momento de la creación de una aplicación web para dispositivos en comparación con otras como:

• La API Vibration (Vibración) en HTML5.
• Eventos de Luz Ambiental con JavaScript.
• Accediendo a la cámara y el micrófono de un dispositivo con JavaScript.
• Detectando la orientación del dispositivo con el API de javaScript.

Es importante mencionar que puede tener una utilidad según el propósito que se desee de la aplicación; por ejemplo una aplicación web que oscurezca ciertos elementos de la interfaz con tal de ajustar los colores cuando la batería es escasa con el objetivo de apagar pixeles en la pantalla y de esta forma ahorrar la batería.

Atributos del objeto navigator.battery

Las siguientes propiedades están provistas por el objeto navigator.battery:

Qué es la Battery API y para qué sirve en una aplicación web

La Battery API, también conocida como Battery Status API, ofrece información en tiempo real sobre el estado de la batería del dispositivo:

• Nivel de carga
• Si está enchufado/cargando
• Tiempo estimado para carga completa
• Tiempo estimado para descarga total

Es una API pensada para que las aplicaciones web puedan ajustarse automáticamente al estado energético del usuario. Por ejemplo: activar un modo ahorro, desactivar efectos pesados o priorizar tareas críticas.

Eventos del objeto navigator.battery

Es posible definir una serie de eventos:

Cómo funciona la obtención del objeto BatteryManager

Para usar la API, el navegador expone el método:

const battery = await navigator.getBattery();

Podemos ver el resumen de todas las propiedades y eventos en la siguiente sección:

// Obtenemos el objeto battery segun el navegador
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// propiedades
battery.charging;
battery.level;
battery.dischargingTime;
// eventos
battery.addEventListener("chargingchange", function(e) {}, false);
battery.addEventListener("chargingtimechange", function(e) {}, false);
battery.addEventListener("dischargingtimechange", function(e) {}, false);
battery.addEventListener("levelchange", function(e) {}, false);

Diferencias entre navigator.battery y navigator.getBattery()

Cuando comencé con esta API usaba algo como:

navigator.battery || navigator.webkitBattery || navigator.mozBattery;

Hoy eso está obsoleto, y la forma correcta es navigator.getBattery().

La primera variante solo funciona en navegadores muy antiguos y no deberías usarla en proyectos nuevos.

Propiedades clave de BatteryManager explicadas paso a paso

level: conocer el nivel de batería en tiempo real

• Devuelve un valor entre 0.0 y 1.0.
• Para mostrarlo como porcentaje: battery.level * 100.

Recuerdo que la primera vez que lo usé me sorprendió lo rápido que se actualizaba al desconectar el cargador; ideal para disparar pequeños cambios visuales.

charging: detectar si el dispositivo está cargando

• true si el dispositivo está enchufado.
• false si se está descargando.

Esto es perfecto si quieres desactivar modos de ahorro automáticamente cuando el usuario conecta su móvil.

chargingTime y dischargingTime: cómo interpretar los tiempos estimados

Estos valores están en segundos y pueden ser:

• 0 → si está totalmente cargado
• Un número positivo
• Infinity → cuando el navegador no puede calcular el tiempo
  (esto me pasaba muy seguido mientras probaba en portátiles antiguos)

Eventos de la Battery API y cómo reaccionar a cambios de estado

levelchange

Se dispara cuando cambia el nivel de batería.

chargingchange

Se dispara cuando el dispositivo comienza o deja de cargar.

chargingtimechange

Cuando varía el tiempo estimado de carga.

dischargingtimechange

Cuando cambia el tiempo estimado de descarga.

Más de una vez usé el evento levelchange para lanzar un aviso de “modo ahorro activado”, y honestamente, le daba un toque muy pro a la interfaz.

Ejemplos prácticos con JavaScript (incluye async/await y .then)

Obtener el BatteryManager y mostrar el nivel de batería

navigator.getBattery().then(battery => {
 console.log("Nivel:", battery.level * 100 + "%");
});

Versión async/await:

const battery = await navigator.getBattery();
console.log(`Batería: ${battery.level * 100}%`);

Escuchar eventos para actualizar la interfaz automáticamente

navigator.getBattery().then(battery => {

 function updateBatteryUI() {
   console.log("Cargando:", battery.charging);
   console.log("Nivel:", battery.level * 100 + "%");
 }
 updateBatteryUI();
 battery.addEventListener("levelchange", updateBatteryUI);
 battery.addEventListener("chargingchange", updateBatteryUI);
});

Crear alertas o modos de ahorro cuando la batería está baja

Este ejemplo lo usé yo para oscurecer partes de la UI:

navigator.getBattery().then(battery => {
 battery.addEventListener("levelchange", () => {
   if (battery.level < 0.30 && !battery.charging) {
     document.body.classList.add("ahorro-bateria");
   } else {
     document.body.classList.remove("ahorro-bateria");
   }
 });
});

Casos reales de uso: cuándo tiene sentido usar esta API

• Adaptar el diseño cuando la batería es baja
  • Modo oscuro, eliminar sombras, bajar brillo simulado, etc.
• Reducir cargas externas, animaciones o imágenes
  • Por ejemplo si la batería esta por debajo del 20%. La página se volvía más ligera instantáneamente.
• Ajuste de UI dinámico
• Modo lectura
• Ahorro automático
• Pausar tareas no críticas

Navegadores que la soportan realmente hoy

El soporte es muy limitado (deprecated) en muchos navegadores principales (como Firefox y Safari en iOS/macOS) debido a preocupaciones sobre la privacidad:

• Firefox: ✔ Funciona
• Chrome: ✘ Eliminado hace años por privacidad
• Edge: ✘ No disponible
• Safari: ✘ Nunca lo soportó

Preguntas frecuentes sobre la Battery API

• ¿Sigue funcionando en 2025?
  • Sí, pero principalmente en Firefox.
• ¿Puedo detectar batería baja en JavaScript?
  • Sí: battery.level < 0.20.
• ¿Es segura?
  • Los navegadores restringieron su uso por privacidad, de ahí su desactivación en la mayoría.
• ¿Cómo obtener el nivel de batería?
  • const battery = await navigator.getBattery(); battery.level.
• ¿Hay alternativas modernas?
  • No directas. Hoy dependes del navegador.

Conclusión

La Battery API de HTML5 con JavaScript es pequeña pero poderosa. Aunque hoy está limitada por temas de privacidad, sigue siendo una herramienta útil para proyectos experimentales, interfaces que se adaptan al usuario o aplicaciones web que optimizan su consumo energético.

Y, por experiencia propia, cuando juegas con sus eventos y propiedades, empieza a abrirte ideas creativas sobre qué puede hacer una interfaz cuando sabe cuánta batería le queda al dispositivo.

Enlace para la documentación oficial Battery Status API - W3C.

Ver ejemplo Descargar fuente