Desde nuestro navegador y mediante Javascript, podemos acceder a información de la alimentación de nuestro dispositivo, ya sea este un dispositivo tablet, móvil, un ordenador portátil, o incluso un dispositivo de escritorio. Generalmente, esta alimentación suele ser una batería (de ahí su nombre), pero también puede ser alimentación de corriente.
Para acceder a esta API Javascript, simplemente accedemos al objeto navigator, concretamente:
const battery = await navigator.getBattery();
Esto nos devolverá un objeto BatteryManager, con la información que explicaremos a continuación.
El objeto BatteryManager
Este objeto es el que obtenemos de la llamada al método getBattery() anterior. En su interior, tenemos una serie de propiedades que nos dan información sobre la batería del dispositivo:
| Propiedad | Descripción |
|---|---|
charging | Indica si el dispositivo está descargándose con false, o true en cualquier otra situación. |
chargingTime | Segundos hasta que la batería esté cargada. 0 si está cargada al 100%. Infinity si es desconocido. |
dischargingTime | Segundos hasta que la batería esté descargada al 100%. Infinity si está conectada a corriente. |
level | Nivel de carga de la batería. Desde 0.0 (descargada) hasta 1.0 (cargada). |
Veamos un ejemplo:
<div class="grid">
<span>Conectado a la energía:</span>
<span></span>
<span>Tiempo para carga completa:</span>
<span></span>
<span>Tiempo para descarga completa:</span>
<span></span>
<span>Nivel de carga: </span>
<span></span>
</div>
<button>Actualizar información</button>
.grid {
display: grid;
grid-template-columns: 300px 150px;
gap: 0.5rem;
margin-bottom: 1rem;
& span {
padding: 0.5rem;
}
& span:nth-child(2n-1) {
background: #666;
color: white;
}
& span:nth-child(2n) {
font-weight: bold;
}
}
const fields = document.querySelectorAll(".grid span:nth-child(2n)");
const button = document.querySelector("button");
const updateBatteryInfo = async () => {
const battery = await navigator.getBattery();
fields[0].textContent = battery.charging ? "Sí" : "No";
fields[1].textContent = battery.chargingTime;
fields[2].textContent = battery.dischargingTime;
fields[3].textContent = battery.level * 100 + "%";
}
button.addEventListener("click", () => updateBatteryInfo());
Eventos de batería
Por otro lado, si queremos realizar acciones en situaciones concretas relacionadas con la batería, podemos utilizar los siguientes eventos:
| Evento | Descripción |
|---|---|
chargingchange | Se dispara cuando la batería se pone a cargar, o se desconecta del proceso de carga. |
chargingtimechange | Se dispara cuando cambia el tiempo estimado para la carga completa de la batería. |
dischargingtimechange | Se dispara cuando cambia el tiempo estimado para que la batería se descargue completamente. |
levelchange | Se dispara cuando cambia el nivel de carga de la batería. |
La sintaxis, es la habitual en este tipo de eventos:
const battery = navigator.getBattery();
battery.addEventListener("chargingchange", () => {
console.log("Se ha conectado/desconectado la batería a la corriente.");
});
battery.addEventListener("levelchange", () => {
console.log(`El nivel de la batería es: ${battery.level * 100}%`);
});
Como ves, muy sencillo de gestionar y trabajar.
En navegadores como Firefox han interrumpido el soporte de esta API debido a que puede tener implicaciones de seguridad. Por ejemplo, un desarrollador podría detectar (en situaciones concretas con poca actividad) a un usuario específico que tiene una capacidad o nivel de batería determinado.
