In-App-Browsing mit eingebettetem Web

In-App-Browser bieten Ihren Nutzern ein umfassendes Weberlebnis, ohne dass sie Ihre App verlassen müssen. Android bietet zwei primäre APIs für die Implementierung von In-App-Browsern: Benutzerdefinierte Tabs und WebViews. Verwenden Sie einen In-App-Browser, wenn Sie einen Link oder eine Anzeige haben, die zu einer Webseite führt. Sie können diese Seite direkt in Ihrer App öffnen, wie in Abbildung 1 zu sehen ist.

Ein In-App-Link in einem roten Feld und ein Pfeil, der auf einen anderen Bildschirm zeigt, auf dem der Link mit einem benutzerdefinierten Tab geöffnet wird.
Abbildung 1. Klicken auf einen In-App-Link (links) und Öffnen eines In-App-Browsers über einen benutzerdefinierten Tab (rechts).

Die Entscheidung zwischen benutzerdefinierten Tabs und WebViews ist eine wichtige architektonische Entscheidung, die sich auf die Entwicklungsgeschwindigkeit, die Nutzerfreundlichkeit und die Kontrolle über die Benutzeroberfläche auswirkt.

Kurzer Vergleich

Anhand der folgenden Tabelle können Sie entscheiden, welches Tool Ihren Anforderungen entspricht:

Funktion WebView Benutzerdefinierte Tabs
Primärer Anwendungsfall Entwicklung von Hybrid-Apps mit Webinhalten als primärem oder unterstützendem Inhalt, Anzeigen von Displayanzeigen, In-App-Kampagnen oder Nutzungsbedingungen. Anzeige von Inhalten von externen Websites (z. B. Nachrichtenartikel oder Produktseiten)
UI-Steuerelement Voll. Es ist eine View-Komponente, die Sie überall platzieren können. Sie haben die Kontrolle über die gesamte umgebende Benutzeroberfläche. Eingeschränkt: Sie können die Farbe der Symbolleiste anpassen und einige benutzerdefinierte Aktionen hinzufügen.
Daten und Sitzungen Sandbox-Technologie Cookies oder Anmeldedaten werden nicht mit dem Hauptbrowser des Nutzers geteilt. Geteilt. Dabei wird die Standardbrowsersitzung des Nutzers verwendet, einschließlich Cookies und gespeicherter Passwörter.
Native <-> Web-Bridge Ja. Sie können eine JavaScript-Bridge für die bidirektionale Kommunikation zwischen Webinhalten und systemeigenem App-Code verwenden. Eingeschränkt: Sie können die Methode window.postMessage() für die einfache Stringübergabe verwenden.
Entwicklungsaufwand Hoch Sie müssen den Lebenszyklus, die Navigation und die Leistung selbst verwalten. Niedrig Sie können es mit nur wenigen Codezeilen implementieren.

WebView

Eine WebView ist eine Ansicht, die Webseiten zu einem integralen Bestandteil des Layouts Ihrer App macht. Sie ist leistungsstark, aber etwas komplexer zu handhaben als benutzerdefinierte Tabs.

WebView kann Remote- oder lokale Webinhalte laden, JavaScript ausführen und eine bidirektionale Kommunikation zwischen Ihren Webinhalten und dem systemeigenen App-Code ermöglichen. Weitere Informationen zu den Funktionen finden Sie unter Was WebView kann.

Du kannst WebView auch verwenden, um eine Webanwendung bereitzustellen oder eine Online-Webseite als Teil deiner App anzuzeigen, z. B. eine Nutzungsvereinbarung, die du regelmäßig aktualisieren musst. Weitere Informationen finden Sie unter Web-Apps in WebView erstellen.

Vorteile von WebView

Hier sind einige Szenarien, in denen WebView eine gute Wahl ist:

  • Hybrid-Apps:Sie erstellen eine App, in der Webinhalte und native Komponenten (z. B. eine Navigationsleiste oder ein unverankerter Aktionsbutton) nebeneinander existieren.
  • Eigene Inhalte:Ihre Webinhalte sind ein zentraler, interaktiver Teil der Nutzerfreundlichkeit der App, z. B. ein Dokumenteneditor oder ein Design-Canvas.
  • Vollständige UI-Steuerung: Sie müssen den Inhalt der Webseite selbst ändern oder native UI-Elemente darüberlegen.
  • Detaillierte Analysen: Sie benötigen detaillierte Informationen zum Nutzer-Engagement und zur Nutzeraktivität in der WebView.

Wichtige Kompromisse

Im Folgenden sind einige wichtige Kompromisse aufgeführt, die Sie bei der Verwendung von WebView berücksichtigen sollten:

  • Leistung:WebView kann sehr speicherintensiv sein. Wenn Sie ihn nicht sorgfältig verwalten, kann es zu Leistungsproblemen oder ANR-Fehlern (App Not Responding) kommen.
  • Sicherheit und Wartung: Sie sind für die Erhöhung der Sicherheit und die Verwaltung des Lebenszyklus verantwortlich. Dazu gehört auch die Verwaltung der Statuserhaltung bei der Neuerstellung von Prozessen mit WebViewCompat.saveState() und die Einhaltung des Limits von 1 MB für gespeicherte Statustransaktionen in Android. WebView-Updates werden jedoch weltweit über Google Play veröffentlicht, sodass Sie sich keine Sorgen machen müssen, dass die zugrunde liegende Engine veraltet.

Benutzerdefinierte Tabs

Benutzerdefinierte Tabs sind eine gute Wahl, um Nutzer zu externen URLs weiterzuleiten, da sie ein schnelles, sicheres und nutzerfreundliches Browserfenster bieten, das über Ihre App eingeblendet wird.

Vorteile von benutzerdefinierten Tabs

In den folgenden Szenarien sind benutzerdefinierte Tabs eine gute Wahl:

  • Externe Links:Wenn ein Nutzer auf einen Link zu einer Website tippt, die nicht dir gehört, bleibt er mit benutzerdefinierten Tabs im Kontext deiner App, während er gleichzeitig eine vollwertige Browsererfahrung erhält.
  • Einfache Integration: Es ist die einfachste Möglichkeit, eine eingebettete Webumgebung einzurichten und auszuführen.
  • Gemeinsamer Status:Da Cookies mit dem Standardbrowser des Nutzers geteilt werden, müssen sich Nutzer nicht noch einmal auf Websites anmelden, die sie bereits besucht haben.
  • Anmeldung durch einen Drittanbieter:Sie eignen sich gut für die Anmeldung durch einen Drittanbieter (z. B. „Über Google anmelden“ oder „Über Facebook anmelden“), da der Browser die Anmeldedaten sicher verarbeitet.

Die meisten Browser unterstützen benutzerdefinierte Tabs, aber einige bieten mehr Anpassungsmöglichkeiten als andere. Weitere Informationen finden Sie unter Browserunterstützung.

Webinhalte in Jetpack Compose verwenden

Wenn Sie mit Jetpack Compose entwickeln, können Sie sowohl benutzerdefinierte Tabs als auch WebView verwenden:

  • Benutzerdefinierte Tabs: Da benutzerdefinierte Tabs einen Intent verwenden, können Sie sie über einen beliebigen Context in Ihren Compose-Funktionen starten. Das ermöglicht eine nahtlose Integration.
  • WebView: Compose hat noch kein natives Composable für WebView. Sie müssen also AndroidView verwenden, um eine Standard-WebView in Ihr Layout einzubetten.

Zusätzliche Ressourcen

Informationen zum Entwickeln von Webseiten für Android-Geräte mit WebViews oder Custom Tabs APIs finden Sie in den folgenden Dokumenten: