利用しているデバイスのバッテリー状況を取得するWeb API (Battery Status API)

このAPI自体は現在 Deprecated となっているようなので、使用しないことをお勧めします。
(あくまで自身の勉強メモとしてこちらに書き残しています)

利用しているデバイスのバッテリー状況を取得するWeb API (Battery Status API)

たまたま見つけた Battery Status API という利用しているデバイスのバッテリー残量を取得するためのWeb API

developer.mozilla.org

ブラウザの対応状況を見ると、Chromeなどであれば対応しているようです。
というわけで下記のようなサンプルを作成してみました。

※ create-react-app で雛形を作成し、react hooks使いながら書いています。
ソースコード全体はGithubに置いています。

github.com

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もあるのだなと勉強になりました。