In this tutorial we’re going to show you how to use the JavaScript Battery API to improve the user experience for people in desperate need of a charger. We’ll look at the Battery API itself, as well as some techniques for getting the most out of every drop of the most precious of resources!
Some browsers lack support for the Battery API (you guessed it; Safari and IE), so a quick support check can go a long way in terms of debugging:
if(navigator.getBattery){
// Battery API available.
// Rest of code goes here.
}
else{
// No battery API support.
// Handle error accordingly.
}Once we are sure that your user can access the API, grabbing the needed information is really easy:
navigator.getBattery()
.then(function(batteryManager) {
// Get current charge in percentages.
var level = batteryManager.level * 100;
})
.catch(function(e) {
console.error(e);
});Combining the raw data with the event listeners, we can easily set up a watcher for low battery levels:
navigator.getBattery()
.then(function(battery) {
battery.onlevelchange = function() {
if(battery.level<0.3 && !battery.charging) {
powerSavingMode = true;
}
}
});PRESERVING ENERGY
The biggest battery drainer of all components is the screen. This is especially true on smartphones and tablets where often CPUs are energy preserving, while the screens have super-ultra-full-QHD resolution with the brightness of two suns.
The first and foremost thing we can do to address this issue is limit the amount of light the screen is emitting. JavaScript doesn’t have the authority to control the brightness directly, but we can do so by changing the color pallette to a darker theme.
The next thing we can do is limit the number, and size, of requests to external resources. The biggest drainers here are high-res images, advertisements, and large JavaScript libraries, as they need a lot of bandwidth to download.
Here we have two options, load an alternative, more optimized resource with a smaller footprint, or, fully remove the image/advert if it doesn’t portray any essential information. Any background images, videos, or animations should be removed.
The last battery-drainer we will talk about is JavaScript. We already mentioned that downloading large libraries and frameworks is bad enough, but the actual parsing and execution of JS block can also lead to unnecessary spending.
JavaScript animations that cause constant redrawing of elements on the screen, listening for notifications form the server, and multiple AJAX requests can all drain the battery just a tiny bit, but it quickly adds up. JavaScript code consumes ~7% of Yahoo’s total rendering energy, ~17% on Amazon, and more than 20% on YouTube.
APP WITH POWERSAVING MODE
Above, we’ve furnished you with code that will react to the amount of battery left (if that is detectable). Once the level drops below 30%, the code can then be used to reduce the power-draining aspects of the site.
Post a Comment