Tab-Anwendungsmodus für PWAs

Mit Tabs in Ihrer progressiven Webanwendung an mehreren Dokumenten gleichzeitig arbeiten

Thomas Steiner

In der Welt der Computertechnik ist die Metapher für Desktops eine Metapher für die Benutzeroberfläche. Sie besteht aus einer Reihe von Konzepten, die von grafischen Benutzeroberflächen (GUI) verwendet werden, um Nutzern die Interaktion mit dem Computer zu erleichtern. In Anlehnung an die Desktopmetapher sind GUI-Tabs nach traditionellen Karteireitern in Büchern, Papierakten oder Karteikartenkatalogen modelliert. 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 Property display im Web-App-Manifest bestimmt werden. Beispiele 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. Über die Property "display_override" können Entwickler bei Bedarf eine 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.

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, bei denen Artikellinks in neuen In-App-Tabs geöffnet werden.

Unterschiede zu von Entwicklern erstellten Tabs

Wenn Sie Dokumente in separaten Browsertabs speichern, ist die Ressourcenisolierung kostenlos, was heute im Web nicht möglich 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 von Entwicklern erstellte Seite mit der Tab-Oberfläche angewendet, aber nicht auf die aktuell ausgewählte Dokumentseite.

Unterschiede zu "display": "browser"

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

Öffnet die Webanwendung mit der plattformspezifischen Konvention zum Öffnen von Hyperlinks im User-Agent (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 Nicht gestartet
3. Feedback einholen und Design iterieren In Bearbeitung
4. Ursprungstest In Bearbeitung
5. Starten Nicht gestartet

Anwendungsmodus mit Tabs 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"]
}

Als Nächstes kann optional die Eigenschaft "tab_strip" verwendet werden, um das Tabverhalten zu optimieren. Sie hat die beiden zulässigen untergeordneten Attribute "home_tab" und "new_tab_button". Ist das Attribut "tab_strip" nicht vorhanden, werden die "auto"-Werte der jeweiligen Attribute verwendet. Der Browser bestimmt, welche Werte für "auto" verwendet werden sollen.

Tab „Startseite“

Der Tab „Startseite“ 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.

Zulässige Werte für "home_tab" sind:

  • "auto", um dem Browser zu erlauben, zu entscheiden, was zu tun ist.
  • Mit "absent" wird dem Browser mitgeteilt, dass kein Tab „Startseite“ angezeigt werden soll.
  • Ein Objekt mit zwei untergeordneten Properties:
    • "url" mit den zulässigen Werten "auto" oder einer URL, für die der Tab „Startseite“ gesperrt werden soll.
    • "icons" mit den zulässigen Werten "auto" oder ein Array von Symbolen wie in der Haupteigenschaft "icons".

Schaltfläche „Neuer Tab“

Wenn die Schaltfläche „Neuer Tab“ vorhanden ist, sollte ein neuer Tab mit einer URL geöffnet werden, die im Umfang der App liegt. In der App kann für diese Schaltfläche eine benutzerdefinierte URL und ein Symbol festgelegt werden. Browser können entscheiden, wie diese Tabs gezogen werden sollen, um neue Fenster zu erstellen oder mit Browsertabs zu kombinieren.

Zulässige Werte für "new_tab_button" sind:

  • "auto", um dem Browser zu erlauben, zu entscheiden, was zu tun ist.
  • "absent", um dem Browser zu sagen, dass keine Schaltfläche für einen neuen Tab angezeigt werden soll.
  • Ein Objekt mit zwei untergeordneten Properties:
    • "url" mit den zulässigen Werten von "auto" oder eine URL im Geltungsbereich, auf der neue Tabs geöffnet werden sollen.
    • "icons" mit den zulässigen Werten "auto" oder ein Array von Symbolen wie in der Haupteigenschaft "icons".

Vollständiges Beispiel

Ein vollständiges Beispiel zur Konfiguration des Verhaltens einer App mit einer Oberfläche mit Tabs könnte wie folgt aussehen:

{
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "url": "./home/",
      "icons": [
        {
          "src": "./home.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    },
    "new_tab_button": {
      "url": "./new-tab/",
      "icons": [
        {
          "src": "./new-tab.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    }
  }
}

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

Sie können den Tab-Anwendungsmodus testen, indem Sie ein Browser-Flag festlegen:

  1. Legen Sie das Flag #enable-desktop-pwas-tab-strip fest.
  2. Installieren Sie die App tabbed-application-mode.glitch.me (Quellcode).
  3. Klicken Sie auf die verschiedenen Links auf den verschiedenen Tabs.

Screenshot der Demo für den Tab-Anwendungsmodus unter tabbed-application-mode.glitch.me

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit dem Anwendungsmodus mit Tabs wissen.

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 bei der Implementierung von Chrome einen Fehler gefunden? Melden Sie den Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich an und geben Sie eine einfache Anleitung zur Reproduktion an. Geben Sie außerdem UI>Browser>WebAppInstalls in das Feld Components ein. Glitch eignet sich hervorragend, um schnell und einfach 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.

Danksagungen

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