このAPI自体は現在 Deprecated
となっているようなので、使用しないことをお勧めします。
(あくまで自身の勉強メモとしてこちらに書き残しています)
利用しているデバイスのバッテリー状況を取得するWeb API (Battery Status API)
たまたま見つけた Battery Status API という利用しているデバイスのバッテリー残量を取得するためのWeb API
ブラウザの対応状況を見ると、Chromeなどであれば対応しているようです。
というわけで下記のようなサンプルを作成してみました。
※ create-react-app
で雛形を作成し、react hooks使いながら書いています。
ソースコード全体はGithubに置いています。
import React, { useState, useEffect } from "react"; import "./App.css"; function App() { const [isSupportBatteryManager, setSupportBatteryManager] = useState(false); const [batteryCharging, setBatteryCharging] = useState(""); const [batteryLevel, setBatteryLevel] = useState(""); const [batteryChargingTime, setBatteryChargingTime] = useState(""); const [batteryDischargingTime, setBatteryDischargingTime] = useState(""); useEffect(() => { const getBattery = async () => { if (window.navigator.getBattery) { setSupportBatteryManager(true); const battery = await window.navigator.getBattery(); setBatteryCharging(battery.charging ? "Yes" : "No"); setBatteryLevel(battery.level * 100 + "%"); setBatteryChargingTime(battery.chargingTime + " seconds"); setBatteryDischargingTime(battery.dischargingTime + " seconds"); } else { setSupportBatteryManager(false); } }; getBattery(); }, []); return ( <div className="App"> {isSupportBatteryManager ? ( <> <p>Battery Charging: {batteryCharging}</p> <p>Battery Level: {batteryLevel}</p> <p>Battery Charging Time: {batteryChargingTime}</p> <p>Battery Discharging Time: {batteryDischargingTime}</p> </> ) : ( <p>This browser is not support battery manager</p> )} </div> ); } export default App;
Chromeだと正常にバッテリー情報を取得できていますが、例えばFirefoxだと window.navigator.getBattery
が存在しないためバッテリー情報は取得できません。
非推奨となっているので使う機会はないと思いますが、こういうAPIもあるのだなと勉強になりました。