Tab-Anwendungsmodus für PWAs

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

Thomas Steiner

In der Welt der Computing-Welt ist die Desktop-Metapher eine Benutzeroberflächen-Metapher, die mehrere Konzepte vereinheitlicht, die von grafischen Benutzeroberflächen (GUI) verwendet werden, um Nutzern die Interaktion mit dem Computer zu erleichtern. In Übereinstimmung mit der Desktop-Metapher werden GUI-Tabs traditionellen Kartentabs modelliert, die in Bücher, Papierakten oder Kartenindexe eingefügt wurden. Eine Document Interface (TDI) mit Tabs oder ein Tab ist ein grafisches Steuerelement, mit dem mehrere Dokumente oder Bereiche in einem einzelnen Fenster enthalten sein können. Tabs werden als Navigations-Widget zum Wechseln zwischen Gruppen von Dokumenten verwendet.

Progressive Web-Apps können in verschiedenen Anzeigemodi ausgeführt werden, die durch die Property display im Web-App-Manifest festgelegt werden. Beispiele sind fullscreen, standalone, minimal-ui und browser. Diese Anzeigemodi folgen einer klar definierten Fallback-Kette ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Wenn ein Browser einen bestimmten Modus nicht unterstützt, kehrt er zum nächsten Anzeigemodus in der Kette zurück. Über die Property "display_override" können Entwickler bei Bedarf ihre eigene Fallback-Kette angeben.

Was ist der Anwendungsmodus mit Tabs?

Was bisher auf der Plattform gefehlt hat, ist eine Möglichkeit, mit der PWA-Entwickler ihren Nutzern eine Dokumentoberfläche mit Tabs anbieten können, um beispielsweise verschiedene Dateien im selben PWA-Fenster zu bearbeiten. Der Anwendungsmodus mit Tabs schließt diese Lücke.

Empfohlene Anwendungsfälle für den Anwendungsmodus mit Tabs

Beispiele für Websites, die den Anwendungsmodus mit Tabs verwenden können:

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

Unterschiede zu Tabs für Entwickler

Das Speichern von Dokumenten auf separaten Browsertabs führt zu einer kostenlosen Ressourcenisolation, was im Internet derzeit nicht möglich ist. Von Entwicklern erstellte Tabs lassen sich wie Browser-Tabs nicht auf Hunderte von Tabs skalieren. Browserangebote wie Navigationsverlauf, "URL dieser Seite kopieren", "Tab streamen" oder "Diese Seite in einem Webbrowser öffnen" werden auf die vom Entwickler erstellte Tab-Oberfläche angewendet, aber nicht auf die aktuell ausgewählte Dokumentseite.

Unterschiede zu "display": "browser"

Das 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).

Obwohl Browser in Bezug auf die Benutzeroberfläche alles machen können, was sie möchten, wäre es eindeutig eine ziemliche Abweichung der Erwartungen an die Entwickler, wenn "display": "browser" plötzlich „in einem separaten anwendungsspezifischen Fenster ohne Browserangebote, sondern in einer Dokumentoberfläche mit Tabs ausgeführt werden würde“.

Mit der Einstellung "display": "browser" können Sie quasi das Deaktivieren von einem Anwendungsfenster festlegen.

Aktueller Status

Anwendungsmodus mit Tabs verwenden

Damit Entwickler den Anwendungsmodus mit Tabs verwenden können, müssen sie ihre Apps aktivieren. Dazu legen sie im Web-App-Manifest einen bestimmten Wert für den Modus "display_override" fest.

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

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

Tab „Startseite“

Der Tab „Startseite“ ist ein angepinnter Tab. Wenn er für eine App aktiviert ist, sollte er immer vorhanden sein, wenn die App geöffnet ist. Dieser Tab sollte niemals navigiert werden. Links, die auf diesem Tab angeklickt werden, sollten auf einem neuen App-Tab geöffnet werden. Apps können die URL, an die dieser Tab gebunden ist, und das darauf angezeigte Symbol anpassen.

Die zulässigen Werte für "home_tab" sind:

• "auto", damit der Browser bestimmen kann, was zu tun ist.
• "absent", um den Browser anzuweisen, den Tab „Startseite“ nicht anzuzeigen.
• Ein Objekt mit zwei untergeordneten Properties:
  • "url" durch die zulässigen Werte "auto" oder eine URL, auf die der Tab „Startseite“ gesperrt werden soll.
  • "icons" durch die zulässigen Werte für "auto" oder ein Array von Symbolen wie in der "icons"-Haupteigenschaft.

Schaltfläche „Neuer Tab“

Wenn die Schaltfläche „Neuer Tab“ vorhanden ist, sollte ein neuer Tab unter einer URL geöffnet werden, die innerhalb der App liegt. Die App kann eine benutzerdefinierte URL und ein Symbol für diese Schaltfläche festlegen. Browser können entscheiden, wie das Ziehen dieser Tabs gehandhabt werden soll, um neue Fenster zu erstellen oder mit Browsertabs zu kombinieren.

Die zulässigen Werte für "new_tab_button" sind:

• "auto", damit der Browser bestimmen kann, was zu tun ist.
• "absent", um dem Browser anzuweisen, die Schaltfläche „Neuer Tab“ nicht anzuzeigen.
• Ein Objekt mit zwei untergeordneten Properties:
  • "url" durch die zulässigen Werte "auto" oder eine URL, die unter die Vorgaben fällt, um neue Tabs zu öffnen.
  • "icons" durch die zulässigen Werte für "auto" oder ein Array von Symbolen wie in der "icons"-Haupteigenschaft.

Vollständiges Beispiel

Ein vollständiges Beispiel zum Konfigurieren des Verhaltens einer App mit einer Oberfläche mit Tabs könnte so 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"
        }
      ]
    }
  }
}

Anwendungsmodus mit Tabs erkennen

Apps können erkennen, ob sie im Anwendungsmodus mit Tabs ausgeführt werden. Dazu prüfen Sie die CSS-Medienfunktion display-mode in CSS oder JavaScript:

@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 weiterleiten, 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

Sie können den Anwendungsmodus mit Tabs ausprobieren, 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 den verschiedenen Tabs auf die verschiedenen Links.

Feedback

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

Informationen zum API-Design

Gibt es irgendetwas beim Anwendungsmodus mit Tabs, der 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 bei der Implementierung in Chrome gefunden? Melden Sie einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Geben Sie UI>Browser>WebAppInstalls in das Feld Komponenten ein. Glitch eignet sich perfekt, um Fälle schnell und einfach zu reproduzieren.

Unterstützung für die API zeigen

Möchten Sie den Anwendungsmodus mit Tabs verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren und anderen Browseranbietern zu zeigen, wie wichtig es ist, sie zu unterstützen.

Sende einen Tweet mit dem Hashtag #TabbedApplicationMode an @ChromiumDev und teile uns mit, wo und wie du den Dienst verwendest.

Nützliche Links

• Erklärung
• Problem mit den Manifestspezifikationen der Web-App
• Chromium-Programmfehler
• Blink-Komponente: UI>Browser>WebAppInstalls

Danksagungen

Der Anwendungsmodus mit Tabs wurde von Matt Giuca ausprobiert. Für die experimentelle Implementierung in Chrome hat Alan Cutter gearbeitet. Dieser Artikel wurde von Joe Medley gelesen. Hero-Image von Till Niermann auf Wikimedia Commons