Introduction to a HTML5 API showing battery status

The share of mobile devices is growing exponentially in network traffic, and the amount of network traffic it contributes is so great that we have created some APIs and design ideas for mobile devices alone. A very typical example is the common-system battery status API, which allows an application to learn about the battery state information of a device. This article explores this new API to show you how to integrate it into your existing application.

Detect if the device supports

The current battery API is still not supported by mainstream. Therefore, you need to verify that the current device supports this API before using this API. The function shown below returns a Boone value (True/false) indicating whether the current browser supports the battery status API.

The function first detects whether the Navigator.battery object exists. If it does not exist, continue to detect the Mozilla-specific

Whether the navigator.mozbattery exists. I've seen some code that also detects the Webkitbattery object, but I can't confirm whether it exists in chrome.

Reference Document: Https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery

xml/html code to copy content to clipboard

Functionisbatterystatussupported () {

return!! (Navigator.battery | | navigator.mozbattery);

}

Check the battery

If the battery object exists, it will contain the following four read-only properties.

charging--(Boone Value) indicates whether the system's battery is currently charging.

The return value is True if the battery is not present in the system or is not able to determine if the battery is charging

chargingtime--(value) The time it takes for the battery to fully charge (in seconds)

This value is 0 when the battery is fully charged or the system does not have a battery.

This value is ∞ (infinity) If the system is not charging, or is unable to determine the time required to fully fill the electricity.

dischargingtime--and Chargingtime similar, (value) to battery discharge until the rest of the system is dormant (in seconds)

If the discharge time is uncertain, or the system does not have a battery or the system is charging, this value is ∞ (infinity)

level--(value) the current power rating of the device. The value is in the (0 ~ 1.0) interval, which corresponds to the remaining charge percentage.

1.0 means the battery is fully charged, or there is no battery, or the value is not determined.

Detecting Battery Events

All of the above properties are bound to a battery event. These events are used to indicate changes in the battery state. For example, inserting a power supply causes the charging property to change from false to true. All of the four battery events are listed below:

chargingchange--This type of event will be triggered when the charging property changes. This event can be captured and handled by the Onchargingchange () event handler.

chargingtimechange--This type of event will be triggered when the Chargingtime property changes. This event can be captured and handled by the Onchargingtimechange () event handler.

dischargingtimechange--This type of event will be triggered when the Dischargingtime property changes. This event can be captured and handled by the Ondischargingtimechange () event handler.

levelchange--This type of event is triggered when the level property changes. This event can be captured and handled by the Onlevelchange () event handler.

Sample page

The following code shows how to use the properties and events of the battery State API.

The sample page shows the individual property values for the API and updates their values when the event is triggered.

Click here to visit the online sample.

xml/html Code copy content to clipboard

2. <! DOCTYPE HTML>
4. < Htmllang Htmllang="en">
6. < Head >
8. < title > The Battery Status api-example</title>
10. < Metacharset Metacharset="UTF-8"/>
12. < Script >
14. Window.addeventlistener ("Load", function () {
16. var battery = navigator. Battery | | Navigator.mozbattery;
18. function Displaybatterystats () {
20. document.getElementById ("charging"). Textcontent = (battery.charging)? "Charging": "Not charging";
22. document.getElementById ("Chargingtime"). Textcontent = battery. chargingtime;
24. document.getElementById ("Dischargingtime"). Textcontent = battery. dischargingtime;
26. document.getElementById ("level"). Textcontent = battery. level * 100;
28. }
30. if (battery) {
32. Displaybatterystats ();
34. Battery.addeventlistener ("Chargingchange", Displaybatterystats, false);
36. Battery.addeventlistener ("Chargingtimechange", Displaybatterystats, false);
38. Battery.addeventlistener ("Dischargingtimechange", Displaybatterystats, false);
40. Battery.addeventlistener ("Levelchange", Displaybatterystats, false);
42. } else {
44. document.getElementById ("stats"). Textcontent = "Sorry, your browser does not support the Battery Status API" ;
46. }
48. }, False);
50. </ Script >
52. </ Head >
54. < Body >
56. < divID divID="stats">
58. Your Battery is currently <Spanidspanid="Charging"> </ span >. < BR />
60. Your Battery is charged in <Spanidspanid="Chargingtime"> </span> seconds. < BR />
62. Your battery is discharged in <Spanidspanid="Dischargingtime" > </ span > seconds. < BR />
64. Your battery level are <Spanidspanid="level"></ Span>%.
66. </ Div >
68. </ Body >
70. </ HTML >

Conclusion

This article gives a complete summary and presentation for the battery Status API, although it is still not mainstream support, but it is only a matter of time. Given the proliferation of mobile Internet, developers should incorporate the battery information into the design category as soon as possible.