Mit der Screen Wake Lock API aktiv bleiben

Pete LePage
Thomas Steiner

Veröffentlicht: 18. Dezember 2018

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Was ist die Screen Wake Lock API?

Um den Akku zu schonen, 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 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 Anwendungen, für die bisher eine plattformspezifische App erforderlich war.

Die Screen Wake Lock API macht umständliche und potenziell stromfressende 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 andere Anwendungsfälle:

  • Eine Rezept-App, die den Bildschirm eingeschaltet lässt, während Sie einen Kuchen backen oder das 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, die das Display kontinuierlich eingeschaltet lässt
  • Eine webbasierte Präsentations-App, die den Bildschirm während einer Präsentation eingeschaltet lässt

Screen Wake Lock API verwenden

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

screen Wakelock

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

Bildschirm-Wakelock abrufen

Wenn Sie eine Displaysperre anfordern möchten, müssen Sie die Methode navigator.wakeLock.request() aufrufen, die ein WakeLockSentinel-Objekt zurückgibt. Optional können Sie den Typ screen als Parameter übergeben. 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 das Display nach einer bestimmten Zeit automatisch aufheben möchten, können Sie window.setTimeout() verwenden, um release() aufzurufen, wie im Beispiel 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 Property hilft Webentwicklern, ohne manuelle Nachverfolgung zu erkennen, wann eine Sperre aufgehoben wurde.

Lebenszyklus von Bildschirm-Wakelocks

Wenn Sie die Demo für die Aktivierungssperre des Displays ausprobieren, sehen Sie, dass Aktivierungssperren des Displays von der Seitenansicht abhängen. 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 Wake Lock für den Bildschirm 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 alternativen Lösungen lösen lassen:

Demo

Demo für Screen Wake Lock und Demoquellcode 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. Das Video zeigt den Aktivitätsmonitor von macOS, der angibt, dass Chrome eine aktive Displaysperre hat, die das System aktiv hält.

Feedback

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

  • Fehler melden gib dabei so viele Details wie möglich an. Geben Sie eine klare Anleitung zum Reproduzieren des Fehlers an und setzen Sie Components auf Blink>WakeLock.

Ressourcen

Danksagungen

Das Task-Manager-Video wurde von Henry Lim zur Verfügung gestellt.