I have made a battery level monitor using web programming languages. Here is my code :
if('getBattery' in navigator)
{
navigator.getBattery().then(function get(battery)
{
var l=Math.round(battery.level*100);
var d=document. getElementById('level'), lab=document. getElementById ('label');
d. style. height=l+"%";
lab.innerHTML=l+" %";
if(l>=50)
{
d. style. backgroundColor="#00ff00";
lab. style. color="#000";
}
else if(l>=20)
d. style. backgroundColor="#0000ff";
else
d. style. backgroundColor="#ff0000";
});
}
else
alert("Battery API not supported on your browser !");html, body {width: 100%; height: 100%; margin: 0; padding:0;}
body {background-color: black;}
#level {position: absolute; text-align: center; left: 0; right: 0; margin: 5mm;}
#label {font-size: 1cm; left: 0; right: 0; text-align: center; color:#fff; top: 50%; position: absolute; transform: translateY (-50%);}<html>
<head>
<title>Battery level</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="level">
<label id="label"></label>
</div>
</body>
</html>What I noticed is that, in the Android version of Chrome, the output of this program is very very slow. It takes about 10 seconds in my Android phone to display the battery level. Whereas, in the desktop version of Chrome, the battery level is displayed within a fraction of second.
I had also tried this Battery status API demo, but still the same problem.
Previously, in earlier versions of Chrome, it used to work fine, but since I upgraded to the latest version (77), this problem is occurring. When I uninstalled the updates and downgraded Chrome to the factory version and again tried to run the program, it worked fine, but on reinstalling the latest version, the problem is still there.
What could be the probable cause for this slowdown and how to fix this? Am I missing some important settings in the latest version of Google Chrome? Please help.
