How to Know the Battery Status of Your Visitor's Mobile Phone

How to Know the Battery Status of Your Visitor's Mobile Phone

When Visitors visits your website, you can easily take the information regarding the charge level of their mobile/ laptop batteries through the API Battery Status. This will be supported on Google Chrome, Opera & Firefox on the desktop and Chrome for Android.

The Battery API will be implemented with JavaScript code and reveals the details about all the required the device’s battery charge level. You will get to know:

1. Whether the battery of visitor is currently being charged.

2. How much the battery is charged?

3. How many seconds until the battery is fully charged If charging.

4. Until the battery is completely discharged The remaining time in seconds.


Attach the event listeners so that the battery data is updated as soon as the charge level of the battery is changed while the visitor is still on your page. You can go one step further and even integrate this with the Google Analytics and store the charge level of battery of visitor’s devices using Events in Analytics.

<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>

For Example, when the visitor’s device is running on low battery and it is not plugged-in, the web developer can automatically choose to  save the changes like the form entries in the local Storage before the battery is completely drained.

The complete list of browsers that currently support the Batter Status API found on caniuse.com.