Übersicht über benutzerdefinierte Android-Tabs

Benutzerdefinierte Tabs sind eine Funktion in Android-Browsern, mit der App-Entwickler direkt in ihrer App einen benutzerdefinierten Browser hinzufügen können.

Das Laden von Webinhalten ist seit den Anfängen von Smartphones ein Bestandteil von mobilen Apps. Ältere Optionen können jedoch Herausforderungen für Entwickler darstellen. Das Starten des eigentlichen Browsers ist ein großer Kontextwechsel für Nutzer, der nicht anpassbar ist. WebViews unterstützen nicht alle Funktionen der Webplattform, geben keinen Status an den Browser weiter und verursachen zusätzlichen Wartungsaufwand.

Mit benutzerdefinierten Tabs können Nutzer beim Surfen in der App bleiben. Das steigert das Nutzer-Engagement und verringert das Risiko, dass Nutzer die App verlassen. Das funktioniert, weil benutzerdefinierte Tabs direkt vom bevorzugten Browser des Nutzers ausgeliefert werden und den Status und die Funktionen des Browsers automatisch teilen. Sie müssen keinen benutzerdefinierten Code schreiben, um Anfragen, Berechtigungsfreigaben oder Cookie-Speicher zu verwalten.

Was können benutzerdefinierte Tabs?

Wenn Sie einen benutzerdefinierten Tab verwenden, werden Ihre Webinhalte in dem Rendering-Engine geladen, das der bevorzugte Browser des Nutzers verwendet. Dort sind alle API- oder Webplattformfunktionen auf dem benutzerdefinierten Tab verfügbar. Die Browsersitzungen, gespeicherten Passwörter, Zahlungsmethoden und Adressen werden wie gewohnt angezeigt.

Was kann ich auf einem benutzerdefinierten Tab anpassen?

Sehr wichtig! Mit benutzerdefinierten Tabs haben Sie eine detaillierte Kontrolle über viele Browserelemente und die Nutzererfahrung. In Ihrer App starten Sie einen benutzerdefinierten Tab mit einem Intent. Wenn dieser Intent aufgerufen wird, können Sie dem CustomTabIntent eine Reihe von Attributen hinzufügen, um die gewünschte Funktionsweise zu erzielen. Hier sind einige Anpassungen aufgeführt, die Sie hinzufügen können:

  • Benutzerdefinierte Ein- und Ausblendungsanimationen, die zum Rest Ihrer App passen
  • Farbe der Symbolleiste an das Branding Ihrer App anpassen
  • Farbkonsistenz, die in Ihrer App erhalten bleibt, auch wenn zwischen hellem und dunklem Design gewechselt wird
  • Benutzerdefinierte Aktionen und Einträge in der Symbolleiste und den Menüs des Browsers
  • Sie können die Starthöhe des benutzerdefinierten Tabs festlegen und so beispielsweise Ihre Videos streamen, während Sie mit Ihrem Webshop interagieren.

Außerdem können Nutzer einen benutzerdefinierten Tab minimieren, um mit der zugrunde liegenden App zu interagieren, und ihn jederzeit wiederherstellen, ohne dass dabei Fortschritte bei der Fortsetzung der App verloren gehen. So haben Nutzer eine Alternative, um den benutzerdefinierten Tab zu schließen. Außerdem können sie problemlos zwischen dem Web und der systemeigenen App wechseln. Die Funktion ist für benutzerdefinierte Tabs standardmäßig aktiviert.

Das ist alles andere als einfach. Benutzerdefinierte Tabs sind sehr leistungsfähig und werden derzeit aktiv weiterentwickelt. Jeder Browser muss diese Funktionen unterstützen, sobald sie verfügbar sind. Auch wenn fast alle ein gewisses Maß an Unterstützung bieten, ist es wichtig zu wissen, welche Funktionen in den Browsern Ihrer Nutzer verfügbar sind. In der Vergleichstabelle der Funktionen kannst du die Verfügbarkeit der verschiedenen Funktionen in den gängigen Android-Browsern schnell prüfen.

Sie können das jetzt mit unserem Beispiel auf GitHub testen.

Wann sollte ich benutzerdefinierte Tabs verwenden?

Es gibt nicht nur eine einzige, „richtige“ Art, Webinhalte zu laden. In bestimmten Situationen ist WebView die richtige Technologie. Das ist beispielsweise der Fall, wenn Sie ausschließlich eigene Inhalte in Ihrer App hosten oder JavaScript direkt aus Ihrer App einschleusen müssen. Wenn Ihre App Nutzer zu URLs außerhalb von Domains weiterleitet, sind benutzerdefinierte Tabs aufgrund des integrierten gemeinsamen Zustands wahrscheinlich die bessere Wahl. Weitere Vorteile von benutzerdefinierten Tabs:

  1. Sicherheit: In benutzerdefinierten Tabs wird Google Safe Browsing verwendet, um Nutzer und das Gerät vor gefährlichen Websites zu schützen.
  2. Leistungsoptimierung:
    1. Vorwärmen des Browsers im Hintergrund unter Vermeidung des Diebstahls von Ressourcen aus der Anwendung
    2. Die Seitenladezeit lässt sich verkürzen, indem URLs vorab spekulativ geladen werden.
  3. Lebenszyklusverwaltung: Apps, die einen benutzerdefinierten Tab starten, werden während der Nutzung des Tabs nicht vom System entfernt. Ihre Wichtigkeit wird auf die Ebene „Im Vordergrund“ erhöht.
  4. Gemeinsamer Cookie-Jar und Berechtigungsmodell, sodass sich Nutzer nicht auf Websites anmelden müssen, mit denen sie bereits verbunden sind, und Berechtigungen nicht noch einmal gewähren müssen.
  5. Browserfunktionen wie das automatische Ausfüllen von Formularen sind bereits integriert.
  6. Nutzer können über eine integrierte Schaltfläche „Zurück“ zur App zurückkehren.

Benutzerdefinierte Tabs im Vergleich zu vertrauenswürdigen Web-Aktivitäten

Vertrauenswürdige Web-Aktivitäten erweitern das Custom Tabs-Protokoll und bieten die meisten seiner Vorteile. Anstatt eine benutzerdefinierte Benutzeroberfläche bereitzustellen, ermöglicht es Entwicklern, einen Browsertab ohne Benutzeroberfläche zu öffnen. Sie wird Entwicklern empfohlen, die ihre eigene progressive Web-App in ihrem eigenen Android-App-Fenster im Vollbildmodus öffnen möchten.

Wo sind benutzerdefinierte Tabs verfügbar?

Benutzerdefinierte Tabs sind eine Funktion, die von Browsern auf der Android-Plattform unterstützt wird. Sie wurde ursprünglich in Version 45 von Chrome eingeführt. Das Protokoll wird von den meisten Android-Browsern unterstützt.

Wir freuen uns über Feedback, Fragen und Vorschläge zu diesem Projekt. Wir empfehlen dir daher, Probleme auf crbug.com zu melden oder Fragen auf Twitter @ChromiumDev zu stellen.

Erste Schritte

Zusätzlich zur GitHub-Demo gibt es eine Reihe von Leitfäden für den Einstieg in benutzerdefinierte Tabs.

Fragen finden Sie unter dem Tag chrome-custom-tabs auf StackOverflow.