Tab-Anwendungsmodus für PWAs

Mit Tabs in Ihrer progressiven Webanwendung an mehreren Dokumenten gleichzeitig arbeiten

Thomas Steiner

Hinweis :Der Tab-Anwendungsmodus ist Teil des Projekts zu Funktionen und wurde in ChromeOS eingeführt.

In der Welt der Computer ist die Desktopmetapher eine Benutzeroberflächenmetapher, die aus einer Reihe von einheitlichen Konzepten besteht, die in grafischen Benutzeroberflächen (GUIs) verwendet werden, um Nutzern die intuitive Interaktion mit dem Computer zu erleichtern. In Anlehnung an die Desktopmetapher sind GUI-Tabs an klassische Karten-Tabs angelehnt, die in Bücher, Papierordner oder Kartenindexe eingefügt werden. Eine Tab-Oberfläche (Tabbed Document Interface, TDI) oder ein Tab ist ein grafisches Steuerelement, mit dem mehrere Dokumente oder Bereiche in einem einzigen Fenster enthalten werden können. Tabs dienen als Navigations-Widget zum Wechseln zwischen Dokumenten.

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 Darstellungsmodi folgen einer genau definierten Fallback-Kette ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Wenn ein Browser einen bestimmten Modus nicht unterstützt, wird der nächste Darstellungsmodus in der Kette verwendet. Mit der Property "display_override" können Entwickler bei Bedarf ihre eigene Fallback-Kette angeben.

Was ist der Tab-Modus?

Bisher fehlte es auf der Plattform an einer Möglichkeit, dass PWA-Entwickler ihren Nutzern eine Tab-Oberfläche für Dokumente anbieten können, um beispielsweise verschiedene Dateien im selben PWA-Fenster zu bearbeiten. Der Tab-Anwendungsmodus schließt diese Lücke.

Hinweis :Bei dieser Funktion handelt es sich um ein eigenständiges App-Fenster mit mehreren Tabs, die separate Dokumente im App-Umfang enthalten. Das unterscheidet sich von display: browser, was darauf hindeutet, dass die App in einem regulären Browsertab geöffnet wird.

Anwendungsfälle für den Tab-Modus

Beispiele für Websites, die den Tab-Anwendungsmodus verwenden können:

• Produktivitäts-Apps, mit denen Nutzer mehrere Dokumente (oder Dateien) gleichzeitig bearbeiten können.
• Kommunikations-Apps, mit denen Nutzer Unterhaltungen in verschiedenen Chatrooms pro Tab führen können
• Lese-Apps, die Artikellinks in neuen In-App-Tabs öffnen

Unterschiede zu von Entwicklern erstellten Tabs

Wenn Dokumente in separaten Browsertabs geöffnet sind, ist eine Ressourcenisolierung möglich, was im Web derzeit nicht der Fall ist. Von Entwicklern erstellte Tabs können nicht wie Browser-Tabs auf Hunderte von Tabs skaliert werden. Browserfunktionen wie 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 Tab-Oberfläche angewendet, aber nicht auf die ausgewählte Dokumentseite.

Unterschiede zu "display": "browser"

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

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

Browser können in Bezug auf die Benutzeroberfläche zwar tun, was sie wollen, aber es wäre eindeutig eine ziemlich große Abweichung von den Erwartungen der Entwickler, wenn "display": "browser" plötzlich „in einem separaten anwendungsspezifischen Fenster ohne Browser-Funktionen, aber mit einer Tab-Oberfläche für Dokumente“ bedeuten würde.

Wenn Sie "display": "browser" festlegen, deaktivieren Sie die Weiterleitung zu einem Anwendungsfenster.

Aktueller Status

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

Modus für annotierte Anwendungen verwenden

Wenn Entwickler den Tab-Anwendungsmodus verwenden möchten, müssen sie ihre Apps aktivieren, indem sie im Manifest der Webanwendung einen bestimmten "display_override"-Moduswert festlegen.

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

Mit der Property "tab_strip" können Sie das Tab-Verhalten optional 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, wenn er für eine App aktiviert ist, immer angezeigt werden sollte, wenn die App geöffnet ist. Auf diesem Tab sollte es keine Navigation geben. Links, auf die auf diesem Tab geklickt wird, sollten in einem neuen App-Tab geöffnet werden. Entwickler können die URL, auf die dieser Tab gesperrt ist, und das Symbol auf dem Tab anpassen.

Das Mitglied "home_tab" des Objekts "tab_strip" enthält Informationen zu einem speziellen „Startbildschirm“, der als oberstes Menü für die Anwendung dienen soll. Sie enthält das folgende Mitglied:

• "scope_patterns": Das Mitglied "scope_patterns" ist eine Liste von URL-Mustern, die den Umfang des Start-Tabs im Verhältnis zur Manifest-URL definieren.

Schaltfläche „Neuer Tab“

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

• "url": Das Mitglied "url" ist ein String, der eine URL relativ zur Manifest-URL darstellt, die zum Umfang eines verarbeiteten Manifests gehört.

Eine Anwendung hat eine Schaltfläche für neue Tabs, wenn das "url"-Element von „new_tab_button“ im verarbeiteten Manifest nicht zum Bereich des Start-Tabs gehört. Wenn die Anwendung keine Schaltfläche für einen neuen Tab hat, stellt der Browser dem Nutzer keine Option für einen neuen Tab zur Verfügung.

Vollständiges Beispiel

Ein vollständiges Beispiel zum Konfigurieren des Verhaltens einer App mit einer Tab-Oberfläche könnte so aussehen:

{
  "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"
    }
  }
}

Tab-Modus der Anwendung erkennen

Apps können prüfen, ob sie im Tab-Anwendungsmodus ausgeführt werden, indem sie die CSS-Medienfunktion display-mode entweder 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 das Öffnen doppelter Fenster zu verhindern. Wenn für eine App mit Tabs "client_mode": "navigate-new" festgelegt wird, wird beim Starten der App ein neuer Tab in einem vorhandenen App-Fenster geöffnet.

Demo

So können Sie die Tab-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.

Feedback

Das Chrome-Team möchte wissen, wie Sie den Tab-Anwendungsmodus nutzen.

Informationen zum API-Design

Funktioniert der Tab-Anwendungsmodus nicht wie erwartet? Kommentieren Sie das Problem mit dem Manifest der Webanwendung, das wir erstellt haben.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Melden Sie den Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich an, geben Sie eine Anleitung zur Reproduktion an und geben Sie UI>Browser>WebAppInstalls in das Feld Components ein. Glitch eignet sich hervorragend, um schnell reproduzierbare Fälle zu teilen.

Unterstützung für die API anzeigen

Planen Sie, den Tab-Modus 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 ihn verwenden.

Nützliche Links

• Erläuterung
• Problem mit der Manifestspezifikation für Web-Apps
• Chromium-Fehler
• Blink-Komponente: UI>Browser>WebAppInstalls

Danksagungen

Der Tab-Modus 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.