HTML5 battery level API: Coding and Display Tips

HTML5 battery level API: Coding and Display Tips

This beginner’s guide will show you how to use the HTML5 Battery API to quickly determine the battery level and charging status.

Web apps are growing more complex and smooth for consumers in the current digital era. Understanding the battery level and charging state of the device is a vital component of the user experience. In this post, we’ll look at how to use the HTML5 Battery API to do this.

The HTML5 Battery API makes it simple for visitors to your website to quickly get crucial details about the state of their laptop or mobile device’s battery. Currently, Chrome for Android and desktop versions of Opera, Firefox, and Chrome are supported for this capability.

Notably, businesses like Uber have made use of this technology to determine the battery life of their clients’ mobile phones. Due to the apparent urgency of the customer’s request, they may occasionally use surge pricing if the battery level is low.

Only a few lines of JavaScript code are necessary for the integration of the Battery API. Implementing it gives you access to a plethora of data on the user’s device’s battery, such as:

  • Whether or whether the battery is currently charged.
  • The percentage of battery charge at the moment.
  • The projected time in seconds until the battery is fully charged, if charging.
  • The number of seconds left until the battery is anticipated to be completely depleted.

Battery Status Demo

You may connect event listeners to guarantee that battery data is continually updated as the hardware’s battery level changes while the visitor is still on your website in order to provide a realistic demonstration of battery status. You may take it a step further by integrating this capability with Google Analytics, which will enable you to use Analytics Events to record and save the power levels of the devices used by your visitors.

Here is a sample of code showing how to get the battery status:

<script>
  if (navigator.getBattery) {
    navigator.getBattery().then(function (battery) {
      display(battery);
    });
  } else if (navigator.battery) {
    display(navigator.battery);
  } else {
    console.log('Sorry, Battery Status API is not supported');
  }

  function display(battery) {
    console.log('Charge level? ' + battery.level);
    console.log('Battery charging? ' + battery.charging);
    console.log('Time to charge? ' + battery.chargingTime);
    console.log('Time to discharge? ' + battery.dischargingTime);
  }
</script>

Numerous opportunities arise as a result of this talent. For instance, a site developer can choose to automatically store changes, such form entries, to localStorage before the visitor’s device runs out of energy and is not attached to a charger.

Print Battery Level with HTML5 API:

Here is an illustration of how to use the HTML5 Battery API to display the battery level:

<!-- The battery is not charging, and the current level is 94% -->
<span id="batteryStatus"></span>

<script>
  if ('getBattery' in navigator) {
    navigator.getBattery().then((battery) => {
      const { level, charging } = battery;
      const status = charging ? 'charging' : 'not charging';
      const percent = `${Math.round(level * 100)}%`;
      const message = `The battery is ${status} and the current level is ${percent}`;
      document.getElementById('batteryStatus').textContent = message;
    });
  }
</script>

For your reference, here is a list of browsers that currently support the Battery Status API, as verified on caniuse.com. To delve deeper into this topic, consult the documentation available on Mozilla and W3.

Leave a Comment