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 weiter ausgeführt werden muss.

Pete LePage
Thomas Steiner

Was ist die Screen Wake Lock API?

Um zu vermeiden, dass sich der Akku entlädt, wechseln die meisten Geräte schnell in den Ruhemodus, wenn sie verlassen inaktiv sind. Auch wenn dies meistens in Ordnung ist, müssen einige Anwendungen Display aktiv ist, um die Arbeit abzuschließen. Beispiele hierfür sind Koch-Apps die die einzelnen Schritte eines Rezepts oder Spiels zeigen, wie Ball Puzzle, bei dem das Gerät Motion-APIs für die Eingabe.

Mit der Screen Wake Lock API lässt sich verhindern, dass das Gerät abgedunkelt wird. und den Bildschirm sperren. Dieses ermöglicht neue Erfahrungen, für die bisher eine plattformspezifische App erforderlich war.

Die Screen Wake Lock API reduziert die Notwendigkeit für hacky und potenziell energiesparende Behelfslösungen. Sie behebt die Mängel einer älteren API. das beschränkte sich darauf, dass der Bildschirm eingeschaltet bleibt, Sicherheit und Datenschutz.

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

RioRun eine von The Guardian entwickelte Web-App, war ein perfekter Anwendungsfall (auch wenn es nicht mehr verfügbar ist). Die App nimmt dich mit auf eine virtuelle Audiotour durch Rio, entlang der Strecke von 2016 Olympia-Marathon. Ohne Wakelocks werden die die Bildschirme während der Tour häufig abgingen, was die Nutzung erschwert.

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

  • Eine Rezept-App, die den Bildschirm eingeschaltet lässt, während du einen Kuchen backst oder kochst Abendessen
  • Eine Bordkarten- oder Ticket-App, die den Bildschirm beibehält eingeschaltet, bis der Barcode gescannt wurde
  • Eine Kiosk-App, die den Bildschirm kontinuierlich eingeschaltet lässt
  • Eine webbasierte Präsentations-App, die den Bildschirm stabilisiert während einer Präsentation

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 Wakelock: screen.

screen-Wakelock

Ein screen-Wakelock verhindert, dass der Bildschirm des Geräts gedreht wird. damit der Nutzer die auf dem Bildschirm angezeigten Informationen sehen kann.

Einen Display-Wakelock erhalten

Wenn du einen Display-Wakelock anfordern möchtest, musst du die Methode navigator.wakeLock.request() aufrufen das ein WakeLockSentinel-Objekt zurückgibt. Sie übergeben dieser Methode den gewünschten Wakelock-Typ als Parameter, Sie ist derzeit auf 'screen' beschränkt und ist daher optional. Der Browser kann die Anfrage aus verschiedenen Gründen ablehnen, z. B. weil der Akkuladestand zu niedrig ist. Daher empfiehlt es sich, den Aufruf in eine try…catch-Anweisung zu umschließen. Die Ausnahmemeldung enthält im Falle eines Fehlers weitere Details.

Bildschirm-Wakelocks freigeben

Sie müssen auch eine Möglichkeit haben, den Bildschirm-Wakelock aufzuheben, der durch Aufrufen der release()-Methode des WakeLockSentinel-Objekts. Wenn du keinen Verweis auf das WakeLockSentinel speicherst, , um die Sperre manuell aufzuheben. Sie wird jedoch aufgehoben, sobald der aktuelle Tab unsichtbar ist.

Wenn Sie den Display-Wakelock automatisch freigeben möchten nach einer gewissen Zeit Sie können 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 gibt an, ob ein Sentinel bereits freigelassen wurde. Sein Wert ist anfänglich false und ändert sich zu true, sobald er "release" abgesendet wird. Anhand dieser Property können Webentwickler erkennen, veröffentlicht wurden, damit sie dies nicht manuell nachverfolgen müssen. Sie ist ab Chrome 87 verfügbar.

Der Lebenszyklus des Display-Wakelocks

Wenn Sie die Display-Wakelock-Demo ausprobieren, werden Sie feststellen, dass der Bildschirm-Wakelock die auf die Sichtbarkeit der Seite reagieren. Das bedeutet, dass der Display-Wakelock wird automatisch freigegeben, wenn Sie eine Tab oder Fenster oder wechsle weg von einem Tab oder Fenster mit aktivem Display-Wakelock.

Um den Display-Wakelock wieder zu aktivieren, Auf visibilitychange-Ereignis warten und fordern Sie einen neuen Display-Wakelock an, wenn sie auftreten:

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

document.addEventListener('visibilitychange', handleVisibilityChange);

Auswirkungen auf Systemressourcen minimieren

Sollte ich einen Display-Wakelock in meiner App verwenden? Der Ansatz hängt von den Anforderungen Ihrer App ab. Unabhängig davon sollten Sie Verwenden Sie die einfachste Möglichkeit, Auswirkungen auf die Systemressourcen.

Bevor Sie Ihrer App einen Display-Wakelock hinzufügen, überlegen Sie, ob Ihre Anwendungsfälle mit einer der folgenden alternativen Lösungen gelöst werden kann:

Demo

Sehen Sie sich die Demo zur Displayaktivierung und die Demoquelle an. Der Display-Wakelock wird beim Wechseln zwischen Tabs automatisch aufgehoben. oder Apps.

Bildschirm-Aktivierungssperre im Task-Manager des Betriebssystems

Mit dem Task-Manager Ihres Betriebssystems können Sie feststellen, ob eine Anwendung den den Ruhemodus Ihres Computers beenden. Im Video unten sehen Sie die macOS-Funktionen Aktivitätsanzeige , die darauf hinweisen, dass Chrome einen aktiven Bildschirm-Wakelock hat, durch den das System aktiv bleibt.

Feedback

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

Informationen zum API-Design

Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, die du zur Umsetzung deiner Idee benötigst?

Problem mit der Implementierung melden

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder ist die Implementierung von der Spezifikation abweichen?

  • Melden Sie den Fehler unter https://new.crbug.com. Achten Sie darauf, so viele wie möglich, einfache Anweisungen zum Reproduzieren des Fehlers Setzen Sie Components auf Blink>WakeLock. Glitch funktioniert super für schnelle und einfache Reproduktionen.

Unterstützung für die API anzeigen

Möchtest du die Screen Wake Lock API verwenden? Ihre öffentliche Unterstützung hilft Das Chrome-Team priorisiert Funktionen und zeigt anderen Browseranbietern, wie ist es wichtig, sie zu unterstützen.

Nützliche Links

Danksagungen

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