En este tutorial, le mostraremos cómo usar la API de batería de JavaScript para mejorar la experiencia del usuario para las personas que necesitan desesperadamente un cargador. Veremos la batería API en sí, así como algunas técnicas para aprovechar al máximo cada gota de los recursos más preciados.
Supervisión de la duración de la batería
La API de estado de la batería de JavaScript se comunica con el hardware del dispositivo y nos brinda datos precisos sobre el estado de carga del sistema. Se puede acceder a través de la interfaz navigator.getBattery() basada en promesas, o directamente a través del objeto navigtator.battery, aunque la segunda opción ahora está obsoleta y no se recomienda en general.
Algunos navegadores carecen de compatibilidad con la API de batería (lo adivinó, son Safari e IE), por lo que una verificación rápida de asistencia puede ser de gran ayuda en términos de depuración:
if(navigator.getBattery){
// Battery API available.
// Rest of code goes here.
}
else{
// No battery API support.
// Handle error accordingly.
} Una vez que estemos seguros de que su usuario puede acceder a la API, obtener la información necesaria es muy fácil:
navigator.getBattery()
.then(function(batteryManager) {
// Get current charge in percentages.
var level = batteryManager.level * 100;
})
.catch(function(e) {
console.error(e);
});
El getBattery() método devuelve una promesa y se resuelve con un BatteryManager objeto que contiene información diversa sobre el estado actual del hardware:
batteryManager.level- La carga actual, devuelve un valor flotante entre 0 y 1.batteryManager.charging- Si el dispositivo está conectado a la fuente de alimentación o no, devuelve verdadero/falso.batteryManager.chargingTime- Tiempo restante en segundos hasta la carga completa.batteryManager.dischargingTime- Tiempo restante hasta que se agote la batería.
También proporciona eventos que se pueden usar para monitorear cambios en cualquiera de las propiedades anteriores.
BatteryManager.onlevelchangeBatteryManager.onchargingchangeBatteryManager.onchargingtimechangeBatteryManager.ondischargingtimechange
Al combinar los datos sin procesar con los detectores de eventos, podemos configurar fácilmente un monitor para niveles bajos de batería:
navigator.getBattery()
.then(function(battery) {
battery.onlevelchange = function() {
if(battery.level<0.3 && !battery.charging) {
powerSavingMode = true;
}
}
}); Una vez que sepamos cuánto jugo queda en el dispositivo, podemos adaptar la aplicación y activar un modo de ahorro de energía si es necesario.
Preservar la energía
El mayor consumidor de batería de todos los componentes es la pantalla. Esto es especialmente cierto en los teléfonos inteligentes y las tabletas, donde a menudo las CPU conservan energía, mientras que las pantallas tienen una resolución QHD super-ultra-full con el brillo de dos soles.
Lo primero y más importante que podemos hacer para solucionar este problema es limitar la cantidad de luz que emite la pantalla. 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 solicitudes a recursos externos. Los mayores consumidores aquí son las imágenes de alta resolución, los anuncios y las grandes bibliotecas de JavaScript, ya que necesitan mucho ancho de banda para descargar.
Aquí tenemos dos opciones:cargar un recurso alternativo más optimizado con una huella más pequeña o eliminar por completo la imagen/anuncio si no muestra ninguna información esencial. Todas las imágenes de fondo, videos o animaciones deben eliminarse.
El último consumidor de batería del que hablaremos es JavaScript. Ya mencionamos que descargar grandes bibliotecas y marcos es bastante malo, pero el análisis y la ejecución reales del bloque JS también pueden generar gastos innecesarios.
Las animaciones de JavaScript que causan el rediseño constante de los elementos en la pantalla, escuchar las notificaciones del servidor y múltiples solicitudes de AJAX pueden agotar la batería solo un poco, pero se acumula rápidamente. Según este estudio, el código JavaScript consume ~7 % de la energía de renderizado total de Yahoo, ~17 % en Amazon y más del 20 % en YouTube.
Aplicación con modo de ahorro de energía
Hemos mostrado algunos de los conceptos anteriores en una sencilla aplicación de demostración. Consiste en un sitio web estático que reacciona a la cantidad de batería restante. Cuando está por debajo del 30 %, la aplicación entra en Ahorro de energía y se oscurece, detiene todas las animaciones y elimina todos los anuncios.
Para fines de demostración, nuestra aplicación funciona con una batería virtual para permitir alternar rápidamente entre completamente cargado y casi muerto. no contiene mucho código para trabajar con la propia API de batería.
Puede obtener el código completo para la demostración desde Descargar botón cerca de la parte superior del artículo. Está escrito en Vue.js para facilitar el monitoreo de datos y tiene muchos comentarios para guiarlo a través de todo lo que está sucediendo.
Lecturas adicionales
Si desea obtener más información sobre la API de estado de la batería o sobre las formas en que su valiosa batería se está agotando, consulte estos excelentes recursos:
API de estado de la batería en MDN - aquí
La interfaz BatteryManager en MDN - aquí
5 formas de mejorar la duración de la batería en su aplicación - aquí
Quién mató a mi batería:análisis del consumo de energía del navegador móvil:aquí