Battery Status API : Démo HTML5
Mise à jour : 2017-01-22
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
- Attributs :
- charging : indicateur de chargement (branché/débranché).
- chargingTime : durée avant la charge.
- dischargingTime : durée avant le déchargement.
- level : % de charge.
- Évènements :
- onchargingchange : changement de l'état branché/débranché.
- onchargingtimechange : changement de la durée avant charge.
- ondischargingtimechange : changement de la durée avant décharge.
- onlevelchange : changement du % de charge.
Notes sur le tuto
- Branchez/débranchez votre appareil pour voir son statut de charge évoluer.
- La durée indique "Infinity", lorsqu'elle ne peut être évaluée (chargingTime/débranché, dischargingTime/branché).
- Limitations :
- La durée de chargement n'est pas réévaluée lors du branchement et reste sur "Infinity".
- Firefox supporte une spécification dépréciée ("navigator.battery" est remplacé par "navigator.getBattery()") :
- Démo fonctionnelle sous Firefox.
- Chrome 46 sous Lollipop (Android 5.0) n'actualise pas la durée de décharge et reste sur "Infinity".
- Chrome et Firefox remontent des informations erronées sous Jelly Bean (Android 4.1.1).
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>