Vollbild-Erfahrungen erstellen

Wir können ganz einfach immersive Vollbild-Websites und -Anwendungen erstellen, aber wie alles im Web gibt es dafür mehrere Möglichkeiten. Das ist inzwischen besonders wichtig, da immer mehr Browser eine „installierte Webanwendung“ unterstützen, die im Vollbildmodus gestartet wird.

App oder Website im Vollbildmodus öffnen

Es gibt mehrere Möglichkeiten, wie ein Nutzer oder Entwickler eine Web-App im Vollbildmodus anzeigen kann.

  • Hiermit können Sie festlegen, dass der Browser als Reaktion auf eine Nutzergeste in den Vollbildmodus wechseln soll.
  • Installieren Sie die App auf dem Startbildschirm.
  • Falsch: Adressleiste wird automatisch ausgeblendet.

Browser als Reaktion auf eine Nutzergeste in den Vollbildmodus wechseln

Nicht alle Plattformen sind gleich. iOS Safari hat keine Vollbild-API, aber wir verwenden Chrome unter Android, Firefox und Internet Explorer 11+. Die meisten Anwendungen, die Sie erstellen, nutzen eine Kombination aus der JavaScript API und den CSS-Selektoren der Vollbildspezifikation. Die wichtigsten JavaScript APIs, die beim Erstellen einer Vollbilderfahrung wichtig sind, sind:

  • element.requestFullscreen() (derzeit in Chrome, Firefox und IE vorangestellt) zeigt das Element im Vollbildmodus an.
  • document.exitFullscreen() (derzeit in Chrome, Firefox und IE vorangestellt. Firefox verwendet stattdessen cancelFullScreen()) bricht den Vollbildmodus ab.
  • document.fullscreenElement (derzeit in Chrome, Firefox und IE vorangestellt) gibt „true“ zurück, wenn sich eines der Elemente im Vollbildmodus befindet.

Wenn Ihre App im Vollbildmodus angezeigt wird, stehen Ihnen die UI-Steuerelemente des Browsers nicht mehr zur Verfügung. Dadurch ändert sich die Art und Weise, wie Nutzer mit Ihrer Umgebung interagieren. Sie haben nicht die standardmäßigen Navigationssteuerelemente wie „Vorwärts“ und „Zurück“ und nicht die Schaltfläche „Aktualisieren“. Es ist wichtig, auf dieses Szenario einzugehen. Sie können einige CSS-Selektoren verwenden, um den Stil und die Darstellung Ihrer Website zu ä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 durchdacht. Ich habe die ganze Komplexität im Zusammenhang mit der Verwendung von Anbieterpräfixen verborgen.

Der eigentliche Code ist viel komplexer. Mozilla hat ein nützliches Skript erstellt, mit dem Sie den Vollbildmodus aktivieren und deaktivieren können. Wie Sie sehen, ist die Situation aufgrund des Anbieterpräfixes im Vergleich zur angegebenen API komplex und umständlich. Selbst mit dem etwas vereinfachten Code unten ist er immer 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 nützliche abstrakte API auf übergeordneter Ebene ist das Modul Sindre Sorhus Screenfull.js, mit dem die beiden leicht unterschiedlichen JS APIs und Anbieterpräfixe in einer konsistenten API zusammengeführt werden.

Fullscreen API-Tipps

Dokument im Vollbildmodus anzeigen
Vollbild auf das Textelement
Abbildung 1: Vollbild auf dem Textelement.

Es ist natürlich anzunehmen, dass Sie das Textelement im Vollbildmodus anzeigen. Wenn Sie jedoch eine WebKit- oder Blink-basierte Rendering-Engine verwenden, werden Sie feststellen, dass die Textbreite auf die kleinstmögliche Größe verkleinert wird, die den gesamten Inhalt enthält. (Mozilla Gecko ist kein Problem.)

Vollbild auf Dokumentelement
Abbildung 2: Vollbild auf dem Dokumentelement

Um dieses Problem zu beheben, verwenden Sie das Dokumentelement anstelle des Textelements:

document.documentElement.requestFullscreen();
Videoelement im Vollbildmodus erstellen

Ein Videoelement in den Vollbildmodus zu übertragen, funktioniert genau wie jedes andere Element. Rufen Sie die Methode requestFullscreen für 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 „Steuerelemente“ nicht definiert ist, kann der Nutzer das Video nicht steuern, sobald es im Vollbildmodus abgespielt wird. Dafür wird ein einfacher Container empfohlen, 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>

Dies gibt Ihnen viel mehr Flexibilität, da Sie das Containerobjekt mit dem CSS-Pseudoselektor kombinieren können (z. B. um 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>

Mit diesen Mustern können Sie erkennen, wenn der Vollbildmodus ausgeführt wird, und Ihre Benutzeroberfläche entsprechend anpassen. Beispiel:

  • Indem ein Link zurück zur Startseite angegeben wird
  • Indem ein Mechanismus geboten wird, mit dem Dialoge geschlossen oder rückwärts fortgeschritten werden können

Vollbild einer Seite vom Startbildschirm aus starten

Es ist nicht möglich, eine Vollbild-Webseite zu starten, wenn der Nutzer zu ihr navigiert. Browseranbieter wissen sehr gut, dass der Vollbildmodus bei jedem Seitenaufbau ein großes Ärgernis ist. Daher ist eine Nutzergeste erforderlich, um in den Vollbildmodus zu wechseln. Anbieter erlauben Nutzern jedoch, Apps zu „installieren“, und die Installation signalisiert dem Betriebssystem, dass der Nutzer als App auf der Plattform starten möchte.

Auf den wichtigsten mobilen Plattformen lässt es sich ziemlich einfach mithilfe von Meta-Tags oder Manifestdateien implementieren.

iOS

Seit der Einführung des iPhones konnten Nutzer Web-Apps auf dem Startbildschirm installieren und als Vollbild-Web-Apps starten.

<meta name="apple-mobile-web-app-capable" content="yes" />

Wenn der Inhalt auf yes gesetzt ist, wird die Webanwendung im Vollbildmodus ausgeführt. Andernfalls wird sie nicht ausgeführt. Standardmäßig wird Safari zum Anzeigen von Webinhalten verwendet. Mithilfe der schreibgeschützten booleschen JavaScript-Eigenschaft window.navigator.standalone können Sie festlegen, ob eine Webseite im Vollbildmodus angezeigt werden soll.

Apple

Chrome für Android

Das Chrome-Team hat vor Kurzem eine Funktion implementiert, die den Browser auffordert, die Seite im Vollbildmodus zu starten, wenn der Nutzer die Seite dem Startbildschirm hinzugefügt hat. Es ähnelt dem iOS-Safari-Modell.

<meta name="mobile-web-app-capable" content="yes" />

Sie können in Ihrer Web-App festlegen, dass dem Startbildschirm des Geräts ein App-Verknüpfungssymbol hinzugefügt wird und die App im Vollbildmodus über den Menüpunkt „Zum Startbildschirm hinzufügen“ von Chrome für Android gestartet wird.

Google Chrome

Besser ist es, das Web App Manifest zu verwenden.

Web-App-Manifest (Chrome, Opera, Firefox, Samsung)

Das Manifest für Webanwendungen ist eine einfache JSON-Datei, mit der Sie als Entwickler steuern können, wie Ihre App den Nutzern in den Bereichen angezeigt wird, in denen sie Apps erwarten (z. B. auf dem Startbildschirm), und vorgeben, was der Nutzer starten kann und, was noch wichtiger ist, wie er die App starten kann. In Zukunft wird Ihnen das Manifest noch mehr Kontrolle über Ihre App geben. Im Moment konzentrieren wir uns jedoch nur darauf, wie Ihre App gestartet werden kann. Insbesondere:

  1. Browser über dein Manifest informieren
  2. Beschreibung der Einführung

Nachdem Sie das Manifest erstellt haben und es auf Ihrer Website gehostet wird, müssen Sie nur noch ein Link-Tag von allen Seiten hinzufügen, zu denen Ihre App gehört:

<link rel="manifest" href="/manifest.json" />

Chrome unterstützt Manifeste seit Version 38 für Android (Oktober 2014). Du kannst festlegen, wie deine Web-App angezeigt wird, wenn sie auf dem Startbildschirm installiert wird (über die Eigenschaften short_name, name und icons) und wie sie gestartet werden soll, wenn der Nutzer auf das Startsymbol klickt (über start_url, display und orientation).

Ein Beispielmanifest finden Sie unten. 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"
}

Dieses Feature ist progressiv und ermöglicht es Ihnen, bessere, stärker integrierte Funktionen für Nutzer eines Browsers zu schaffen, der diese Funktion unterstützt.

Wenn ein Nutzer Ihre Website oder App zum Startbildschirm hinzufügt, möchte er sie wie eine App behandeln. Das bedeutet, dass Sie versuchen sollten, den Nutzer zu den Funktionen Ihrer App zu leiten, anstatt auf eine Produkt-Landingpage. Wenn der Nutzer sich beispielsweise bei Ihrer Anwendung anmelden muss, empfiehlt es sich, diese Seite zu öffnen.

Dienstprogramm-Apps

Die meisten Dienstprogramm-Apps werden sofort davon profitieren. Diese Apps sollten eigenständige Apps auf einer mobilen Plattform wie alle anderen Apps auf den Markt bringen. Wenn Sie eine App auffordern möchten, eine eigenständige App zu starten, fügen Sie das Web App Manifest hinzu:

    "display": "standalone"
Spiele

Die meisten Spiele profitieren sofort von einem Manifest. Die meisten Spiele möchten im Vollbildmodus starten und eine bestimmte Ausrichtung erzwingen.

Wenn Sie einen vertikalen Scroller oder ein Spiel wie Flappy Birds entwickeln, sollte Ihr Spiel immer im Hochformat sein.

    "display": "fullscreen",
    "orientation": "portrait"

Wenn Sie dagegen ein Rätselspiel oder ein Spiel wie X-Com erstellen, sollte das Spiel immer im Querformat sein.

    "display": "fullscreen",
    "orientation": "landscape"
Nachrichtenwebsites

Nachrichtenwebsites sind in den meisten Fällen rein inhaltsbasiert. Die meisten Entwickler würden einer Nachrichtenwebsite natürlich kein Manifest hinzufügen. Im Manifest können Sie festlegen, was gestartet werden soll (die Titelseite Ihrer Nachrichtenwebsite) und wie Sie es starten (Vollbild oder als normaler Browsertab).

Die Entscheidung liegt bei Ihnen und wie Sie denken, wie Ihre Nutzer auf Ihre Erfahrung zugreifen möchten. Wenn Sie möchten, dass Ihre Website den gesamten Browser-Chrom hat, den Sie erwarten würden, können Sie die Anzeige auf browser setzen.

    "display": "browser"

Wenn du möchtest, dass deine Nachrichtenwebsite den Eindruck vermittelt, dass die meisten nachrichtenorientierten Apps ihre Inhalte wie Apps behandeln und sämtlichen webähnlichen Chrome-Browser aus der Benutzeroberfläche entfernen, kannst du „display“ auf standalone setzen.

    "display": "standalone"

Falsch: Adressleiste automatisch ausblenden

Sie können den Vollbildmodus simulieren, indem Sie die Adressleiste wie folgt automatisch ausblenden:

window.scrollTo(0, 1);

Dies ist eine ziemlich einfache Methode. Die Seite wird geladen und die Browserleiste wird dazu aufgefordert, aus dem Weg zu gehen. Leider ist sie nicht standardisiert und nicht gut unterstützt. Außerdem müssen Sie ein paar Macken umgehen.

So wird die Position auf einer Seite in Browsern häufig wiederhergestellt, wenn der Nutzer zu ihr zurückkehrt. Mit window.scrollTo wird dies überschrieben, was den Nutzer ärgert. Um dies zu umgehen, müssen Sie die letzte Position in localStorage speichern und sich mit den Grenzfällen befassen (z. B. wenn der Nutzer die Seite in mehreren Fenstern geöffnet hat).

UX-Richtlinien

Wenn du eine Website erstellst, die die Vorteile des Vollbildmodus nutzt, gibt es eine Reihe potenzieller Änderungen bei der Nutzererfahrung, die du beachten musst, um einen Dienst erstellen zu können, der deinen Nutzern gefällt.

Verlassen Sie sich nicht auf die Navigationsbedienelemente

iOS hat weder eine Hardware-Schaltfläche „Zurück“ noch eine Aktualisierungsgeste. Daher müssen Sie dafür sorgen, dass Nutzer sich durch die App bewegen können, ohne sich einsperren zu lassen.

Sie können auf allen wichtigen Plattformen ganz einfach erkennen, ob Sie im Vollbildmodus oder im installierten Modus ausgeführt werden.

iOS

Unter iOS können Sie den booleschen Wert navigator.standalone verwenden, um zu sehen, ob der Nutzer über den Startbildschirm gestartet wurde.

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

Web-App-Manifest (Chrome, Opera, Samsung)

Beim Starten als installierte App läuft Chrome nicht im Vollbildmodus, sodass document.fullscreenElement null zurückgibt und die CSS-Selektoren nicht funktionieren.

Wenn der Nutzer den Vollbildmodus über eine Geste auf Ihrer Website anfordert, sind die Standard-Vollbild-APIs verfügbar, einschließlich des CSS-Pseudoselektors, mit dem Sie Ihre Benutzeroberfläche so anpassen können, dass sie auf den Vollbildmodus reagiert. Beispiel:

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 der Nutzer deine Website vom Startbildschirm aus startet, wird für die display-mode-Medienabfrage die Definition im Web App Manifest verwendet. Im reinen Vollbildmodus sieht das so aus:

@media (display-mode: fullscreen) {
}

Wenn der Nutzer die Anwendung im eigenständigen Modus startet, lautet die display-mode-Medienabfrage standalone:

@media (display-mode: standalone) {
}

Firefox

Wenn der Nutzer den Vollbildmodus über Ihre Website anfordert oder die App im Vollbildmodus startet, sind alle Standard-Vollbild-APIs verfügbar, einschließlich des CSS-Pseudoselektors, mit dem Sie die Benutzeroberfläche so anpassen können, dass sie auf den Vollbildmodus reagiert:

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

In IE fehlt der CSS-Pseudoklasse ein Bindestrich, funktioniert aber ä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 im IE verwendeten Syntax.

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 kompliziert sein. Browseranbieter möchten die Nutzer nicht auf eine Vollbildseite sperren. Daher haben sie Mechanismen entwickelt, um den Vollbildmodus so schnell wie möglich zu beenden. Das bedeutet, dass Sie keine Vollbildwebsite erstellen können, die sich über mehrere Seiten erstreckt, weil

  • Wenn Sie die URL programmatisch mit window.location = "http://example.com" ändern, wird der Vollbildmodus unterbrochen.
  • Ein Nutzer, der auf einen externen Link auf Ihrer Seite klickt, beendet den Vollbildmodus.
  • Wenn Sie die URL über die navigator.pushState API ändern, wird der Vollbildmodus ebenfalls nicht mehr genutzt.

Sie haben zwei Möglichkeiten, wenn der Nutzer im Vollbildmodus angezeigt werden soll:

  1. Verwenden Sie die Mechanismen der installierbaren Webanwendung, um in den Vollbildmodus zu wechseln.
  2. Verwalten Sie die Benutzeroberfläche und den Anwendungsstatus mit dem #-Fragment.

Wenn Sie die URL mit der #syntax aktualisieren (window.location = "#somestate") und auf das Ereignis window.onhashchange warten, können Sie Änderungen am Anwendungsstatus mithilfe des Verlaufsstacks des Browsers verwalten, Nutzern die Verwendung ihrer Hardware-Zurück-Schaltflächen ermöglichen oder eine einfache programmatische Zurück-Schaltfläche über die History API bereitstellen:

window.history.go(-1);

Nutzer entscheiden lassen, wann der Vollbildmodus aktiviert werden soll

Nichts ist für den Nutzer ärgerlicher als eine Website, die etwas Unerwartetes tut. Wenn ein Nutzer Ihre Website aufruft, versuchen Sie nicht, ihn in den Vollbildmodus zu verleiten.

Halte das erste Touch-Ereignis nicht ab und rufe requestFullscreen() an.

  1. Das ist ärgerlich.
  2. Browser können den Nutzer zu einem späteren Zeitpunkt dazu auffordern, der Anwendung zu erlauben, den Vollbildmodus zu nutzen.

Wenn Sie Apps im Vollbildmodus starten möchten, sollten Sie die Installation für jede Plattform nutzen.

Nutzer nicht mit Spam belästigen, um die App auf dem Startbildschirm zu installieren

Überlegen Sie sich, ob Sie über die installierten App-Mechanismen eine Vollbilddarstellung anbieten möchten.

  • Seien Sie diskret. Teilen Sie den Nutzern mit einem Banner oder einer Fußzeile mit, dass sie die App installieren können.
  • Wenn der Nutzer die Aufforderung ablehnt, wird sie nicht noch einmal angezeigt.
  • Wenn Nutzer die App zum ersten Mal installieren, ist es unwahrscheinlich, dass sie die App installieren möchten, wenn sie mit dem Service zufrieden sind. Fordere sie auf, die App nach einer positiven Interaktion auf deiner Website zu installieren.
  • Wenn ein Nutzer Ihre Website regelmäßig besucht und die App nicht installiert, wird er Ihre App wahrscheinlich in Zukunft nicht installieren. Verbreiten Sie sie nicht weiter.

Fazit

Wir haben zwar keine vollständig standardisierte und implementierte API, aber Sie können mithilfe der Anleitung in diesem Artikel ganz einfach Inhalte erstellen, bei denen der gesamte Bildschirm des Nutzers genutzt wird, unabhängig vom Client.

Feedback