Kombination von Fullscreen und Screen Wake Lock APIs in Vanilla JavaScript

Bei der Entwicklung von Webanwendungen wie Präsentationen, Kiosk-Dashboards, Timern oder Canvas-Spielen ist oft eine unterbrechungsfreie Anzeige erforderlich. JavaScript bietet hierfür standardmäßige Browser-Funktionen über die Fullscreen API und die Screen Wake Lock API. Damit lassen sich visuell immersive Erlebnisse schaffen und gleichzeitig verhindern, dass der Bildschirm des Geräts in den Ruhezustand wechselt.

Verwaltung des Fullscreen-Lebenszyklus

Die Fullscreen API stellt zentrale Methoden bereit, darunter requestFullscreen für Elemente, document.exitFullscreen zum Beenden sowie die Eigenschaft document.fullscreenElement zur Überprüfung des aktiven Status. Der Aufruf von element.requestFullscreen gibt ein Promise zurück, sodass Entwickler Zustandsübergänge asynchron verarbeiten können.

Da moderne Webbrowser strenge Sicherheitsbeschränkungen für den Vollbildmodus erzwingen, muss das Aufrufen durch eine direkte Benutzerinteraktion wie ein Click- oder Keydown-Ereignis ausgelöst werden. Eine automatische Ausführung beim Laden der Seite oder nach einer asynchronen Verzögerung wie bei einem fetch-Aufruf wird von den Sicherheitsrichtlinien der Browser abgelehnt.

Screen Wake Locks und plattformübergreifende Einschränkungen

Um zu verhindern, dass das Betriebssystem den Bildschirm bei längeren visuellen Aufgaben abdunkelt, können Entwickler den Vollbildmodus mit der Screen Wake Lock API über navigator.wakeLock.request('screen') kombinieren. Der Wake Lock erfordert einen sicheren HTTPS-Kontext und wird vom Browser automatisch aufgehoben, sobald Nutzer den aktiven Tab minimieren oder zu einem anderen wechseln.

Die Kompatibilität zwischen verschiedenen Browsern bleibt bei der Implementierung von Vollbildfunktionen ein zentraler Aspekt. Während moderne Desktop-Browser die Standard-API nativ unterstützen, benötigen ältere Safari-Versionen Hersteller-Präfixe. Safari auf dem iPhone beschränkt den Element-Vollbildmodus zudem strikt auf Video-Elemente, was für reguläre DOM-Elemente den Einsatz von CSS-Overlay-Fallbacks erforderlich macht.

KI-generierte redaktionelle Illustration; kein Dokumentarfoto.

Quelle: How to Use the Fullscreen API in JavaScript (and Keep the Screen Awake with the Wake Lock API)