En este tutorial te vamos a mostrar cómo utilizar la Battery API de JavaScript para mejorar la experiencia de aquellas personas que siempre están necesitadas de un cargador de móvil. Es por eso que desgranaremos cada caracterísitica de esta API, así como algunas técnicas para sacar el máximo provecho de cada gota del más preciado de los recursos.
Monitorizando la duración de la batería
La Battery API de Javascript se relaciona con el hardware del dispositivo y nos ofrece datos precisos sobre el estado de la carga del sistema. Podemos acceder a través de navigator.getBattery(), o directamente a través del objeto navigator.battery, aunque la segunda opción actualmente está obsoleta y, en general, no se recomienda.
Algunos navegadores carecen de soporte para la Battery API (sí lo has adivinado, son Safari e IE), así que no estaría de más, antes de ponerte en faena, comprobar antes si el navegador es compatible con esta útil API:
if(navigator.getBattery){
// Battery API available.
// Rest of code goes here.
}
else{
// No battery API support.
// Handle error accordingly.
}
Una vez que estamos seguros de que el usuario puede acceder a la API, obtener la información que necesitamos es un proceso más sencillo:
navigator.getBattery()
.then(function(batteryManager) {
// Get current charge in percentages.
var level = batteryManager.level * 100;
})
.catch(function(e) {
console.error(e);
});
El método getBattery() devuelve una promesa y resuelve con un objeto BatteryManager que contiene información sobre el estado actual del hardware:
- batteryManager.level: La carga actual, devuelve un float entre 0 y 1.
- batteryManager.charging: Está el dispositivo cargándose o no. Devuelve un true/false.
- batteryManager.chargingTime: Tiempo que queda hasta que la batería se cargue en segundos.
- batteryManager.dischargingTime: Tiempo que queda hasta que la batería se descargue en segundos.
También nos proporciona eventos que podemos utilizar para monitorizar cualquier cambio en las anteriores propiedades:
- BatteryManager.onlevelchange
- BatteryManager.onchargingchange
- BatteryManager.onchargingtimechange
- BatteryManager.ondischargingtimechange
Combinando la información con los eventos, podemos crear un avisador para niveles bajos de batería.
navigator.getBattery()
.then(function(battery) {
battery.onlevelchange = function() {
if(battery.level < 30 && !battery.charging) {
powerSavingMode = true;
}
}
});
Una vez que conocemos la carga que le queda al dispositivo podemos adaptar la aplicación y activar el modo de ahorro de energía si se necesita.
Ahorrando energía
El componente que más chupa la batería de los dispositivos es la pantalla. Esto es así, sobretodo en los smartphones y las tabletas, donde a menudo encuentras CPU con ahorro de energia, mientras que las pantallas tienen una resolución extraordinariamente ultra-full-QHD con el brillo de dos soles a la vez.
Lo primero y más importante que podemos hacer para solucionar este problema es limitar la cantidad de luz que la pantalla está emitiendo. JavaScript no tiene la autoridad para controlar el brillo directamente, pero podemos hacerlo cambiando la paleta de colores a un tema más oscuro.
Lo siguiente que podemos hacer es limitar la cantidad y el tamaño de las peticiones a recursos externos. Los mayores consumidores de energía aquí son las imágenes de alta resolución, los anuncios, y las grandes librerías de JavaScript, ya que necesitan una gran cantidad de ancho de banda para descargarse.
Aquí tenemos dos opciones: o cargar una alternativa (recursos optimizados, ligeros y pensados para ese fin), o bien, eliminar por completo las imágenes/anuncios si no representan toda la información esencial. Cualquier fondo, imagen, video o animación debe ser eliminado si no aporta nada al contenido y si no es esencial.
El último chupóptero de batería del que vamos a hablar es de JavaScript. Ya hemos mencionado que la descarga de grandes librerías y frameworks es bastante perjudicial, pero la ejecución de bloques de JS también puede conducir a gastos innecesarios.
Las animaciones de JavaScript ocasionan la redefinición constante de elementos en pantalla, los sonidos de notificaciones y las múltiples peticiones AJAX pueden agotar la batería en un periodo muy corto de tiempo. De acuerdo con un estudio, el código JavaScript de Yahoo consume ~ 7% de la batería total, ~ 17% en Amazon, y más del 20% en YouTube.
Más información
Si deseas obtener más información sobre la Battery API o sobre formas más precisas de ahorrar batería en tus aplicaciones, puedes echar un vistazo a estos excelentes recursos:
Battery Status API on MDN
The BatteryManager interface on MDN
5 Ways to Improve Battery Life in Your App
Who Killed My Battery: Analyzing Mobile Browser Energy Consumption
Fuente: tutorialzine.com