Supporté par ChromeSupporté par FirefoxNon supporté par EdgeNon supporté par Safari/iOS Battery Status API : Démo HTML5

Mise à jour : 2017-01-22
Cette API permet de récupérer des informations sur la batterie pour les appareils qui en sont équipés.
Des évènements permettent aussi de suivre l'évolution de l'état de chargement de la batterie et d'anticiper la charge et décharge complète.

Battery Status API

Notes sur le tuto


Exemple de code HTML5

État de la batterie (standard) :<br>
<span id="std" class="ko">navigator.getBattery() non supporté !</span><br>
<script>
	function lpad(n){return (n < 10 ? "0" : "") + n}
	function second2Time(secondes){
		if (Number.isInteger(secondes)){
			time = new Date()
			time.setTime(secondes * 1000)
			return lpad(time.getHours())+":"+lpad(time.getMinutes())+":"+lpad(time.getSeconds())
		} else {
			return secondes
		}
	}
	function batteryStatus(battery, id) {
		msg  = (battery.charging ? "En charge" : "Pas en charge")
		                         + " à " + battery.level * 100 + " %<br>"
		msg += second2Time(battery.chargingTime) + " avant la charge</br>"
		msg += second2Time(battery.dischargingTime) + " avant la décharge"
		test = document.getElementById(id)
		test.innerHTML = msg
		test.className = "ok"
	}
	navigator.getBattery().then(function(battery){
		batteryStatus(battery, "std")
        battery.onchargingchange = function(){batteryStatus(battery, "std")}
	})
</script>
<br>
État de la batterie (déprécié/Mozilla) :<br>
<span id="moz" class="ko">navigator.battery non supporté !</span>
<script>
    batteryStatus(navigator.battery, "moz")
    navigator.battery.onchargingchange = function(){batteryStatus(navigator.battery, "moz")}
</script>

Démonstration du résultat HTML5


État de la batterie (standard) :
navigator.getBattery() non supporté !

État de la batterie (déprécié/Mozilla) :
navigator.battery non supporté !

Détection automatique du support HTML5

Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
<script src="_html5detect.js"></script>
<script>
	isItemSupported("navigator.getBattery", true)
	isItemSupported("navigator.battery")
</script>		

Can I Use battery-status? Data on support for the battery-status feature across the major browsers from caniuse.com.