Web API見本市
OS連携権限不要スマホ推奨判定中...

Battery Status API

端末のバッテリー残量・充電状態・満充電/放電までの推定時間を取得し、変化イベントも購読できるAPI。

MDNのドキュメントを見る

1対応判定

ブラウザ対応バージョン
Chrome38+
Firefox未対応(43で追加後52で削除)
Safari未対応

備考: Chromium限定

2権限フロー

  1. 権限不要このAPI

    API呼び出しだけで動く。プロンプトも操作起点の縛りもない

  2. ユーザージェスチャー必須

    ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない

  3. 権限プロンプトあり

    呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ

  4. iOS独自requestPermission

    iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

権限プロンプトなし。navigator.getBattery() を呼ぶだけで取得できる。

3ライブデモ: バッテリー残量ゲージのリアルタイム表示

4コードスニペット

TypeScript(要約版)
// バッテリー情報の取得(権限プロンプトなし)
const battery = await navigator.getBattery();

console.log("残量:", Math.round(battery.level * 100), "%");
console.log("充電中:", battery.charging);
console.log("満充電まで:", battery.chargingTime, "秒");
console.log("放電まで:", battery.dischargingTime, "秒");

// 変化イベントを購読してリアルタイム更新
function render() {
  updateGauge(battery.level, battery.charging);
}
battery.addEventListener("levelchange", render);
battery.addEventListener("chargingchange", render);
battery.addEventListener("chargingtimechange", render);
battery.addEventListener("dischargingtimechange", render);

// 後始末: リスナー解除
battery.removeEventListener("levelchange", render);