Wir können ganz einfach immersive Websites und Apps im Vollbildmodus erstellen. Wie bei allem im Web gibt es aber mehrere Möglichkeiten, dies zu tun. Das ist besonders wichtig, da immer mehr Browser eine „installierte Webanwendung“ unterstützen, die im Vollbildmodus gestartet wird.
App oder Website im Vollbildmodus anzeigen
Es gibt mehrere Möglichkeiten, wie Nutzer oder Entwickler eine Webanwendung im Vollbildmodus anzeigen können.
- Den Browser auf Vollbildmodus umstellen, wenn eine Nutzergeste erkannt wird
- Installieren Sie die App auf dem Startbildschirm.
- Fake it: Die Adressleiste wird automatisch ausgeblendet.
Vollbildmodus des Browsers als Reaktion auf eine Nutzergeste anfordern
Nicht alle Plattformen sind gleich. iOS Safari hat keine Vollbild-API, aber Chrome für Android, Firefox und IE 11 und höher. Die meisten Anwendungen, die Sie erstellen, verwenden eine Kombination aus der JS API und den CSS-Selektoren, die von der Vollbildspezifikation bereitgestellt werden. Die wichtigsten JS-APIs, die Sie beim Erstellen einer Vollbildansicht beachten müssen, sind:
element.requestFullscreen()
(aktuell in Chrome, Firefox und IE als Präfix verwendet) zeigt das Element im Vollbildmodus an.document.exitFullscreen()
(aktuell in Chrome, Firefox und IE als Präfix verwendet. In Firefox wird stattdessencancelFullScreen()
verwendet.document.fullscreenElement
(aktuell in Chrome, Firefox und IE mit Präfix) gibt „wahr“ zurück, wenn eines der Elemente sich im Vollbildmodus befindet.
Wenn Ihre App im Vollbildmodus ist, stehen Ihnen die UI-Steuerelemente des Browsers nicht mehr zur Verfügung. Das ändert die Art und Weise, wie Nutzer mit Ihrer Website interagieren. Es gibt keine standardmäßigen Navigationselemente wie „Weiter“ und „Zurück“ und auch keine Ausstiegsmöglichkeit wie die Schaltfläche „Aktualisieren“. Es ist wichtig, auf dieses Szenario vorbereitet zu sein. Mit einigen CSS-Selektoren können Sie den Stil und die Darstellung Ihrer Website ändern, wenn der Browser in den Vollbildmodus wechselt.
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
document.body.requestFullscreen();
},
false,
);
</script>
Das obige Beispiel ist etwas konstruiert. Ich habe die Komplexität der Verwendung von Anbieterpräfixen ausgeblendet.
Der tatsächliche Code ist viel komplexer. Mozilla hat ein sehr nützliches Script erstellt, mit dem Sie den Vollbildmodus ein- und ausschalten können. Wie Sie sehen, ist die Situation mit dem Anbieterpräfix im Vergleich zur angegebenen API komplex und umständlich. Selbst der etwas vereinfachte Code unten ist noch komplex.
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen =
docEl.requestFullscreen ||
docEl.mozRequestFullScreen ||
docEl.webkitRequestFullScreen ||
docEl.msRequestFullscreen;
var cancelFullScreen =
doc.exitFullscreen ||
doc.mozCancelFullScreen ||
doc.webkitExitFullscreen ||
doc.msExitFullscreen;
if (
!doc.fullscreenElement &&
!doc.mozFullScreenElement &&
!doc.webkitFullscreenElement &&
!doc.msFullscreenElement
) {
requestFullScreen.call(docEl);
} else {
cancelFullScreen.call(doc);
}
}
Wir Webentwickler hassen Komplexität. Eine gute abstrakte API auf hoher Ebene ist das Screenfull.js-Modul von Sindre Sorhus, das die beiden etwas unterschiedlichen JS-APIs und Anbieterpräfixe in einer einheitlichen API vereint.
Tipps zur Vollbild-API
Dokument im Vollbildmodus anzeigen
Es ist naheliegend anzunehmen, dass das Body-Element auf Vollbild angezeigt wird. Wenn Sie jedoch eine WebKit- oder Blink-basierte Rendering-Engine verwenden, wird die Body-Breite auf die kleinstmögliche Größe verkleinert, die den gesamten Inhalt enthält. (Mozilla Gecko ist in Ordnung.)
Verwenden Sie stattdessen das Element „document“ anstelle des Elements „body“:
document.documentElement.requestFullscreen();
Videoelement im Vollbildmodus anzeigen
Das geht genauso wie bei anderen Elementen. Rufen Sie die Methode requestFullscreen
auf das Videoelement auf.
<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
var videoElement = document.getElementById('videoElement');
videoElement.requestFullscreen();
},
false,
);
</script>
Wenn für das <video>
-Element das Attribut „controls“ nicht definiert ist, können Nutzer das Video nicht mehr steuern, wenn es im Vollbildmodus wiedergegeben wird. Wir empfehlen, einen einfachen Container zu verwenden, der das Video und die Steuerelemente umschließt, die der Nutzer sehen soll.
<div id="container">
<video></video>
<div>
<button>Play</button>
<button>Stop</button>
<button id="goFS">Go fullscreen</button>
</div>
</div>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
var container = document.getElementById('container');
container.requestFullscreen();
},
false,
);
</script>
Das bietet viel mehr Flexibilität, da Sie das Containerobjekt mit dem CSS-Pseudoselektor kombinieren können, um beispielsweise die Schaltfläche „goFS“ auszublenden.
<style>
#goFS:-webkit-full-screen #goFS {
display: none;
}
#goFS:-moz-full-screen #goFS {
display: none;
}
#goFS:-ms-fullscreen #goFS {
display: none;
}
#goFS:fullscreen #goFS {
display: none;
}
</style>
Anhand dieser Muster können Sie erkennen, wann der Vollbildmodus aktiv ist, und Ihre Benutzeroberfläche entsprechend anpassen, z. B.:
- Durch einen Link zurück zur Startseite
- Durch einen Mechanismus zum Schließen von Dialogfeldern oder zum Zurückgehen
Seiten im Vollbildmodus vom Startbildschirm aus öffnen
Es ist nicht möglich, eine Webseite im Vollbildmodus zu öffnen, wenn der Nutzer sie aufruft. Browseranbieter sind sich bewusst, dass ein Vollbildmodus bei jedem Seitenaufbau sehr ärgerlich ist. Daher ist eine Nutzergeste erforderlich, um den Vollbildmodus zu aktivieren. Anbieter erlauben Nutzern jedoch, Apps zu „installieren“. Die Installation ist ein Signal für das Betriebssystem, dass der Nutzer die App auf der Plattform starten möchte.
Auf den wichtigsten mobilen Plattformen ist die Implementierung mit Meta-Tags oder Manifestdateien wie unten beschrieben ziemlich einfach.
iOS
Seit der Markteinführung des iPhones können Nutzer Web-Apps auf dem Startbildschirm installieren und als Vollbild-Web-Apps starten.
<meta name="apple-mobile-web-app-capable" content="yes" />
Wenn „content“ auf „yes“ gesetzt ist, wird die Webanwendung im Vollbildmodus ausgeführt. Andernfalls nicht. Standardmäßig wird Safari verwendet, um Webinhalte anzuzeigen. Mit der schreibgeschützten booleschen JavaScript-Eigenschaft „window.navigator.standalone“ können Sie feststellen, ob eine Webseite im Vollbildmodus angezeigt wird.
Apple
Chrome für Android
Das Chrome-Team hat vor Kurzem eine Funktion implementiert, die den Browser anweist, die Seite im Vollbildmodus zu öffnen, wenn der Nutzer sie dem Startbildschirm hinzugefügt hat. Es ähnelt dem Modell für iOS Safari.
<meta name="mobile-web-app-capable" content="yes" />
Sie können Ihre Webanwendung so einrichten, dass dem Startbildschirm eines Geräts ein Symbol für eine App-Verknüpfung hinzugefügt wird und die App über das Menüelement „Zum Startbildschirm hinzufügen“ in Chrome für Android im Vollbildmodus gestartet wird.
Google Chrome
Eine bessere Option ist das Web-App-Manifest.
Web-App-Manifest (Chrome, Opera, Firefox, Samsung)
Das Manifest für Webanwendungen ist eine einfache JSON-Datei, mit der Sie als Entwickler festlegen können, wie Ihre App in den Bereichen angezeigt wird, in denen Nutzer Apps erwarten (z. B. auf dem mobilen Startbildschirm), was der Nutzer starten kann und vor allem, wie er es starten kann. In Zukunft erhalten Sie über das Manifest noch mehr Kontrolle über Ihre App. Im Moment konzentrieren wir uns jedoch nur darauf, wie Ihre App gestartet werden kann. Im Detail:
- Browser über das Manifest informieren
- Startvorgang beschreiben
Nachdem Sie das Manifest erstellt und auf Ihrer Website gehostet haben, müssen Sie nur noch auf allen Seiten, auf denen Ihre App angezeigt wird, ein Link-Tag hinzufügen. Gehen Sie dazu so vor:
<link rel="manifest" href="/manifest.json" />
Chrome unterstützt Manifeste seit Version 38 für Android (Oktober 2014). Sie können damit festlegen, wie Ihre Webanwendung angezeigt wird, wenn sie auf dem Startbildschirm installiert ist (über die Properties short_name
, name
und icons
), und wie sie gestartet werden soll, wenn der Nutzer auf das Startsymbol klickt (über start_url
, display
und orientation
).
Unten sehen Sie ein Beispiel für ein Manifest. Es werden nicht alle Elemente angezeigt, die in einem Manifest enthalten sein können.
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "landscape"
}
Diese Funktion ist vollständig progressiv und ermöglicht es Ihnen, eine bessere, integriertere Nutzung für Nutzer eines Browsers zu ermöglichen, der die Funktion unterstützt.
Wenn ein Nutzer Ihre Website oder App auf dem Startbildschirm hinzufügt, möchte er sie wie eine App verwenden. Sie sollten ihn daher auf die Funktionen Ihrer App und nicht auf eine Produkt-Landingpage weiterleiten. Wenn sich der Nutzer beispielsweise in Ihrer App anmelden muss, ist das eine gute Seite, um die App zu starten.
Dienstprogramm-Apps
Die meisten Dienst-Apps profitieren sofort davon. Diese Apps sollten Sie wahrscheinlich wie jede andere App auf einer mobilen Plattform als eigenständige App veröffentlichen. Wenn Sie festlegen möchten, dass eine App eigenständig gestartet werden soll, fügen Sie Folgendes zum Manifest der Webanwendung hinzu:
"display": "standalone"
Spiele
Die meisten Spiele profitieren sofort von einem Manifest. Die meisten Spiele sollten im Vollbildmodus gestartet werden und eine bestimmte Ausrichtung haben.
Wenn Sie einen vertikalen Scroller oder ein Spiel wie Flappy Birds entwickeln, sollten Sie Ihr Spiel am besten immer im Hochformat anzeigen lassen.
"display": "fullscreen",
"orientation": "portrait"
Wenn Sie hingegen ein Puzzlespiel oder ein Spiel wie X-Com entwickeln, sollten Sie wahrscheinlich immer die Querformat-Ausrichtung verwenden.
"display": "fullscreen",
"orientation": "landscape"
Nachrichtenwebsites
Nachrichtenwebsites sind in den meisten Fällen rein inhaltsbezogen. Die meisten Entwickler würden natürlich nicht daran denken, einer Nachrichtenwebsite ein Manifest hinzuzufügen. Im Manifest kannst du festlegen, was gestartet werden soll (die Startseite deiner Nachrichtenwebsite) und wie es gestartet werden soll (im Vollbildmodus oder als normaler Browsertab).
Die Entscheidung liegt bei Ihnen und hängt davon ab, wie Sie glauben, dass Ihre Nutzer auf Ihre Website zugreifen möchten. Wenn Sie möchten, dass Ihre Website alle Browserelemente enthält, die Sie von einer Website erwarten, können Sie die Anzeige auf browser
festlegen.
"display": "browser"
Wenn Sie möchten, dass Ihre Nachrichtenwebsite wie die meisten newsorientierten Apps aussieht und alle webähnlichen Elemente aus der Benutzeroberfläche entfernt werden, können Sie die Anzeige auf standalone
festlegen.
"display": "standalone"
Fake it: Adressleiste automatisch ausblenden
Sie können den Vollbildmodus simulieren, indem Sie die Adressleiste automatisch ausblenden. Gehen Sie dazu so vor:
window.scrollTo(0, 1);
Das ist eine ziemlich einfache Methode: Die Seite wird geladen und die Browserleiste wird angewiesen, sich nicht in den Weg zu stellen. Leider ist es nicht standardisiert und wird nicht gut unterstützt. Außerdem müssen Sie einige Probleme beheben.
So stellen Browser beispielsweise häufig die Position auf der Seite wieder her, wenn der Nutzer dorthin zurückkehrt. Wenn Sie window.scrollTo
verwenden, wird dies überschrieben, was den Nutzer stört. Um dies zu umgehen, müssen Sie die letzte Position im localStorage speichern und mit Grenzfällen umgehen, z. B. wenn der Nutzer die Seite in mehreren Fenstern geöffnet hat.
UX-Richtlinien
Wenn Sie eine Website erstellen, die den Vollbildmodus nutzt, gibt es eine Reihe potenzieller Änderungen an der Nutzererfahrung, die Sie beachten müssen, um einen Dienst zu erstellen, der Ihren Nutzern gefällt.
Verlassen Sie sich nicht auf Navigationssteuerelemente
iOS hat keine Hardware-Zurück-Schaltfläche und keine Geste zum Aktualisieren. Daher müssen Sie dafür sorgen, dass Nutzer die App problemlos nutzen können, ohne dass sie eingesperrt werden.
Auf allen gängigen Plattformen kannst du ganz einfach erkennen, ob du im Vollbildmodus oder im installierten Modus bist.
iOS
Unter iOS können Sie mit dem booleschen Wert navigator.standalone
prüfen, ob der Nutzer die App über den Startbildschirm gestartet hat.
if (navigator.standalone == true) {
// My app is installed and therefore fullscreen
}
Web App Manifest (Chrome, Opera, Samsung)
Wenn Chrome als installierte App gestartet wird, wird es nicht im Vollbildmodus ausgeführt. Daher gibt document.fullscreenElement
„null“ zurück und die CSS-Selektoren funktionieren nicht.
Wenn der Nutzer den Vollbildmodus über eine Geste auf Ihrer Website anfordert, sind die standardmäßigen Vollbild-APIs verfügbar, einschließlich des CSS-Pseudo-Sellektors, mit dem Sie Ihre Benutzeroberfläche so anpassen können, dass sie auf den Vollbildstatus reagiert.
selector:-webkit-full-screen {
display: block; // displays the element only when in fullscreen
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Wenn Nutzer Ihre Website über den Startbildschirm starten, wird die display-mode
-Medienabfrage auf die im Web-App-Manifest definierten Werte festgelegt. Im reinen Vollbildmodus ist das:
@media (display-mode: fullscreen) {
}
Wenn der Nutzer die Anwendung im eigenständigen Modus startet, lautet die display-mode
standalone
:
@media (display-mode: standalone) {
}
Firefox
Wenn der Nutzer den Vollbildmodus über Ihre Website anfordert oder die App im Vollbildmodus startet, sind alle Standard-Fullscreen-APIs verfügbar, einschließlich des CSS-Pseudo-Sellektors, mit dem Sie Ihre Benutzeroberfläche so anpassen können, dass sie auf den Vollbildstatus reagiert. Beispiele:
selector:-moz-full-screen {
display: block; // hides the element when not in fullscreen mode
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Internet Explorer
Im IE fehlt der CSS-Pseudoklasse ein Bindestrich, ansonsten funktioniert sie ähnlich wie in Chrome und Firefox.
selector:-ms-fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Spezifikation
Die Schreibweise in der Spezifikation entspricht der Syntax, die im IE verwendet wird.
selector:fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Nutzer im Vollbildmodus halten
Die Vollbild-API kann manchmal etwas zickig sein. Browseranbieter möchten Nutzer nicht in einer Vollbildseite gefangen halten. Deshalb haben sie Mechanismen entwickelt, mit denen der Vollbildmodus so schnell wie möglich beendet werden kann. Das bedeutet, dass Sie keine Vollbildwebsite mit mehreren Seiten erstellen können, weil:
- Wenn du die URL programmgesteuert mit
window.location = "http://example.com"
änderst, wird der Vollbildmodus beendet. - Wenn ein Nutzer auf einer Seite auf einen externen Link klickt, wird der Vollbildmodus beendet.
- Wenn du die URL über die
navigator.pushState
API änderst, wird der Vollbildmodus ebenfalls beendet.
Wenn Sie den Nutzer im Vollbildmodus halten möchten, haben Sie zwei Möglichkeiten:
- Verwenden Sie die Mechanismen der installierbaren Web-App, um den Vollbildmodus zu aktivieren.
- Mit dem #-Fragment die Benutzeroberfläche und den App-Status verwalten
Wenn Sie die #-Syntax verwenden, um die URL zu aktualisieren (window.location = "#somestate"), und das window.onhashchange
-Ereignis überwachen, können Sie den eigenen Verlaufsstapel des Browsers verwenden, um Änderungen am Anwendungsstatus zu verwalten, Nutzern die Verwendung ihrer Hardware-Rück-Schaltflächen zu ermöglichen oder eine einfache programmatische Rück-Schaltfläche bereitzustellen. Verwenden Sie dazu die History API folgendermaßen:
window.history.go(-1);
Nutzer können auswählen, wann der Vollbildmodus aktiviert werden soll
Nichts ist für Nutzer ärgerlicher als eine Website, die etwas Unerwartetes tut. Wenn ein Nutzer Ihre Website aufruft, sollten Sie ihn nicht dazu verleiten, den Vollbildmodus zu aktivieren.
Das erste Touch-Ereignis darf nicht abgefangen und requestFullscreen()
darf nicht aufgerufen werden.
- Das ist ärgerlich.
- Browser können Nutzer in Zukunft auffordern, der App zu erlauben, den Vollbildmodus zu verwenden.
Wenn Sie Apps im Vollbildmodus starten möchten, sollten Sie die Installationsoberflächen für jede Plattform verwenden.
Nutzer nicht zum Installieren Ihrer App auf dem Startbildschirm auffordern
Wenn Sie über die installierte App Vollbildinhalte anbieten möchten, sollten Sie Rücksicht auf die Nutzer nehmen.
- Seien Sie diskret. Mit einem Banner oder einer Fußzeile können Sie Nutzer darüber informieren, dass sie die App installieren können.
- Wenn der Nutzer die Aufforderung schließt, wird sie nicht noch einmal angezeigt.
- Bei ihrem ersten Besuch werden Nutzer die App wahrscheinlich nicht installieren, es sei denn, sie sind mit Ihrem Dienst zufrieden. Sie können Nutzer nach einer positiven Interaktion auf Ihrer Website zum Installieren auffordern.
- Wenn ein Nutzer Ihre Website regelmäßig besucht und die App nicht installiert, wird er sie wahrscheinlich auch in Zukunft nicht installieren. Spammen Sie sie nicht weiter.
Fazit
Wir haben zwar keine vollständig standardisierte und implementierte API, aber mithilfe der in diesem Artikel beschriebenen Anleitungen können Sie ganz einfach Funktionen erstellen, die unabhängig vom Client den gesamten Bildschirm des Nutzers nutzen.