Front-end to get battery information

Today's positive energy: When strange needs are made more and more, it proves that your vision is also becoming broad.

Product Manager: Add a requirement that if a user's computer device is running out of power, I have to warmly tell him it's time to plug it in.

Front-end Attack Lion:. His computer will not remind itself?

Product Manager: You do not do?

front-end attack lion: do!

Preface

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

Use of the Battery Status API

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

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

// Request battery information
navigator.getBattery().then(function (battery) {
 // Subsequent code
})

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

navigator.getBattery().then(function (battery) {
  // Get the percentage of device power remaining
  var level = battery.level //Maximum value is 1, corresponding to 100% power
  console.log('Level: ' + level * 100 + '%')

  // Get device charging status
  var charging = battery.charging
  console.log('Charging status: ' + charging)

  // Get the time it takes to fully charge the device
  var chargingTime = battery.chargingTime
  console.log('The time needed to fully charge: ' + chargingTime)

  // Get the time it takes to fully discharge the device
  var dischargingTime = battery.dischargingTime
  console.log('The time required for complete discharge:' + dischargingTime)
})

Listening for battery status changes

To better reflect the battery status of the user's device, we can add events to the front-end to monitor changes in the battery status. For example, when the battery level of the device changes, an event will be triggered. Some give you a list of some common events:

navigator.getBattery().then(function (battery) {
  // Add event to trigger when device power changes
  battery.addEventListener('levelchange', function () {
    console.log('Power change: ' + battery.level)
  })

  // Add event to trigger when device charging status changes
  battery.addEventListener('chargingchange', function () {
    console.log('Charging status change: ' + battery.charging)
  })

  // Add an event that triggers when the time it takes for the device to fully charge changes
  battery.addEventListener('chargingtimechange', function () {
    console.log('Takes time to fully charge: ' + battery.chargingTime)
  })

  // Add an event that triggers when the device takes time to change when fully discharged
  battery.addEventListener('dischargingtimechange', function () {
    console.log('Time required for complete discharge: ' + battery.dischargingTime)
  })
})

Compatibility

Compatibility-wise, the Battery Status API is not available for all devices and operating systems, and developers need to do compatibility work to make sure our apps will work on all devices. The following is the corresponding compatibility view for this API:

Getting 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 sharing of battery information.

Link to original article:https://juejin.cn/post/7222996459833622565