Es gibt viele Gründe, warum Entwickler Webinhalte in Android-Apps einbinden: Sie können beispielsweise ein Web-Widget in einer Android-App wiederverwenden, eigene oder Drittanbieterinhalte einbinden oder sogar ihre gesamte Webanwendung auf der Plattform anbieten. Für jeden Anwendungsfall bietet Android viele Tools, die dies ermöglichen.
Hier sind die neuesten Updates zu diesen Tools. Beispiel:
- Verbesserungen beim Datenschutz und bessere Unterstützung für große Bildschirme, z. B. Drag-and-drop-Unterstützung für Bilder in WebView.
- Benutzerdefinierte Tabs unterstützen jetzt teilweise benutzerdefinierte Tabs.
- Integrierte Funktionen für PWA, z. B. eine umfassendere Installationsoberfläche und die Play Billing API in Vertrauenswürdige Webaktivitäten.
Sehen wir uns das genauer an.
WebView
WebView ist die gängigste Methode, Webinhalte in Android-Apps einzubetten, da die überwiegende Mehrheit der Android-Apps WebView verwendet. Sie eignet sich hervorragend, um Web-UIs nahtlos in native Android-Apps einzubinden. Sie können beispielsweise verschiedene Web-UI-Elemente wie Anzeigen, Widgets oder sogar In-App-Browser in Ihre App einbetten. Eine der größten Stärken von WebView ist die leistungsstarke API zur Steuerung und Änderung der geladenen Webinhalte. Was ist also neu bei WebView?
X-Requested-With-Header
Beginnen wir mit dem Datenschutz und der Einstellung der Kopfzeile „X-Requested-With“. Wenn ein Nutzer eine Anwendung installiert und ausführt, die Webinhalte über eine WebView einbettet, fügt die WebView jeder an die Server gesendeten Anfrage die Kopfzeile „X-Requested-With“ hinzu. Der Wert dieses Headers ist der APK-Name der Anwendung. Das bedeutet, dass jede Anfrage spezifische Informationen über den Kontext enthält, in dem der Nutzer Webinhalte nutzt, und die Identität der App an den Onlinedienst weitergibt. Aus Datenschutzgründen hat das WebView-Team einen Test zur Einstellung gestartet, wodurch dieser Header aus allen WebView-Anfragen entfernt wird.
Aber was ist, wenn Ihre Anwendung den Header X-Requested-With verwendet? Wir empfehlen die Verwendung der neuen Opt-in-API, mit der Sie den Anfrageheader selektiv an bestimmte Ursprünge senden können. So erhalten Sie das Beste aus beiden Welten: Sie können weiterhin vorhandene Funktionen unterstützen, die auf dieser Kopfzeile basieren, und gleichzeitig dafür sorgen, dass die Privatsphäre der Nutzer in allen anderen Fällen geschützt bleibt. Wenn Sie das aktuelle Verhalten beibehalten möchten, können Sie sich auch für den Ursprungstest zur Einstellung von X-Requested-With registrieren.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
WebView-Tests
Das nächste Thema ist das Testen. Wenn Sie Webentwickler sind und Ihre Websites viele Zugriffe über WebViews erhalten, gibt es zwei Neuigkeiten für Sie:
WebView unterstützt jetzt Chrome-Ursprungstests. Mit Ursprungstests erhalten Sie Zugriff auf neue oder experimentelle Funktionen in Chrome. So können Sie neue Funktionen testen, bevor sie für alle Nutzer verfügbar sind. Bisher waren Ursprungstests nur auf dem Computer und in der mobilen Chrome-Version verfügbar. Ab Chrome M110 funktionieren sie aber auch in WebView.
Die Installation von WebView Beta ist jetzt viel einfacher. Wir empfehlen Ihnen dringend, Ihre Website mit dem WebView-Betakanal zu testen, um sicherzustellen, dass sie auch in zukünftigen WebView-Versionen ordnungsgemäß funktioniert. Dazu müssen Sie am WebView-Betatestprogramm im Google Play Store teilnehmen. Ihr Gerät wird dann automatisch registriert.
Unterstützung von Geräten mit großem Display
Unser Ziel ist es, WebView auf Geräten mit großem Bildschirm möglichst fehlerfrei zu verwenden. Ein Schritt in diese Richtung ist, dass WebView jetzt das Ziehen und Droppen von Bildern unterstützt. Im Ansichtsmodus mit geteiltem Bildschirm können Sie beispielsweise ein Bild aus einem WebView in eine andere App ziehen.
Es ist ganz einfach, Ihren WebViews Drag-and-drop hinzuzufügen: Sie müssen dazu nur einen DropDataProvider in Ihrem AndroidManifest deklarieren.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Auf Geräten mit großem Display unterstützen Chrome und WebView unter Android U die Handschrifteingabe in HTML-Texteingabefeldern sowie Eingabegesten zum Löschen von Text oder zum Einfügen von Leerzeichen. Die Unterstützung von Handschrift ist bereits für alle Samsung-Geräte mit One UI 5.1 verfügbar, z. B. das S23 Ultra. Auf anderen Geräten mit Android T können Sie die Handschrifteingabe in HTML-Eingabefeldern unter „Entwickleroptionen“ aktivieren.
Jetpack-JavaScript-Engine
Manchmal müssen Sie JavaScript in Ihrer App ausführen, ohne Webinhalte anzuzeigen, z. B. beim Teilen von Geschäftslogik in Web- und mobilen Apps. Um dies zu vereinfachen, haben wir letztes Jahr die Alphaversion der neuen JetPack-JavaScript-Engine veröffentlicht. Diese Bibliothek verwendet die JavaScript-Engine V8 von Chrome und ermöglicht Ihrer Anwendung die Auswertung von JavaScript- oder WebAssembly-Code, ohne eine WebView-Instanz zu erstellen. Das Tolle an der neuen JavaScript-Engine ist, dass sie Ihren JavaScript-Code in einem anderen Prozess ausführt. So können Sie JavaScript in Ihrer App sicher und stabil ausführen. Sie benötigt außerdem weniger Ressourcen als eine WebView-Instanz.
ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…
Benutzerdefinierte Tabs
WebView eignet sich hervorragend, um eine Web-Benutzeroberfläche in Ihre App einzubinden. Aber wie wäre es, wenn Nutzer Webinhalte in Ihrer App durchsuchen könnten?
Das ist ein idealer Anwendungsfall für benutzerdefinierte Tabs. Sie sind eine sichere und nutzerfreundliche Möglichkeit, Nutzern die Anzeige von Webinhalten in Ihrer App zu ermöglichen. Der große Vorteil besteht darin, dass sich Nutzer nicht noch einmal auf ihren bevorzugten Websites anmelden müssen. Das liegt daran, dass sie eine Instanz des Standardbrowsers und der Cookies sind, die freigegeben werden, und sie bieten alle Webplattformfunktionen und APIs, die vom Browser unterstützt werden.
Wenn Chrome Ihr Standardbrowser ist, wird ein benutzerdefinierter Tab in Chrome geöffnet. Wenn Firefox Ihr Standardbrowser ist, wird ein benutzerdefinierter Tab in Firefox geöffnet. Die meisten gängigen Browser auf Android unterstützen benutzerdefinierte Tabs. Wenn der Standardbrowser keine benutzerdefinierten Tabs unterstützt, wird stattdessen die Browser-App geöffnet.
Das Tolle an benutzerdefinierten Tabs ist, dass Sie sie so gestalten können, dass sie zum Erscheinungsbild Ihrer App passen. Außerdem können Sie über Aktionen und eigene Symbolleisten benutzerdefinierte Interaktivität hinzufügen.
Teilweise benutzerdefinierte Tabs
Die Anpassung von benutzerdefinierten Tabs wurde mit der Unterstützung von teilweise benutzerdefinierten Tabs erheblich verbessert. Sie ermöglichen den Nutzern Multitasking zwischen Apps und dem Web. Bisher bedeckte das Overlay des Browsertabs bei benutzerdefinierten Tabs den gesamten Bildschirm. Jetzt können Sie die Höhe des Overlays auf dem benutzerdefinierten Tab steuern. So können Nutzer gleichzeitig mit Ihrer App und Ihren Webinhalten interagieren. Wenn der Browser des Nutzers keine teilweisen benutzerdefinierten Tabs unterstützt, wird ihm einfach der unterstützte benutzerdefinierte Tab im Vollbildmodus angezeigt.
Sie müssen lediglich eine Verbindung zum Custom Tabs-Dienst herstellen, die Sitzung an den CustomTabsBuilder übergeben und setActivityHeight aufrufen.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
YouTube hat die Funktion für anpassbare Inline-benutzerdefinierte Tabs in Direct-Response-Anzeigen eingeführt. So konnte eine neue Art der Interaktion mit Anzeigen und Webinhalten implementiert werden, ohne die organische Nutzung der App zu unterbrechen.
Aber was ist mit Tablets und anderen Geräten mit großem Bildschirm? Das Chrome-Team arbeitet derzeit an einer neuen Funktion für nebeneinander angeordnete benutzerdefinierte Tabs im Querformat und auf Geräten mit großem Bildschirm. Wenn Sie eine maximale Tabbreite und einen Wendepunkt definieren, wird auf dem benutzerdefinierten Tab automatisch zwischen dem Unterblatt-Overlay und dem nebeneinander liegenden Layout gewechselt. Die Funktion ist bereits in Canary verfügbar und wird voraussichtlich im Juli 2023 eingeführt. Wenn Sie es ausprobieren möchten, sehen Sie sich den Quellcode der Beispiel-App für benutzerdefinierte Tabs in Chromium an.
Engagement-Signale messen
Die zweite große Neuerung bei benutzerdefinierten Tabs ist die Messung des sitzungsspezifischen Nutzer-Engagements. Wenn Nutzern in Ihrer App regelmäßig Inhalte und Links präsentiert werden, z. B. in einem Nachrichtenfeed, wäre es nicht hilfreich, wenn Sie herausfinden könnten, welche Links ein Nutzer wertvoll findet und welche nicht? Diese Informationen können sehr hilfreich sein, wenn es darum geht, die Links zu priorisieren, die Ihren Nutzern angezeigt werden sollen.
Das Chrome-Team hat die Sichtbarkeit sitzungsspezifischer Messwerte für benutzerdefinierte Chrome-Tabs hinzugefügt. Sie können jetzt nicht nur sehen, wie lange ein Nutzer auf einer Seite bleibt, sondern auch den Bildlaufabstand, die Bildlaufrichtung und das allgemeine Engagement mit Webinhalten.
Engagement-Signale sind ab Chrome 114 verfügbar und erfordern die androidx.browser:browser:1.6.0-alpha01-Supportbibliothek oder höher. Weitere Informationen finden Sie im Leitfaden zu Engagement-Signalen.
PWA
Es gibt auch Updates für PWAs – eine Reihe von Technologien, mit denen sich app-ähnliche Funktionen erstellen lassen, die im Web entwickelt und bereitgestellt werden.
Wenn Sie eine PWA auf Android verwenden, kann Ihre Web-App installiert werden: Sie wird zusammen mit den anderen Plattform-Apps auf dem Startbildschirm, im Launcher, in den Einstellungen und auf anderen Oberflächen angezeigt.
PWA-Funktionen basieren auf Webstandards. Der Schwerpunkt liegt auf der plattformübergreifenden Kompatibilität. Entwickler erhalten die Tools, um eine Web-App einmalig zu erstellen, und die Nutzer können sie auf jedem Gerät installieren, das sie auswählen. Das Erstellen einer installierbaren Web-App bedeutet nicht, dass Sie keine native Android-App haben können oder sollten. Es ist jedoch eine weitere Option, das Web auf Android-Geräte zu bringen.
Sehen wir uns einige Funktionen an, mit denen sich Ihre installierbare Web-App in Android perfekt anfühlt.
Wir wollten Nutzern die Möglichkeit geben, die Websites zu installieren, die ihnen am wichtigsten sind. Der erste Schritt bestand darin, den Service Worker-Abruf-Handler als Voraussetzung für die Installation unter Android und Chrome zu entfernen. Außerdem überspringt Chrome den Start des Dienstarbeiters, wenn der Abruf-Handler leer ist. In Chrome werden Tests durchgeführt, um den Zugriff auf die Installation für Nutzer zu erweitern. Achten Sie auf diese und geben Sie uns bitte Feedback.
Die Service Worker-Anforderung bestand, damit Entwickler eine Nutzererfahrung schaffen konnten, die mit anderen Android-Apps übereinstimmt. So könnte beispielsweise eine Seite erstellt werden, auf der Nutzer darüber informiert werden, dass sie die App im Offlinemodus nicht verwenden können.
Wir haben erkannt, dass wir die Arbeitsbelastung für Entwickler reduzieren und dafür sorgen können, dass diese Apps von Anfang an gut funktionieren. Aus diesem Grund hat Chrome eine Standardeinstellung für die Offlinenutzung hinzugefügt, bei der Nutzern ein Bildschirm mit dem App-Symbol angezeigt wird, um sie darauf hinzuweisen, dass sie offline sind. Entwickler müssen dazu nichts weiter tun.
Natürlich steht die Service Worker API weiterhin zur Verfügung, um benutzerdefinierte Offlineumgebungen zu erstellen und andere Funktionen wie Caching zu implementieren, um die Leistung zu verbessern.
Mit der besseren Installations-UI lässt sich außerdem die Nutzererfahrung in Android-Apps verbessern. Wenn Sie Ihrem Webmanifest die Felder description und screenshots hinzufügen, erzielen Ihre Nutzer eine Installation, die eher dem entspricht, was in App-Shops zur Beschreibung Ihrer App angezeigt wird.
Es gibt auch Tastenkombinationen. Wenn Sie ein Array namens shortcuts hinzufügen, das eine Reihe von Schnellaktionen beschreibt, die Ihre Nutzer häufig in Ihrer App ausführen, können sie durch langes Drücken auf das App-Symbol auf diese Aktionen zugreifen.
Wenn Sie die APIs Web Share und Web Share Target verwenden, kann Ihre App wie jede andere Plattform-App mit anderen Apps interagieren. Ihre App wird als Option in den Freigabetabellen angezeigt und kann Fotos, Texte und andere Dateien teilen und empfangen.
Weitere Informationen dazu, wie Unternehmen diese Technologien einsetzen, finden Sie im I/O-Talk "The Web: Your platform for growth".
Vertrauenswürdige Webaktivität
Eine weitere Möglichkeit, das Web auf Android-Geräten zu nutzen, ist die vertrauenswürdige Web-Aktivität.
TWA ist die beste Möglichkeit, Erstanbieter-Webinhalte im Vollbildmodus in Ihrer App anzuzeigen. Sie ist die ideale Lösung für Entwickler, die ihre Webanwendung als Android-App einbinden oder ihre Website als Teil einer App nutzen möchten.
TWA klingt zwar, als hätte es einen engen Bezug zu PWAs, ist aber nicht mit ihnen verwandt. Ja. Mit TWA können Sie Ihre installierbare Web-App bei Google Play veröffentlichen. Sie können aber auch eine einzelne Aktivität im Web erstellen und in Ihre Android-App einbinden.
Eine vertrauenswürdige Webaktivität wird vom Browser des Nutzers genau so gerendert, wie er sie in seinem Browser sehen würde, mit der Ausnahme, dass sie im Vollbildmodus ausgeführt wird und keine URL-Leiste enthält. Das bedeutet, dass sie alle Webplattformfunktionen und APIs unterstützen, die von dem Browser unterstützt werden, dem sie zugrunde liegen.
Das Umschließen Ihrer Webanwendung mit TWA bietet folgende Vorteile:
Veröffentlichung bei Google Play: Ihre App erhält dadurch Zugriff auf die Sichtbarkeit und den Vertrieb Ihrer App bei Google Play. Zugriff auf die Play Billing API, mit der Entwickler den Verkauf digitaler Waren in ihren Apps verwalten können. So lassen sich Produkte, Verkäufe, Abos und mehr einfacher einrichten. Delegieren von Benachrichtigungen und Berechtigungen zur Standortermittlung an die Android-App anstelle der Website.
In diesem Artikel erfahren Sie mehr darüber, wie ContactsDirect TWA verwendet hat, um die Nutzerfreundlichkeit zu verbessern und die Conversion-Raten zu verdreifachen.
Fazit
Wie Sie gesehen haben, gibt es viele verschiedene Optionen zum Einbetten von Webinhalten in Ihrer App und alle diese Optionen werden kontinuierlich verbessert.