The front end obtains battery information

insert image description here

Positive energy today: When there are more and more strange demands, it proves that your vision is also becoming broader.

Product Manager: Add a requirement. If the user's computer equipment is about to run out of power, I will warmly tell him to plug it in.

Front-end siege lion:. . . Doesn't his computer remind himself?

Product Manager: Do you want to do it?

Front-end siege lion: Do it!
insert image description here

foreword

With the increasing development of technology, web front-end technology is far more powerful than we imagined. Browsers allow websites to obtain information about the battery status of a user's device, such as battery percentage, power remaining, charging status, and more. We can use this information to adjust our app's behavior based on the battery level of the user's device. In this article, we will discuss how to obtain battery information in the front end, using the Battery Status API.

Using the Battery Status API

The Battery Status API is a web API that allows web applications to access the battery status information of a user device. Using this API, we can read the battery level information of the device directly from the web browser without installing any application.

The main steps to obtain device battery information are as follows:

	// 请求电池信息
	navigator.getBattery().then(function (battery) {
    
    
	  // 后续代码
	})

will return a Promise object which resolves to a BatteryManager object which we can use to read the device's battery properties.

	navigator.getBattery().then(function (battery) {
    
    
	  // 获取设备电量剩余百分比
	  var level = battery.level //最大值为1,对应电量100%
	  console.log('Level: ' + level * 100 + '%')
	
	  // 获取设备充电状态
	  var charging = battery.charging
	  console.log('充电状态: ' + charging)
	
	  // 获取设备完全充电需要的时间
	  var chargingTime = battery.chargingTime
	  console.log('完全充电需要的时间: ' + chargingTime)
	
	  // 获取设备完全放电需要的时间
	  var dischargingTime = battery.dischargingTime
	  console.log('完全放电需要的时间: ' + dischargingTime)
	})

Monitor battery status changes

In order to better reflect the battery status of the user's device, we can add events in the front end to monitor changes in the battery status. For example, an event is fired when a device's battery level changes. Some common events are listed for you:

	navigator.getBattery().then(function (battery) {
    
    
	  // 添加事件，当设备电量改变时触发
	  battery.addEventListener('levelchange', function () {
    
    
	    console.log('电量改变: ' + battery.level)
	  })
	
	  // 添加事件，当设备充电状态改变时触发
	  battery.addEventListener('chargingchange', function () {
    
    
	    console.log('充电状态改变: ' + battery.charging)
	  })
	
	  // 添加事件，当设备完全充电需要时间改变时触发
	  battery.addEventListener('chargingtimechange', function () {
    
    
	    console.log('完全充电需要时间: ' + battery.chargingTime)
	  })
	
	  // 添加事件，当设备完全放电需要时间改变时触发
	  battery.addEventListener('dischargingtimechange', function () {
    
    
	    console.log('完全放电需要时间: ' + battery.dischargingTime)
	  })
	})

compatibility

In terms of compatibility, the Battery Status API is not applicable to all devices and operating systems. Developers need to perform compatibility processing to ensure that our applications can run on all devices. The following is the compatibility view corresponding to this API:

insert image description here
Obtaining device battery information through the Battery Status API is a powerful way to optimize application behavior based on device battery status. Note that this API is not available for all devices and operating systems, and some device manufacturers may not allow battery information to be shared.