Mit der Screen Wake Lock API aktiv bleiben

Mit der Screen Wake Lock API können Sie verhindern, dass Geräte den Bildschirm dimmen oder sperren, wenn eine App weiterhin ausgeführt werden muss.

Was ist die Screen Wake Lock API?

Damit sich der Akku nicht entlädt, wechseln die meisten Geräte schnell in den Ruhemodus, wenn sie inaktiv sind. Das ist in den meisten Fällen in Ordnung, aber bei einigen Anwendungen muss der Bildschirm eingeschaltet bleiben, damit sie ihre Arbeit erledigen können. Beispiele hierfür sind Koch-Apps, die die Schritte eines Rezepts anzeigen, oder Spiele wie Ball Puzzle, bei denen die Gerätebewegungs-APIs für die Eingabe verwendet werden.

Mit der Screen Wake Lock API können Sie verhindern, dass das Gerät den Bildschirm dimmt und sperrt. Diese Fähigkeit ermöglicht neue Erfahrungen, für die bisher eine plattformspezifische App erforderlich war.

Mit der Screen Wake Lock API müssen Sie weniger auf komplizierte und potenziell stromintensive Umgehungslösungen zurückgreifen. Sie behebt die Mängel einer älteren API, die sich nur darauf beschränkte, das Display eingeschaltet zu lassen, und eine Reihe von Sicherheits- und Datenschutzproblemen aufwies.

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

RioRun, eine von The Guardian entwickelte Webanwendung, war ein perfekter Anwendungsfall (sie ist jedoch nicht mehr verfügbar). Die App nimmt dich mit auf eine virtuelle Audiotour durch Rio, entlang der Strecke des olympischen Marathons 2016. Ohne Wakelocks wurden die Bildschirme der Nutzer während der Tour häufig abgeschaltet, was die Nutzung erschwerte.

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

  • Eine Rezept-App, bei der der Bildschirm eingeschaltet bleibt, während Sie einen Kuchen backen oder das Abendessen kochen
  • Eine Bordkarten- oder Ticket-App, die das Display eingeschaltet lässt, bis der Barcode gescannt wurde
  • Eine App im Kioskmodus, bei der das Display dauerhaft eingeschaltet bleibt
  • Eine webbasierte Präsentations-App, bei der der Bildschirm während einer Präsentation eingeschaltet bleibt

Aktueller Status

Schritt Status
1. Erklärende Mitteilung erstellen
2. Ersten Entwurf der Spezifikation erstellen Abschließen
3. Feedback einholen und Design iterieren Abschließen
4. Ursprungstest Abgeschlossen
5. Einführung Abschließen

Screen Wake Lock API verwenden

Wakelock-Typen

Die Screen Wake Lock API bietet derzeit nur eine Art von Wecksperre: screen.

screen Wakelock

Eine screen-Aktivierungssperre 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 Displaysperre 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 Wakelock-Typ als Parameter. Dieser ist derzeit 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 einzubetten. Die Meldung der Ausnahme enthält im Falle eines Fehlers weitere Details.

Bildschirm-Wakelock aufheben

Außerdem benötigen Sie eine Möglichkeit, die Sperre für das Aufwecken des Displays aufzuheben. Dazu rufen Sie die Methode release() des WakeLockSentinel-Objekts auf. Wenn Sie keinen Verweis auf die WakeLockSentinel speichern, gibt es keine Möglichkeit, die Sperre manuell aufzuheben. Sie wird jedoch aufgehoben, sobald der aktuelle Tab nicht mehr sichtbar ist.

Wenn Sie die Sperre für das Aufwecken des Displays nach einem bestimmten Zeitraum automatisch aufheben möchten, können Sie window.setTimeout() verwenden, um release() aufzurufen, wie im folgenden 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 eine Eigenschaft namens released, die angibt, ob ein Sentinel bereits freigegeben wurde. Sein Wert ist anfänglich false und ändert sich in true, sobald ein "release"-Ereignis gesendet wird. Mit diesem Attribut können Webentwickler erkennen, wann eine Sperre aufgehoben wurde, damit sie dies nicht manuell nachverfolgen müssen. Sie ist seit Chrome 87 verfügbar.

Der Lebenszyklus des Display-Wakelocks

Wenn Sie mit der Demo für die Bildschirmsperre spielen, werden Sie feststellen, dass die Bildschirmsperre auf die Sichtbarkeit der Seite reagiert. Das bedeutet, dass der Bildschirm-Wakelock automatisch aufgehoben wird, wenn du einen Tab oder ein Fenster minimierst oder von einem Tab oder Fenster wechselst, in dem ein Bildschirm-Wakelock aktiv ist.

Wenn Sie den Bildschirm-Wakelock wiedererlangen möchten, achten Sie auf das Ereignis visibilitychange und fordern Sie bei dessen Eintreten einen neuen Bildschirm-Wakelock an:

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

document
.addEventListener('visibilitychange', handleVisibilityChange);

Auswirkungen auf Systemressourcen minimieren

Sollten Sie in Ihrer App eine Sperre für das Aufwecken des Displays verwenden? Der Ansatz, den Sie wählen, hängt von den Anforderungen Ihrer App ab. Sie sollten jedoch den möglichst schlanken Ansatz für Ihre App verwenden, um die Auswirkungen auf die Systemressourcen zu minimieren.

Bevor Sie Ihrer App eine Sperre für das Aufwecken des Displays hinzufügen, sollten Sie überlegen, ob Ihre Anwendungsfälle mit einer der folgenden alternativen Lösungen gelöst werden können:

  • Wenn Ihre App lange andauernde Downloads ausführt, sollten Sie den Hintergrundabruf in Betracht ziehen.
  • Wenn Ihre App Daten von einem externen Server synchronisiert, sollten Sie die Hintergrundsynchronisierung verwenden.

Demo

Sehen Sie sich die Demo für Screen Wake Lock und die Demoquelle an. Beachten Sie, dass die Sperre für das Aktivieren des Displays automatisch aufgehoben wird, wenn Sie zwischen Tabs oder Apps wechseln.

Bildschirm-Wakelocks im Task-Manager des Betriebssystems

Mit dem Task-Manager Ihres Betriebssystems können Sie feststellen, ob eine Anwendung den Ruhezustand Ihres Computers verhindert. Im Video unten ist der macOS-Aktivitätsmonitor zu sehen, der anzeigt, dass Chrome eine aktive Bildschirmsperre hat, die das System aktiv hält.

Feedback

Die Web Platform Incubator Community Group (WICG) und das Chrome-Team möchten Ihre Meinung und Erfahrungen mit der Screen Wake Lock API hören.

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Fehlen Methoden oder Eigenschaften, die Sie für die Implementierung Ihrer Idee benötigen?

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?

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

Unterstützung für die API anzeigen

Beabsichtigen 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.

Nützliche Links

Danksagungen

Hero-Image von Kate Stone Matheson auf Unsplash. Video zum Task-Manager mit freundlicher Genehmigung von Henry Lim.