Web-Dex (BATT·SYS)

Web-Dex (BATT·SYS)

Bueno, ahora que tengo un poco de tiempo libre, quería hacer un par de ejemplos de las API.

Con el primero que pensé era unos ejemplos de la batería mostrando imágenes de Pokémon, la línea evolutiva de Pikachu.

Puedes verlo si tienes Chrome aqui

1. Hook

El navegador tiene información sobre el nivel de la batería.

Las API web exponen el hardware real del dispositivo sin dependencias, sin tokens de autenticación ni solicitudes de red. La API de estado de la batería es uno de los ejemplos menos utilizados, pero también uno de los más útiles de inmediato.

---

2. ¿Qué es la API web de estado de la batería?

Esto es todo lo que se necesita:

const battery = await navigator.getBattery();

navigator.getBattery() retorna un Promise que al resolverse en un objeto BatteryManager. que expone la siguiente información:

Property	Type	Description
level	float (0–1)	El nivel de la bateria. 1.0 = 100%
charging	boolean	Si el dispositivo está enchufado
chargingTime	seconds	Tiempo hasta la carga completa (Infinito si no se está cargando)
dischargingTime	seconds	Tiempo hasta que se agote (Infinito si se está cargando)

Y cuatro eventos que se activan cuando cambia cualquiera de esos valores:

battery.addEventListener('levelchange',          () => update(battery));
battery.addEventListener('chargingchange',        () => update(battery));
battery.addEventListener('chargingtimechange',    () => update(battery));
battery.addEventListener('dischargingtimechange', () => update(battery));

Sin bibliotecas. Sin frameworks. El navegador envía las actualizaciones; tu función se ejecuta cuando algo cambia realmente.

Esa es toda la interfaz de la API. Cuatro propiedades, cuatro eventos, una llamada asíncrona para empezar.

---

3. Browser Support Reality Check

Browser	Support
Google Chrome	✅ Supported
Microsoft Edge	✅ Supported
Opera	✅ Supported
Firefox	❌ Removed
Safari	❌ Not supported

Los navegadores basados en Chromium lo permiten. Firefox y Safari no, y hay un motivo.

Firefox eliminó deliberadamente la API de estado de la batería, alegando el riesgo de huella digital. El nivel de batería, combinado con el tiempo de carga/descarga, crea una firma de dispositivo sorprendentemente única. Investigadores demostraron que los sitios web podían rastrear a los usuarios entre sesiones e incluso entre diferentes navegadores en el mismo dispositivo, sin cookies, sin almacenamiento local, solo a partir de las lecturas de la batería.

Es una verdadera disyuntiva: datos útiles del dispositivo frente a un vector de huella digital pasivo. Mozilla priorizó la privacidad. Chromium priorizó la funcionalidad.

Si desarrollas con esta API, incluye una alternativa. Cuando navigator.getBattery no esté definido, gestiona la degradación de forma segura:

if (!('getBattery' in navigator)) {
  // show fallback UI — API not available
  return;
}

El Github lo puedes encontrar aquí github

Y aquí una imagen de los estados: