Mit der Screen Wake Lock API aktiv bleiben

Die Screen Wake Lock API bietet eine Möglichkeit, zu verhindern, dass Geräte den Bildschirm dimmen oder sperren, wenn eine Anwendung weiter ausgeführt werden muss.

Pete LePage
Thomas Steiner

Was ist die Screen Wake Lock API?

Damit der Akku nicht entladen wird, wechseln die meisten Geräte schnell in den Ruhemodus, wenn sie nicht verwendet werden. Das ist in den meisten Fällen in Ordnung, aber einige Anwendungen müssen den Bildschirm aktiviert lassen, um ihre Arbeit zu erledigen. Beispiele hierfür sind Koch-Apps, in denen die einzelnen Schritte eines Rezepts angezeigt werden, oder Spiele wie Ball Puzzle, bei denen die Bewegungs-APIs des Geräts für die Eingabe verwendet werden.

Mit der Screen Wake Lock API lässt sich verhindern, dass das Gerät den Bildschirm dimmt und sperrt. Diese Funktion ermöglicht neue Erlebnisse, für die bisher eine plattformspezifische App erforderlich war.

Die Screen Wake Lock API macht umständliche und möglicherweise stromintensive Workarounds überflüssig. Sie behebt die Mängel einer älteren API, die darauf beschränkt war, den Bildschirm eingeschaltet zu lassen, und eine Reihe von Sicherheits- und Datenschutzproblemen aufwies.

Vorgeschlagene Anwendungsfälle für die Screen Wake Lock API

RioRun, eine Web-App, die von The Guardian entwickelt wurde, war ein perfektes Beispiel (ist aber nicht mehr verfügbar). Die App führt Sie auf einer virtuellen Audio-Tour durch Rio, auf der Strecke des olympischen Marathons von 2016. Ohne Wake Locks würde sich der Bildschirm der Nutzer während der Wiedergabe der Tour häufig ausschalten, was die Nutzung erschweren würde.

Natürlich gibt es noch viele weitere Anwendungsfälle:

  • Eine Rezept-App, die den Bildschirm eingeschaltet lässt, während Sie einen Kuchen backen oder Abendessen kochen
  • Eine App für Bordkarten oder Tickets, die den Bildschirm so lange eingeschaltet lässt, bis der Barcode gescannt wurde
  • Eine Kiosk-App, bei der das Display dauerhaft eingeschaltet bleibt
  • Eine webbasierte Präsentations-App, die den Bildschirm während einer Präsentation eingeschaltet lässt

Aktueller Status

Schritt Status
1. Erklärung erstellen –
2. Ersten Entwurf der Spezifikation erstellen Abschließen
3. Feedback einholen und Design iterieren Abschließen
4. Ursprungstest Abgeschlossen
5. Starten Abschließen

Screen Wake Lock API verwenden

Wakelock-Typen

Die Screen Wake Lock API bietet derzeit nur einen Typ von Wake Lock: screen.

screen Wakelock

Ein screen-Wake-Lock verhindert, dass sich das Display des Geräts ausschaltet, damit der Nutzer die auf dem Display angezeigten Informationen sehen kann.

Bildschirm-Wakelock erhalten

Wenn Sie eine Aktivierungssperre für den Bildschirm anfordern möchten, müssen Sie die Methode navigator.wakeLock.request() aufrufen, die ein WakeLockSentinel-Objekt zurückgibt. Sie übergeben dieser Methode den gewünschten Wake Lock-Typ als Parameter. Derzeit ist dies auf 'screen' beschränkt und daher optional. Der Browser kann die Anfrage aus verschiedenen Gründen ablehnen, z. B. weil der Akkustand zu niedrig ist. Es empfiehlt sich daher, den Aufruf in eine try…catch-Anweisung einzuschließen. Die Meldung der Ausnahme enthält im Fehlerfall weitere Details.

Bildschirm-Wakelock freigeben

Außerdem müssen Sie die Displaysperre aufheben können. Dazu rufen Sie die release()-Methode des WakeLockSentinel-Objekts auf. Wenn Sie keinen Verweis auf die WakeLockSentinel speichern, kann die Sperre nicht manuell aufgehoben werden. Sie wird jedoch aufgehoben, sobald der aktuelle Tab nicht mehr sichtbar ist.

Wenn Sie die Aktivierungssperre für den Bildschirm nach einem bestimmten Zeitraum automatisch aufheben möchten, können Sie window.setTimeout() verwenden, um release() aufzurufen, wie im Beispiel unten gezeigt.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

Das WakeLockSentinel-Objekt hat die Eigenschaft released, die angibt, ob bereits ein Sentinel veröffentlicht wurde. Der Wert ist anfangs false und ändert sich in true, sobald ein "release"-Ereignis gesendet wird. Diese Eigenschaft hilft Webentwicklern, zu erkennen, wann eine Sperre aufgehoben wurde, sodass sie dies nicht manuell verfolgen müssen. Sie ist ab Chrome 87 verfügbar.

Lebenszyklus von Bildschirm-Wakelocks

Wenn Sie die Demo für das Aktivieren des Bildschirms verwenden, werden Sie feststellen, dass das Aktivieren des Bildschirms von der Seitenansicht abhängt. Das bedeutet, dass der Bildschirm-Wakelock automatisch freigegeben wird, wenn Sie einen Tab oder ein Fenster minimieren oder zu einem anderen Tab oder Fenster wechseln, in dem ein Bildschirm-Wakelock aktiv ist.

Um den Bildschirm-Wakelock wieder zu erhalten, müssen Sie auf das visibilitychange-Ereignis warten und einen neuen Bildschirm-Wakelock anfordern, wenn es eintritt:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

Auswirkungen auf Systemressourcen minimieren

Sollte in Ihrer App ein Screen-Wake-Lock verwendet werden? Welchen Ansatz Sie wählen, hängt von den Anforderungen Ihrer App ab. Unabhängig davon sollten Sie den für Ihre App leichtgewichtigsten Ansatz verwenden, um die Auswirkungen auf die Systemressourcen zu minimieren.

Bevor Sie Ihrer App einen Screen-Wake-Lock hinzufügen, sollten Sie prüfen, ob sich Ihre Anwendungsfälle mit einer der folgenden Alternativlösungen lösen lassen:

Demo

Demo für Screen Wake Lock und Demoquelle Beachten Sie, dass die Aktivierungssperre für den Bildschirm automatisch aufgehoben wird, wenn Sie Tabs oder Apps wechseln.

Bildschirm-Wakelocks im Task-Manager des Betriebssystems

Sie können im Task-Manager Ihres Betriebssystems nachsehen, ob eine Anwendung verhindert, dass Ihr Computer in den Ruhemodus wechselt. Im folgenden Video sehen Sie den Aktivitätsmonitor von macOS, der anzeigt, dass Chrome ein aktives Screen-Wake-Lock hat, das das System aktiv hält.

Feedback

Die Web Platform Incubator Community Group (WICG) und das Chrome-Team möchten gern mehr über Ihre Gedanken und Erfahrungen mit der Screen Wake Lock API erfahren.

Informationen zum API-Design

Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen?

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab?

  • Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich an, stellen Sie eine einfache Anleitung zum Reproduzieren des Fehlers bereit und legen Sie Components auf Blink>WakeLock fest. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

API-Support zeigen

Planen Sie, die Screen Wake Lock API zu verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

  • Teilen Sie uns im WICG Discourse-Thread mit, wie Sie die API verwenden möchten.
  • Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #WakeLock und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Nützliche Links

Danksagungen

Hero-Image von Kate Stone Matheson auf Unsplash. Das Task-Manager-Video wurde freundlicherweise von Henry Lim zur Verfügung gestellt.