Además de introducir nuevos elementos, las personas detrás del estándar web, W3C, también introdujeron un conjunto de APIs de JavaScript que permiten a los desarrolladores comunicarse con el sistema del dispositivo, incluida la obtención del estado de la batería.
Hoy en día, muchas personas están en movimiento con sus dispositivos móviles, teléfonos y tabletas, en todas partes. La energía de la batería sigue siendo una fuerza de la naturaleza con la que lidiar, pero discutiremos eso en otro día.
Esta API puede ser útil cuando, por ejemplo, construyes una aplicación que en algún momento ejecutará una función que consumirá energía de la batería. Si podemos obtener la información de la batería y luego mostrar una notificación si la cantidad de energía no cumple con los requisitos de la aplicación, esto aconsejará al usuario que administre sus recursos de manera adecuada.
Cómo Utilizar la Battery Status API
En este ejemplo, sin embargo, no voy a construir una aplicación. Más bien, simplemente vamos a recuperar el estado de la batería y mostrarlo en el navegador. Lamentablemente, el soporte para esta API no es excelente. Puedes comprobar la compatibilidad en este sitio web.
La batería se define con navigator.battery, y para obtener el nivel de la batería, usamos navigator.battery.level. La salida del nivel de batería está en formato decimal, por lo que lo multiplicamos por 100 para eliminar los números decimales, así:
var battery = navigator.battery;
var level = battery.level * 100;
var levelBar = $('.level');La API también proporciona la propiedad charging, que podemos usar para identificar si la batería está en estado de carga.
Ejemplo de Uso
En el siguiente fragmento de código, agregamos clases HTML a nuestra marca HTML según el estado de la batería, para que luego podamos agregar reglas de estilo específicas en CSS.
if (battery.charging) {
levelBar.addClass('charging');
} else if (level > 65) {
levelBar.addClass('high');
} else if (level >= 35) {
levelBar.addClass('med');
} else {
levelBar.addClass('low');
}En el ejemplo anterior, si la batería está siendo cargada, agregamos una clase llamada “charging” y luego agregamos las clases “high“, “med” y “low” respectivamente según el rango especificado del nivel de batería. Además, también debemos especificar el ancho de la barra que debe seguir el nivel de batería.
if (!battery.charging) {
levelBar.css('width', level + '%');
}En CSS, establecemos los estilos y colores de la batería de la siguiente manera;
.battery .level {
height: 100%;
width: 2%;
}
.battery .level.high {
background-color: #27AE60;
}
.battery .level.med {
background-color: #E67E22;
}
.battery .level.low {
background-color: #E74C3C;
}
.battery .level.charging {
background-color: #27AE60;
width: 100%;
text-align: center;
}
.battery .level.charging:before {
content: '\e800';
display: block;
height: 100%;
width: 100%;
color: #fff;
line-height: 40px;
font-family: 'Battery';
font-size: 25px;
}
Esto es todo, dirígete a la página de demostración para verlo en acción. Solo asegúrate de estar en un dispositivo portátil como una laptop y abre la demostración en tu navegador.
Otras Referencias
- Battery Status API — W3C
- Battery Status API — MDN
