前端也能獲取電池資訊，5分鐘帶你瞭解奇奇怪怪的知識點

小冊

這是我整理的學習資料，非常系統和完善，歡迎一起學習

• 現代JavaScript高階小冊
• 深入淺出Dart
• 現代TypeScript高階小冊
• linwu的演算法筆記?

引言

前端其實也能獲取電池資訊，以往都是透過客戶端提供的JSBridge獲取

獲取電池資訊

透過 Battery Status API,前端可以獲取使用者裝置電池的相關資訊,比如電量百分比、充電狀態等。

// 獲取 BatteryManager 物件
navigator.getBattery().then(battery => {
  // TODO
});

• BatteryManager 物件提供了 level、charging、chargingTime 等屬性反映電池狀態。

  • 監聽 chargingchange、levelchange 等事件可以感知狀態變化。

不同電量的反饋

獲取電池資訊後,可以根據電量百分比顯示不同的提示:

• 電量低於 20%時,給出明顯的低電量警告,建議立即充電
• 電量在 20% ~ 40%時,給出友善的充電提醒
• 電量充足時,不需要特殊反饋

針對充電狀態,也可以給出不同的反饋:

• 當裝置處於充電狀態,可以顯示充電圖示、電量數字的充電動畫等
• 不在充電時,顯示普通的電量資訊

// 處理不同電量的反饋
function handleBattery(battery) {
  if (battery.level < 0.2) {
    showWarning();
  } else if (battery.level < 0.4) {
    showReminder(); 
  }

  if (battery.charging) {
    showCharging();
  } else {
    showLevel(battery.level);
  }
}

// 監聽電池狀態變化
navigator.getBattery().then(battery => {
  battery.addEventListener('chargingchange', () => {
    handleBattery(battery);
  });
  
  // ...其他事件監聽
})

相容性