Uso de la Battery Status API en aplicaciones web

La mayoría de las aplicaciones web no tienen idea de si la persona que las usa está al 8% de batería en un tren sin cargador a la vista. La Battery Status API cambia eso — al menos en algunos navegadores. Permite que tu JavaScript lea el nivel de batería del dispositivo, el estado de carga y el tiempo estimado restante, para que puedas adaptar el comportamiento de tu aplicación en consecuencia.

Este artículo explica cómo funciona la API, qué puedes hacer de manera realista con ella y por qué debes tener cuidado sobre dónde y cómo la usas.

¿Qué es la Battery Status API?

La Battery Status API expone información de la batería a través del método navigator.getBattery(), que devuelve una Promise que se resuelve en un objeto BatteryManager. Ese objeto te proporciona cuatro propiedades:

• level — un número entre 0 y 1 (por ejemplo, 0.72 significa 72%)
• charging — true si el dispositivo está conectado, false si no
• chargingTime — segundos estimados hasta carga completa
• dischargingTime — segundos estimados hasta que la batería se vacíe

Ambas propiedades de tiempo pueden devolver Infinity — cuando el dispositivo es una computadora de escritorio sin batería, cuando la estimación aún no está lista, o cuando el navegador deliberadamente oculta la precisión para limitar el riesgo de fingerprinting.

Cómo usar navigator.getBattery() de forma segura

Siempre verifica la compatibilidad antes de llamar a la API. Solo está disponible en contextos seguros (HTTPS), y aun así, solo en navegadores que la exponen.

En contextos embebidos, el acceso también puede estar restringido por la battery Permissions Policy.

async function initBatteryMonitor() {
  // Detección de características — no asumas que la API existe
  if (!('getBattery' in navigator)) {
    console.warn('Battery Status API no soportada en este navegador.')
    return
  }

  let battery

  try {
    battery = await navigator.getBattery()
  } catch (err) {
    console.error('Error al acceder a la información de batería:', err)
    return
  }

  // Leer valores iniciales
  console.log(`Nivel: ${battery.level * 100}%`)
  console.log(`Cargando: ${battery.charging}`)

  // Manejar Infinity de forma elegante antes de mostrar
  const formatTime = (seconds) =>
    seconds === Infinity ? 'Desconocido' : `${Math.round(seconds / 60)} min`

  console.log(`Tiempo de carga: ${formatTime(battery.chargingTime)}`)
  console.log(`Tiempo de descarga: ${formatTime(battery.dischargingTime)}`)

  // Escuchar cambios
  battery.addEventListener('levelchange', () => {
    console.log(`Nivel de batería actualizado: ${battery.level * 100}%`)
  })

  battery.addEventListener('chargingchange', () => {
    console.log(`Estado de carga cambió: ${battery.charging}`)
  })
}

initBatteryMonitor()

Los cuatro eventos que puedes escuchar son levelchange, chargingchange, chargingtimechange y dischargingtimechange. Cada uno se dispara cuando su valor correspondiente cambia.

Casos de uso prácticos

La API es más útil cuando quieres reducir el consumo de recursos para usuarios con batería baja:

• Pausar sincronización en segundo plano o polling cuando battery.level cae por debajo de un umbral como 0.2
• Reducir la complejidad de las animaciones o deshabilitar la reproducción automática de video
• Solicitar a los usuarios que guarden su trabajo antes de que se agote la batería
• Ajustar el comportamiento de PWA — por ejemplo, diferir solicitudes de red no críticas

Estas son mejoras progresivas. Tu aplicación debería funcionar bien sin ellas.

Compatibilidad de navegadores y preocupaciones de privacidad

Aquí es donde la Battery Status API se complica.

El soporte de navegadores actual es limitado. Firefox eliminó la API porque investigadores demostraron que podía usarse como un vector de fingerprinting — la combinación de nivel de batería y valores de tiempo era lo suficientemente específica para ayudar a rastrear usuarios entre sitios. En respuesta, los navegadores basados en Chromium pueden reducir la precisión o exponer valores predeterminados para limitar ese riesgo.

Esto significa que nunca debes confiar en la Battery API como una característica principal. Trátala como una mejora adicional agradable, y siempre escribe un comportamiento alternativo para cuando no devuelva nada.

Pruebas de la Battery API en desarrollo

Chrome DevTools actualmente no proporciona un simulador de batería integrado en Sensors. Para probar el comportamiento relacionado con la batería durante el desarrollo, tienes algunas opciones prácticas:

• Usar un dispositivo móvil real conectado vía USB con depuración remota, y observar los cambios reales del estado de la batería.
• Simular la API en tu código reemplazando navigator.getBattery con una función que devuelva un objeto BatteryManager falso con las propiedades y eventos que necesitas probar.
• Usar sobrescrituras del navegador o librerías de testing como Sinon o Jest para crear un stub de navigator.getBattery() en tu suite de pruebas.

Aquí hay un mock mínimo que puedes incluir en tu entorno de desarrollo:

function mockBattery({ level = 0.15, charging = false } = {}) {
  const fake = {
    level,
    charging,
    chargingTime: charging ? 3600 : Infinity,
    dischargingTime: charging ? Infinity : 1800,
    addEventListener: () => {},
  }

  navigator.getBattery = () => Promise.resolve(fake)
}

// Simular un dispositivo con batería baja, desconectado
mockBattery({ level: 0.08, charging: false })

Este enfoque te da control completo sobre los valores que recibe tu código, sin depender de herramientas específicas del navegador.

Conclusión

La Battery Status API es una herramienta de nicho con limitaciones reales. El soporte de navegadores es limitado, los valores son intencionalmente imprecisos, y las implicaciones de privacidad significan que su futuro es incierto. Pero en entornos controlados — herramientas internas, PWAs dirigidas a navegadores basados en Chromium conocidos, o aplicaciones estilo kiosco — puede mejorar significativamente la experiencia del usuario.

Usa detección de características, maneja explícitamente los valores Infinity, limpia tus event listeners cuando ya no sean necesarios, y nunca construyas una característica crítica sobre ella.

Preguntas frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.