Battery API

Battery API in JavaScript: Akkustatus des Geräts überwachen

Die Battery API in JavaScript ist eine Schnittstelle, mit der Webseiten den Akkustatus eines Geräts auslesen können: wie voll er ist, ob er geladen wird und wie lange es bis zur vollen Ladung oder Entleerung dauert. Mit diesen Informationen kann eine Webanwendung ihr Verhalten anpassen — zum Beispiel Hintergrundaufgaben drosseln oder aufwendige Animationen reduzieren, wenn der Akku schwach ist. Dieser Artikel erklärt, was die Battery API ist, welche Daten sie bereitstellt, wann ihr Einsatz sinnvoll ist und wie man sie korrekt mit Promises und Events ausliest.

Hinweis: Da der Akkustand ein starkes Fingerprinting-Signal ist (ein nahezu eindeutiger Wert, der sich nur langsam ändert), haben Browser die Battery API zurückgezogen. Sie wurde aus Firefox und Safari entfernt, und navigator.getBattery() ist nur in Chromium-basierten Browsern (Chrome, Edge, Opera) in einem sicheren (HTTPS) Kontext verfügbar. Behandle sie als progressive Erweiterung und prüfe immer die Verfügbarkeit, bevor du sie aufrufst — dein Code muss auch ohne die API funktionieren.

Was ist die Battery API?

Die Battery API wird über eine einzige Methode bereitgestellt: navigator.getBattery(), die ein Promise zurückgibt, das zu einem BatteryManager-Objekt aufgelöst wird. Dieses Objekt enthält vier schreibgeschützte Eigenschaften, die den aktuellen Zustand beschreiben, sowie vier Events, die ausgelöst werden, sobald sich einer dieser Werte ändert. Da getBattery() asynchron ist, liest man es mit .then() oder mit async/await.

BatteryManager-Eigenschaften

BatteryManager-Events

Jedes Event ist ein einfaches DOM-Event, d. h. man abonniert es mit addEventListener am BatteryManager.

Vorteile der Battery API

• Verbesserung der Benutzererfahrung: Durch den Zugriff auf den Akkustatus können Webanwendungen ihr Verhalten anpassen, um Energie zu sparen, wenn das Gerät im Akkubetrieb läuft, oder erweiterte Funktionen anbieten, wenn es aufgeladen wird.
• Energieeffizienz: Mit den Akkustatusinformationen können Web-Apps ressourcenintensive Vorgänge optimieren, um den Energieverbrauch zu senken und die Akkulaufzeit zu verlängern.
• Echtzeit-Aktualisierungen: Die API liefert Echtzeit-Updates bei Änderungen des Akkustatus, sodass Web-Apps sofort auf Ereignisse wie das Abziehen des Steckers oder niedrigen Akkustand reagieren können.
• Browser-Unterstützung: Die Battery API ist in mehreren modernen Browsern verfügbar, jedoch sollten Entwickler eine Feature-Erkennung implementieren, um die Kompatibilität in verschiedenen Umgebungen sicherzustellen.

Wann sollte man die Battery API verwenden?

Ziehe die Battery API in Betracht, wenn deine Webanwendung folgende Anforderungen hat:

1. Stromabhängige Funktionen bereitstellen: Passe Funktionen und Verhalten der Anwendung daran an, ob das Gerät im Akkubetrieb läuft, geladen wird oder voll geladen ist.
2. Akkulaufzeit schonen: Optimiere ressourcenintensive Vorgänge im Akkubetrieb, um den Energieverbrauch zu reduzieren und die Akkulaufzeit zu verlängern.
3. Akkustatus anzeigen: Zeige akkubezogene Informationen für Benutzer an, z. B. den aktuellen Ladestand oder die geschätzte Zeit bis zur vollständigen Ladung.
4. Aktionen bei Akkuereignissen auslösen: Führe bestimmte Aktionen aus, wenn sich der Akkustatus ändert, z. B. eine Warnung bei niedrigem Akkustand anzeigen oder ressourcenintensive Aufgaben pausieren.

Praktische Anwendungsfälle

1. Warnung bei niedrigem Akkustand: Du kannst die Battery API verwenden, um eine Warnung auszugeben, wenn der Akkustand unter einen bestimmten Schwellenwert fällt, und Benutzer aufzufordern, Energie zu sparen oder das Gerät anzuschließen.
2. Energiesparende Animationen: Webanwendungen können die Intensität und Häufigkeit von Animationen anhand des Akkustatus anpassen, um den Akkuverbrauch zu senken.
3. Verwaltung von Hintergrundprozessen: Optimiere Hintergrundprozesse wie die Datensynchronisierung oder das Senden von Benachrichtigungen, damit sie im Akkubetrieb seltener ausgeführt werden.
4. Dynamisches Laden von Ressourcen: Lade hochauflösende Bilder oder ressourcenintensive Inhalte nur, wenn das Gerät geladen wird oder der Akkustand über einem bestimmten Schwellenwert liegt, um Leistung und Energieeffizienz zu verbessern.

Feature-Erkennung

Gehe niemals davon aus, dass getBattery() vorhanden ist. Sichere jeden Aufruf ab, damit nicht unterstützte Browser statt eines TypeError einen sauberen Fallback erhalten:

async function readBattery() {
  if (!('getBattery' in navigator)) {
    return 'Battery API not supported';
  }

  const battery = await navigator.getBattery();
  const percent = Math.round(battery.level * 100);
  return `${percent}% — ${battery.charging ? 'charging' : 'on battery'}`;
}

'getBattery' in navigator ist die kanonische Prüfung: Sie ist nur dann true, wenn die API vorhanden ist. Die async/await-Form liest den aufgelösten BatteryManager genauso wie die .then()-Form, folgt jedoch von oben nach unten.

Grundlegendes Beispiel: Akkustatus überwachen

Das folgende Beispiel liest den Akku einmal aus und hält anschließend den angezeigten Text aktuell, indem es auf die relevanten Events lauscht. Beachte die Hilfsfunktion toHours — chargingTime und dischargingTime werden in Sekunden angegeben, daher ergibt eine Division durch 3600 lesbare Stunden. Beide Werte können Infinity sein, weshalb dieser Fall explizit behandelt wird.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Battery Time Estimation</title>
</head>
<body>
    <h1>Battery Time Estimation</h1>
    <div>Time Remaining: <span id="timeRemaining">Calculating...</span></div>

    <script>
    if ('getBattery' in navigator) {
        navigator.getBattery().then(function(battery) {
            const output = document.getElementById('timeRemaining');

            function toHours(seconds) {
                return (seconds / 3600).toFixed(1);
            }

            function updateTimeRemaining() {
                if (battery.charging) {
                    if (battery.chargingTime === Infinity) {
                        output.textContent = 'Plugged in, charge time unknown';
                    } else {
                        output.textContent = `Charging, ${toHours(battery.chargingTime)} hours until full`;
                    }
                } else if (battery.dischargingTime === Infinity) {
                    output.textContent = 'On battery, time remaining unknown';
                } else {
                    output.textContent = `On battery, ${toHours(battery.dischargingTime)} hours remaining`;
                }
            }

            updateTimeRemaining();

            battery.addEventListener('chargingchange', updateTimeRemaining);
            battery.addEventListener('levelchange', updateTimeRemaining);
            battery.addEventListener('chargingtimechange', updateTimeRemaining);
            battery.addEventListener('dischargingtimechange', updateTimeRemaining);
        }).catch(function(error) {
            document.getElementById('timeRemaining').textContent = 'Battery API not available or access denied.';
            console.error('Battery API error:', error);
        });
    } else {
        document.getElementById('timeRemaining').textContent = 'Battery API not supported in this browser.';
    }
    </script>
</body>
</html>

So funktioniert es:

• Zeitschätzung: Das Skript prüft, ob der Akku geladen wird oder entlädt, und zeigt die geschätzte verbleibende Zeit bis zur vollständigen Ladung oder Entleerung an.
• Event Listener: Die Anzeige wird in Echtzeit aktualisiert, wenn sich der Akkustatus ändert.

Dieses Beispiel zeigt, wie die Battery API detaillierte Einblicke in die Akkunutzung liefern kann, einschließlich Zeitschätzungen — was besonders nützlich für Mobilgeräte und Laptops bei der Verwaltung des Energieverbrauchs ist.

Auf niedrigen Akkustand reagieren

Ein gängiges Muster ist es, die Seite in einen „Energiesparmodus" zu versetzen, sobald der Ladestand unter einen Schwellenwert fällt und das Gerät im Akkubetrieb läuft. Lausche dabei gemeinsam auf levelchange und chargingchange, damit der Modus bei beiden Signalen neu bewertet wird:

async function watchPowerSaver(onChange) {
  if (!('getBattery' in navigator)) return;

  const battery = await navigator.getBattery();

  function evaluate() {
    // Save power only when on battery and below 20%.
    const lowPower = !battery.charging && battery.level < 0.2;
    onChange(lowPower);
  }

  evaluate();
  battery.addEventListener('levelchange', evaluate);
  battery.addEventListener('chargingchange', evaluate);
}

// Usage: pause heavy animations when low on power.
watchPowerSaver((lowPower) => {
  document.body.classList.toggle('reduce-motion', lowPower);
});

Dies ist wesentlich kostengünstiger als ein Polling mit einem Timer: Der Callback wird nur ausgeführt, wenn sich der Akkustatus tatsächlich ändert.

Häufige Fallstricke

• Die API gibt möglicherweise keine nützlichen Daten zurück. Bei einem Desktop ohne Akku ist charging true, level ist 1, und beide Zeitwerte sind 0 oder Infinity. Nutze die API nicht als zuverlässiges Signal dafür, dass das Gerät ein Laptop ist.
• Infinity ist normal. chargingTime ist Infinity, solange das Gerät nicht geladen wird, und dischargingTime ist Infinity, wenn die Zeit nicht geschätzt werden kann. Prüfe immer auf diesen Fall, bevor du den Wert formatierst.
• Schätzwerte sind grob und gerundet. Um Fingerprinting zu reduzieren, runden Browser level und die Zeitwerte. Baue daher keine präzisen Countdowns auf dieser Basis auf.
• Sicherer Kontext erforderlich. getBattery() ist nur auf HTTPS-Seiten (und localhost) verfügbar. Auf reinem HTTP ist es undefined, was deine Feature-Prüfung abfängt.
• Entferne nicht mehr benötigte Listener. Wenn du Listener innerhalb einer Komponente hinzufügst, trenne sie beim Abbau mit removeEventListener, um Speicherlecks zu vermeiden.

Fazit

Die Battery API in JavaScript gibt Webentwicklern ein Werkzeug an die Hand, um auf den Akkustatus von Benutzergeräten zuzugreifen und darauf zu reagieren. Durch den Einsatz dieser API können Webanwendungen die Benutzererfahrung verbessern, die Akkulaufzeit schonen und die Energieeffizienz optimieren. Obwohl die Browser-Unterstützung aus Datenschutzgründen variiert, ermöglicht die Battery API stromabhängige Erfahrungen dort, wo sie unterstützt wird — vorausgesetzt, man erkennt die Funktion, behandelt Infinity-Zeitwerte korrekt und betrachtet die Daten als hilfreichen Hinweis statt als Garantie.

Verwandte Themen

• Promises — getBattery() gibt eines zurück.
• async / await — der sauberste Weg, es auszulesen.
• Einführung in Browser-Events — wie die BatteryManager-Events funktionieren.
• Geolocation API — eine weitere Gerätestatus-API mit ähnlichen Berechtigungs- und Feature-Erkennungsmustern.

Practice