Eine eigenständige App erstellen

Den standalone-Anzeigemodus verwenden

Um Ihrer PWA ein eigenes Fenster zu geben, fügen Sie dem Web-App-Manifest den display-Member hinzu und setzen Sie seinen Wert auf standalone:

{
  "name": "My app",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.webp",
      "sizes": "48x48",
      "type": "image/webp"
    }
  ],
  "display": "standalone"
}

Es gibt weitere Anzeigemodi, darunter browser, minimal-ui und fullscreen. Der gewählte Modus bestimmt, wie viel von der Browseroberfläche sichtbar ist – von der vollständigen Oberfläche bis hin zu einem eigenen Fenster. Weitere Informationen zu den verfügbaren Anzeigemodi und dazu, welcher Modus verwendet wird, wenn ein anderer nicht unterstützt wird, finden Sie in der Dokumentation zum display-Member.

Bewährte Vorgehensweisen

Navigation zwischen mehreren Seiten ermöglichen

Wenn Ihre Anwendung aus mehreren navigierbaren HTML-Seiten besteht, sollten Sie Bedienelemente für die Navigation innerhalb der Anwendung bereitstellen.

Wenn Sie keine eigenen Navigationselemente haben, verwenden Sie den Anzeigemodus minimal-ui. So können Nutzer mit den vom Browser in der Titelleiste Ihrer App angezeigten Schaltflächen „Zurück“ und „Weiter“ zwischen den Seiten wechseln.

Ihre App an den Anzeigemodus anpassen

Wenn Sie im Web-App-Manifest einen anderen Anzeigemodus als browser festlegen, gilt dieser nur für die installierte Anwendung. Solange die PWA nicht installiert ist, hat der display-Member des Manifests wie bei jeder anderen Webseite keine Wirkung.

Mit dem CSS-Medienmerkmal display-mode oder der JavaScript-Funktion Window.matchMedia() können Sie abhängig vom Anzeigemodus gezielt CSS-Stile anwenden oder JavaScript-Code in Ihrer App ausführen.

Das folgende Beispiel zeigt, wie Sie mit der CSS-At-Regel @media ein Element auf einer Webseite nur dann anzeigen, wenn der Anzeigemodus standalone aktiviert ist:

.app-button {
  display: none;
}

@media (display-mode: standalone) {
  .app-button {
    display: block;
  }
}

In diesem Beispiel ist das Element .app-button standardmäßig ausgeblendet, es sei denn, die App wird gerade im Modus standalone angezeigt.

Das folgende Beispiel zeigt, wie Sie mit der Methode window.matchMedia() erkennen, ob der Anzeigemodus standalone aktiviert ist:

function isStandaloneApp() {
  return window.matchMedia("(display-mode: standalone)").matches;
}

Siehe auch

• Web-App-Manifeste.
• Anzeigemodi.
• Passen Sie die Titelleiste Ihrer App auf Desktop-Betriebssystemen mithilfe der Window Controls Overlay API an.