Tab-Anwendungsmodus für PWAs

Mit Tabs in Ihrer progressiven Web-App an mehreren Dokumenten gleichzeitig arbeiten

Thomas Steiner

In der Welt des Computing ist die Desktop-Metapher eine Schnittstellenmetapher, die eine Reihe von vereinheitlichenden Konzepten umfasst, die von grafischen Benutzeroberflächen (GUIs) verwendet werden, um Nutzern eine intuitivere Interaktion mit dem Computer zu ermöglichen. In Anlehnung an die Desktop-Metapher sind GUI-Tabs klassischen Karteireitern nachempfunden, die in Bücher, Papierakten oder Karteien eingefügt werden. Eine Dokumentschnittstelle mit Tabs (Tabbed Document Interface, TDI) oder ein Tab ist ein grafisches Steuerelement, mit dem mehrere Dokumente oder Bereiche in einem einzigen Fenster enthalten sein können. Tabs dienen als Navigations-Widget zum Wechseln zwischen Dokumentgruppen.

Progressive Web-Apps können in verschiedenen Anzeigemodi ausgeführt werden, die durch die Eigenschaft display im Web-App-Manifest bestimmt werden. Die Optionen sind fullscreen, standalone, minimal-ui und browser. Diese Anzeigemodi folgen einer wohl definierten Fallback-Kette ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Wenn ein Browser einen bestimmten Modus nicht unterstützt, wird auf den nächsten Anzeigemodus in der Kette zurückgegriffen. Mit dem Attribut "display_override" können Entwickler bei Bedarf eine eigene Fallback-Kette angeben.

Was ist der Tab-Modus?

Bisher fehlte auf der Plattform eine Möglichkeit, PWA-Entwicklern eine Dokumentoberfläche mit Tabs für ihre Nutzer anzubieten, z. B. um die Bearbeitung verschiedener Dateien im selben PWA-Fenster zu ermöglichen. Der Tabbed-Anwendungsmodus schließt diese Lücke.

Anwendungsfälle für den Tabbed-Anwendungsmodus

Beispiele für Websites, die den Tabbed-Anwendungsmodus verwenden:

  • Produktivitäts-Apps, mit denen der Nutzer mehr als ein Dokument oder eine Datei gleichzeitig bearbeiten kann.
  • Kommunikations-Apps, in denen Nutzer in verschiedenen Räumen pro Tab Gespräche führen können.
  • Lese-Apps, in denen Artikellinks in neuen In-App-Tabs geöffnet werden.

Unterschiede zu von Entwicklern erstellten Tabs

Wenn Dokumente in separaten Browsertabs geöffnet werden, können Ressourcen isoliert werden, was im Web heute nicht möglich ist. Von Entwicklern erstellte Tabs lassen sich nicht so gut skalieren wie Browser-Tabs. Browserfunktionen wie der Navigationsverlauf, „URL dieser Seite kopieren“, „Diesen Tab streamen“ oder „Diese Seite in einem Webbrowser öffnen“ würden auf die Seite mit der von Entwicklern erstellten Tabbed-Oberfläche angewendet, nicht aber auf die ausgewählte Dokumentseite.

Unterschiede zu "display": "browser"

Der aktuelle "display": "browser" hat bereits eine bestimmte Bedeutung:

Öffnet die Webanwendung gemäß der plattformspezifischen Konvention zum Öffnen von Hyperlinks im User-Agent (z.B. in einem Browsertab oder einem neuen Fenster).

Browser können zwar tun, was sie möchten, aber es wäre eine ziemlich große Abweichung von den Erwartungen der Entwickler, wenn "display": "browser" plötzlich „in einem separaten anwendungsspezifischen Fenster ohne Browserfunktionen, aber mit einer Dokumentoberfläche mit Tabs ausführen“ bedeuten würde.

Wenn Sie "display": "browser" festlegen, deaktivieren Sie die Platzierung in einem Anwendungsfenster.

Aktueller Status

Schritt Status
1. Erklärung erstellen Abgeschlossen
2. Ersten Entwurf der Spezifikation erstellen Abgeschlossen
3. Feedback einholen und Design iterieren Abgeschlossen
4. Ursprungstest Abgeschlossen
5. Starten Abgeschlossen (ChromeOS)

Tabbed Application Mode verwenden

Damit Entwickler den Tabbed-Anwendungsmodus verwenden können, müssen sie ihre Apps aktivieren, indem sie im Web-App-Manifest einen bestimmten "display_override"-Moduswert festlegen.

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

Als Nächstes kann die Property "tab_strip" optional verwendet werden, um das Tabverhalten zu optimieren. Es hat zwei zulässige untergeordnete Properties: "home_tab" und "new_tab_button". Wenn die Property "tab_strip" nicht vorhanden ist, wird standardmäßig das folgende Objekt verwendet:

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

Tab „Startseite“

Der Tab „Übersicht“ ist ein angepinnter Tab, der, sofern für eine App aktiviert, immer angezeigt werden sollte, wenn die App geöffnet ist. Auf diesem Tab sollte nie navigiert werden. Links, auf die Sie auf diesem Tab klicken, sollten in einem neuen App-Tab geöffnet werden. Apps können die URL, an die dieser Tab gebunden ist, und das auf dem Tab angezeigte Symbol anpassen.

Das Element "home_tab" des Objekts "tab_strip" enthält Informationen zu einem speziellen Tab „Startseite“, der als Menü der obersten Ebene für die Anwendung dienen soll. Sie enthält das folgende Element:

  • "scope_patterns": Das "scope_patterns"-Element ist eine Liste von URL-Mustern, die den Umfang des Startbildschirms relativ zur Manifest-URL definieren.

Schaltfläche „Neuer Tab“

Das "new_tab_button"-Element des "tab_strip"-Objekts beschreibt das Verhalten einer UI-Hilfe (z. B. einer Schaltfläche), die beim Klicken/Aktivieren einen neuen Anwendungskontext im Anwendungsfenster öffnet. Es hat das folgende Element:

  • "url": Das "url"-Element ist ein String, der eine URL relativ zur Manifest-URL darstellt, die im Bereich eines verarbeiteten Manifests liegt.

Eine Anwendung hat eine Schaltfläche für den neuen Tab, wenn das "url"-Element von „new_tab_button“ im verarbeiteten Manifest außerhalb des Bereichs des Starttabs liegt. Wenn die Anwendung keine Schaltfläche für einen neuen Tab hat, stellt der Browser dem Nutzer keine Möglichkeit zur Verfügung, einen neuen Tab zu öffnen.

Vollständiges Beispiel

Ein vollständiges Beispiel für die Konfiguration des Verhaltens einer App mit einer Tabbed-Benutzeroberfläche sieht so aus:

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

Tabbed-Anwendungsmodus erkennen

Apps können erkennen, ob sie im Modus mit Tabs ausgeführt werden, indem sie die CSS-Media-Funktion display-mode in CSS oder JavaScript prüfen:

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

Interaktion mit der Launch Handler API

Mit der Launch Handler API können Websites App-Starts in vorhandene App-Fenster umleiten, um zu verhindern, dass doppelte Fenster geöffnet werden. Wenn eine App mit Tabs "client_mode": "navigate-new" festlegt, wird beim Starten der App ein neuer Tab in einem vorhandenen App-Fenster geöffnet.

Demo

So können Sie die Tabbed-Anwendung unter ChromeOS ausprobieren:

  1. Installieren Sie die App tabbed-application-mode.glitch.me (Quellcode).
  2. Klicken Sie auf die verschiedenen Links auf den verschiedenen Tabs.

Demo für den Tab-Modus unter tabbed-application-mode.glitch.me

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit dem Tabbed-Application-Modus erfahren.

Informationen zum API-Design

Gibt es etwas am Tabbed-Anwendungsmodus, das nicht wie erwartet funktioniert? Kommentieren Sie das von uns erstellte Problem mit dem Web-App-Manifest.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Melden Sie einen Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich und eine Anleitung zur Reproduktion an und geben Sie UI>Browser>WebAppInstalls in das Feld Components (Komponenten) ein.

API-Support zeigen

Planen Sie, den Tabbed-Anwendungsmodus zu verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #TabbedApplicationMode und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Danksagungen

Der Tab-Modus für Anwendungen wurde von Matt Giuca untersucht. Die experimentelle Implementierung in Chrome wurde von Alan Cutter entwickelt. Dieses Dokument wurde von Joe Medley geprüft. Hero-Image von Till Niermann auf Wikimedia Commons.