Battery Status API – HTML5 APIs

Dank HTML5 haben die Entwickler immer mehr Zugriff auf die Sensoren der Geräte. Aktuell arbeite ich an einem kleinen Projekt, dass primär auf mobilen Geräten laufen wird. Dabei ist es mir wichtig, dass die Anwendung performant ist und das Gerät nicht so stark belastet. Konkret möchte ich auf die Animationen verzichten und den Benutzer warnen, wenn der Akkustand gering wird. An dieser Stelle kommt das Battery Status API zum Einsatz. Damit kann man problemlos den Zustand des Akkus bestimmen.

Attribute

Das battery Objekt bietet eine Handvoll Attribute, auf die lesend zugegriffen werden kann.

  • charging (boolean)
    Mit diesem Attribut lässt sich erfragen, ob das Gerät im Moment aufgeladen wird. Hat das gerät keinen Akku, so wird immer true zurückgegeben.
  • chargingTime (double)
    Gibt die Zeit in Sekunden an, bis der Akku vollständig geladen ist. Wenn der Akku vollständig aufgeladen ist (oder nicht vorhanden ist) wird 0 zurückgegeben.
  • dischargingTime (double)
    Gibt die Zeit in Sekunden an, bis der Akku entladen ist.
  • level (double)
    Gibt den aktuellen Akkuzustand an. Dabei ist 0 entladen und 1 geladen.

Events

Das API bietet ebenfalls eine Reihe von Events an. Diese werden immer bei Veränderung ausgelöst.

  • onchargingchange
    Event wird ausgelöst, wenn das Gerät an die Stromversorgung angeschlossen oder von der Stromversorgung abgeschlossen wird.
  • onchargingtimechange
    Das Event wird ausgelöst, wenn die verbleibende Ladezeit sich ändert.
  • ondischargingtimechange
    Das Event wird ausgelöst, wenn die verbleibende Laufzeit sich ändert.
  • onlevelchange
    Das Event wird ausgelöst, wenn der Akkustand sich ändert.

Dabei ist zu beachten, dass es den Browserentwicklern überlassen ist, wie oft die Events ausgelöst werden. So kann es passieren, dass der aktuelle Akkustand in einem Browser alle 10 Sekunden, im anderen alle 30 Sekunden aktualisiert wird.

Beispiel

Jetzt haben wir die Theorie behandelt und können einen ersten Versuch wagen und den Akkuzustand bestimmen. Dabei sollten wir auf die Vendor-Präfixe achten.

Das API ist aktuell leider nur in Firefox und Chrome implementiert. Aus diesem Grund muss man immer erst prüfen, ob das API verfügbar ist. Am schnellsten ist es, wenn man sich eine kleine Funktion schreibt die true oder false zurück gibt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery
 
if(!!(battery)) {
  console.log("Der Akku wird geladen: "             + battery.charging);
  console.log("Akkuzustand: "                       + battery.level);
  console.log("Verbleibende Laufzeit in Sekunden: " + battery.dischargingTime);
 
  battery.addEventListener("chargingchange", function(e) {
    console.warn("Akkuzustand: ", battery.charging);
  }, false);
  battery.addEventListener("chargingtimechange", function(e) {
    console.warn("Akkuladezeit: ", battery.chargingTime);
  }, false);
  battery.addEventListener("dischargingtimechange", function(e) {
    console.warn("Akkulaufzeit: ", battery.dischargingTime);
  }, false);
  battery.addEventListener("levelchange", function(e) {
    console.warn("Akkustand: : ", battery.level);
  }, false);
}

Demo: http://jsfiddle.net/abogomolov/94G4N/

Wem ein jQuery Plugin lieber ist, der kann auf einen Wrapper von Patrick Stadler zurückgreifen.

Fazit

HTML5 macht es uns extrem einfach auf die Sensoren der Geräte zuzugreifen. Somit ist es möglich komplexe Anwendungen zu schreiben, ohne dabei native Apps bauen zu müssen.

ALL-INKL.COM

2 Kommentars zu dem Artikel “Battery Status API – HTML5 APIs”