Verwendung der Battery Status API in Web-Apps

Die meisten Web-Apps haben keine Ahnung, ob die Person, die sie nutzt, bei 8 % Akkuladung in einem Zug ohne Ladegerät sitzt. Die Battery Status API ändert das – zumindest in einigen Browsern. Sie ermöglicht es Ihrem JavaScript, den Akkustand des Geräts, den Ladezustand und die geschätzte verbleibende Zeit auszulesen, sodass Sie das Verhalten Ihrer App entsprechend anpassen können.

Dieser Artikel erklärt, wie die API funktioniert, was Sie realistischerweise damit tun können und warum Sie vorsichtig sein müssen, wo und wie Sie sie einsetzen.

Was ist die Battery Status API?

Die Battery Status API stellt Akkuinformationen über die Methode navigator.getBattery() bereit, die ein Promise zurückgibt, das zu einem BatteryManager-Objekt aufgelöst wird. Dieses Objekt bietet Ihnen vier Eigenschaften:

• level – eine Zahl zwischen 0 und 1 (z. B. bedeutet 0.72 72 %)
• charging – true, wenn das Gerät angeschlossen ist, false, wenn nicht
• chargingTime – geschätzte Sekunden bis zur vollständigen Aufladung
• dischargingTime – geschätzte Sekunden bis der Akku leer ist

Beide Zeiteigenschaften können Infinity zurückgeben – wenn das Gerät ein Desktop ohne Akku ist, wenn die Schätzung noch nicht bereit ist oder wenn der Browser absichtlich die Genauigkeit einschränkt, um das Fingerprinting-Risiko zu begrenzen.

Wie man navigator.getBattery() sicher verwendet

Prüfen Sie immer auf Unterstützung, bevor Sie die API aufrufen. Sie ist nur in sicheren Kontexten (HTTPS) verfügbar, und selbst dann nur in Browsern, die sie bereitstellen.

In eingebetteten Kontexten kann der Zugriff auch durch die battery Permissions Policy eingeschränkt werden.

async function initBatteryMonitor() {
  // Feature-Detection – gehen Sie nicht davon aus, dass die API existiert
  if (!('getBattery' in navigator)) {
    console.warn('Battery Status API wird in diesem Browser nicht unterstützt.')
    return
  }

  let battery

  try {
    battery = await navigator.getBattery()
  } catch (err) {
    console.error('Fehler beim Zugriff auf Akkuinformationen:', err)
    return
  }

  // Anfangswerte auslesen
  console.log(`Ladestand: ${battery.level * 100}%`)
  console.log(`Lädt: ${battery.charging}`)

  // Infinity elegant behandeln, bevor angezeigt wird
  const formatTime = (seconds) =>
    seconds === Infinity ? 'Unbekannt' : `${Math.round(seconds / 60)} min`

  console.log(`Ladezeit: ${formatTime(battery.chargingTime)}`)
  console.log(`Entladezeit: ${formatTime(battery.dischargingTime)}`)

  // Auf Änderungen reagieren
  battery.addEventListener('levelchange', () => {
    console.log(`Akkustand aktualisiert: ${battery.level * 100}%`)
  })

  battery.addEventListener('chargingchange', () => {
    console.log(`Ladezustand geändert: ${battery.charging}`)
  })
}

initBatteryMonitor()

Die vier Events, auf die Sie hören können, sind levelchange, chargingchange, chargingtimechange und dischargingtimechange. Jedes wird ausgelöst, wenn sich der entsprechende Wert ändert.

Praktische Anwendungsfälle

Die API ist am nützlichsten, wenn Sie den Ressourcenverbrauch für Benutzer mit schwachem Akku reduzieren möchten:

• Hintergrund-Synchronisierung oder Polling pausieren, wenn battery.level unter einen Schwellenwert wie 0.2 fällt
• Animationskomplexität reduzieren oder automatisch abspielende Videos deaktivieren
• Benutzer auffordern, ihre Arbeit zu speichern, bevor der Akku leer ist
• PWA-Verhalten anpassen – zum Beispiel nicht kritische Netzwerkanfragen zurückstellen

Dies sind progressive Verbesserungen. Ihre App sollte auch ohne sie einwandfrei funktionieren.

Browser-Unterstützung und Datenschutzbedenken

Hier wird die Battery Status API kompliziert.

Die aktuelle Browser-Unterstützung ist begrenzt. Firefox hat die API entfernt, weil Forscher nachgewiesen haben, dass sie als Fingerprinting-Vektor verwendet werden kann – die Kombination aus Akkustand und Zeitwerten war spezifisch genug, um Benutzer über Websites hinweg zu verfolgen. Als Reaktion darauf können Chromium-basierte Browser die Genauigkeit reduzieren oder Standardwerte bereitstellen, um dieses Risiko zu begrenzen.

Das bedeutet, dass Sie sich niemals auf die Battery API als primäre Funktion verlassen sollten. Behandeln Sie sie als nette Zusatzverbesserung und schreiben Sie immer Fallback-Verhalten für den Fall, dass sie nichts zurückgibt.

Testen der Battery API in der Entwicklung

Chrome DevTools bietet derzeit keinen integrierten Akku-Simulator unter Sensors. Um akkubezogenes Verhalten während der Entwicklung zu testen, haben Sie einige praktische Optionen:

• Verwenden Sie ein echtes mobiles Gerät, das per USB-Remote-Debugging verbunden ist, und beobachten Sie tatsächliche Änderungen des Akkustands.
• Mocken Sie die API in Ihrem Code, indem Sie navigator.getBattery durch eine Funktion ersetzen, die ein gefälschtes BatteryManager-Objekt mit den Eigenschaften und Events zurückgibt, die Sie zum Testen benötigen.
• Verwenden Sie Browser-Overrides oder Testing-Bibliotheken wie Sinon oder Jest, um navigator.getBattery() in Ihrer Test-Suite zu stubben.

Hier ist ein minimales Mock, das Sie in Ihre Entwicklungsumgebung einfügen können:

function mockBattery({ level = 0.15, charging = false } = {}) {
  const fake = {
    level,
    charging,
    chargingTime: charging ? 3600 : Infinity,
    dischargingTime: charging ? Infinity : 1800,
    addEventListener: () => {},
  }

  navigator.getBattery = () => Promise.resolve(fake)
}

// Simulieren Sie ein Gerät mit schwachem Akku, nicht angeschlossen
mockBattery({ level: 0.08, charging: false })

Dieser Ansatz gibt Ihnen volle Kontrolle über die Werte, die Ihr Code erhält, ohne auf browserspezifische Tools angewiesen zu sein.

Fazit

Die Battery Status API ist ein Nischen-Tool mit echten Einschränkungen. Die Browser-Unterstützung ist begrenzt, Werte sind absichtlich ungenau, und die Datenschutzimplikationen bedeuten, dass ihre Zukunft ungewiss ist. Aber in kontrollierten Umgebungen – interne Tools, PWAs für bekannte Chromium-basierte Browser oder Kiosk-ähnliche Anwendungen – kann sie die Benutzererfahrung bedeutend verbessern.

Verwenden Sie Feature-Detection, behandeln Sie Infinity-Werte explizit, räumen Sie Ihre Event-Listener auf, wenn sie nicht mehr benötigt werden, und bauen Sie niemals eine kritische Funktion darauf auf.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.