今回はJavaScriptで端末のバッテリー情報を取得する方法を紹介します。

navigator.getBattery

JavaScriptで端末のバッテリー情報を取得する場合は、navigator.getBatteryメソッドを利用します。
具体的な使用方法は以下の通りです。

navigator.getBattery()
.then((battery) => {
    // 以下処理内容記載
)

navigator.getBatteryメソッドは、バッテリー状態に関する各種情報やバッテリーの状態監視できるイベントを提供してくれます。

navigator.getBatteryメソッドの返りはプロミスで返されるため、.then()で欲しい情報を取得することができます。

navigator.getBatteryで取得できる値

取得できる値は以下の4点です。

charging（充電状態）

chargingは現在の充電状態を表す値です。
充電中であれば「true」、そうでなければ「false」となります。

chargingTime（フル充電までの時間）

chargingTimeはフル充電までにかかる時間（秒数）を返してくれます。
充電していない場合は「Infinity」となります。

dischargingTime（充電切れまでの時間）

dischargingTimeは充電切れまでにかかる時間（秒数）を返してくれます。
充電中の場合は「Infinity」となります。

level（バッテリー残量）

levelはバッテリー残量を0～1の間で返してくれます。
上記の場合はバッテリー残量が51%の状態です。

navigator.getBatteryで監視できるイベント

navigator.getBatteryメソッドでは、バッテリーに関する各種値の他にバッテリー状態の監視イベントを提供してくれます。

具体的なイベントは以下の4つです。

それぞれ、各値が変更された際にその変更を検知することができます。

イベントを有効化する

navigator.getBattery()
.then((battery) => {
    // chargingchangeイベントを追加
    battery.addEventListener("chargingchange", () => {
        updateChargeStatus()
    })

    function updateChargeStatus() {
        console.log(`現在充電してますか？： ${battery.charging ? "はい" : "いいえ"}`);
    }
})

バッテリーの状態変更を監視するためのイベント追加は上記のようにイベントリスナーで任意のイベントを追加します。

上記は、chargingchangeイベントを追加し、充電の状態を取得することができるようになっています。

充電状態が変更されるたびにupdateChargeStatusが実行されるようになっています。

まとめ

今回は、JavaScriptで端末のバッテリー情報を取得する方法について紹介させていただきました。

navigator.getBatteryメソッドを利用することで、充電状態やフル充電までの時間、充電切れまでの時間、現在のバッテリー残量を取得できることがわかりました。

使いどころは中々限られると思いますが、JavaSriptでこういったこともできるということを覚えておくだけでもいいかなと思います。