Es gibt viele Gründe für Entwickler, das Web für Android zu nutzen: Vielleicht ein Web-Widget in einer Android-App wiederverwenden, eigene Inhalte oder Inhalte von Drittanbietern einbinden oder sogar ihre gesamte Web-App auf der Plattform nutzen. Für jeden Anwendungsfall gibt es bei Android zahlreiche Tools.
Hier sind die neuesten Updates für diese Tools. Beispiel:
- Datenschutzverbesserungen und bessere Unterstützung für große Bildschirme, z. B. Drag-and-drop von Bildern in WebView
- In Benutzerdefinierte Tabs werden jetzt Teile von benutzerdefinierten Tabs unterstützt.
- Integrierte Funktionen für PWA, z. B. die Richer Install UI und die Play Billing API in Vertrauenswürdige Web-Aktivitäten.
Sehen wir uns das genauer an.
WebView
WebView ist die am häufigsten verwendete Methode zum Einbetten von Webinhalten in Android-Apps, da die überwiegende Mehrheit der Android-Apps WebView verwendet. So lässt sich die Web-UI nahtlos in native Android-Apps einbinden. Sie können beispielsweise verschiedene Web-UIs in Ihre App einbetten, z. B. Anzeigen, Widgets oder sogar In-App-Browser. Eine der größten Stärken von WebView ist die leistungsstarke API zur Steuerung und Änderung der geladenen Webinhalte. Was gibt es Neues bei WebView?
X-Requested-With-Header
Beginnen wir mit dem Datenschutz und der Einstellung des Headers „X-Requested-With“. Wenn ein Nutzer eine Anwendung installiert und ausführt, die WebView zum Einbetten von Webinhalten verwendet, fügt WebView jeder Anfrage, die an Server gesendet wird, den X-Requested-With-Header hinzu. Der Wert dieses Headers ist der APK-Name der App. Das bedeutet, dass jede Anfrage spezifische Informationen über den Kontext enthält, in dem der Nutzer Webinhalte aufruft, und die Identität der Anwendung gegenüber dem Onlinedienst preisgibt. Aus Datenschutzgründen hat das WebView-Team einen Einstellungstest gestartet, bei dem dieser Header aus allen WebView-Anfragen entfernt wird.
Aber was ist, wenn Ihre Anwendung auf den Header „X-Requested-With“ angewiesen ist? Wir empfehlen die Verwendung der neuen Opt-in-API, mit der Sie den Anfrageheader selektiv an bestimmte Ursprünge senden können. Sie profitieren also von den Vorteilen beider Welten: Sie können weiterhin vorhandene Funktionen unterstützen, die auf diesem Header aufbauen, während die Privatsphäre der Nutzer in allen anderen Fällen gewahrt bleibt. Wenn Sie das bestehende Verhalten beibehalten möchten, können Sie sich auch für den Ursprungstest X-Requested-With Deprecation 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 Neuerungen für Sie:
WebView unterstützt jetzt Chrome-Ursprungstests. Mit Ursprungstests erhalten Sie Zugriff auf neue oder experimentelle Funktionen in Chrome. Damit können Sie eine neue Funktion ausprobieren, bevor die Funktion für alle Nutzer verfügbar ist. Bisher waren Ursprungstests nur in Chrome auf Computern und Mobilgeräten verfügbar. Ab Chrome M110 funktionieren Ursprungstests aber auch in WebView.
Es ist jetzt viel einfacher, WebView Beta zu installieren. Wir empfehlen dringend, Ihre Website mit dem WebView-Betakanal zu testen, um sicherzustellen, dass sie in zukünftigen WebView-Versionen einwandfrei funktioniert. Nimm dazu am WebView-Betatestprogramm im Google Play Store teil. Dein Gerät wird dann automatisch registriert.
Unterstützung für Großbildschirme
Wir möchten, dass WebView auch auf Geräten mit großen Bildschirmen funktioniert. Ein Schritt in diese Richtung ist, dass WebView jetzt Drag-and-drop von Bildern unterstützt. Im Splitscreen-Modus können Sie beispielsweise ein Bild aus einem WebView in eine andere App ziehen.
Es ist sehr einfach, Drag-and-drop zu Ihren WebViews hinzuzufügen: Sie müssen lediglich in Ihrem AndroidManifest einen DropDataProvider deklarieren.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Chrome und WebView unter Android U werden bei Geräten mit großen Bildschirmen volle Unterstützung für die Handschrift in HTML-Texteingabefeldern sowie Eingabegesten zum Löschen von Text oder Hinzufügen von Leerzeichen bieten. Die Handschriftunterstützung 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 kannst du unter „Entwickleroptionen“ die Handschrift in HTML-Eingaben aktivieren.
Jetpack-JavaScript-Engine
Manchmal müssen Sie JavaScript in Ihrer Anwendung ausführen, ohne Webinhalte anzeigen zu müssen, z. B. wenn die Geschäftslogik über Web- und mobile Apps hinweg geteilt wird. Um dies zu vereinfachen, haben wir letztes Jahr die Alphaversion der neuen JetPack JavaScript-Engine eingeführt. Diese Bibliothek verwendet V8, die JavaScript-Engine von Chrome. Ihre Anwendung kann damit JavaScript- oder WebAssembly-Code auswerten, ohne eine WebView-Instanz zu erstellen. Das Tolle an der neuen JavaScript-Engine ist, dass sie Ihr JavaScript in einem anderen Prozess ausführt. Dadurch ist es eine sichere und stabile Möglichkeit, JavaScript in Ihrer App auszuführen. Außerdem erfordert sie 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 für die Integration von Web-UI in Ihre App. Aber wie sieht es mit dem Durchsuchen von Webinhalten in Ihrer App aus?
Das ist ein guter Anwendungsfall für benutzerdefinierte Tabs. Sie sind eine sichere und nutzerfreundliche Methode, mit der Nutzer Webinhalte in Ihrer App ansehen können. Sie haben den großen Vorteil, dass Nutzer sich bei ihrer bevorzugten Website nicht noch einmal anmelden müssen. Dies liegt daran, dass sie eine Instanz des Standardbrowsers des Nutzers sind und Cookies freigegeben werden, und sie bieten alle Funktionen und APIs der Webplattform, die vom Browser unterstützt werden.
Wenn Sie also Chrome als Standardbrowser festgelegt haben, wird in Chrome ein benutzerdefinierter Tab geöffnet. Wenn Ihr Standardbrowser Firefox ist, wird in Firefox ein benutzerdefinierter Tab geöffnet. Die meisten gängigen Browser unter Android unterstützen benutzerdefinierte Tabs. Wenn der Standardbrowser keine benutzerdefinierten Tabs unterstützt, wird stattdessen die Browser-App geöffnet.
Das Besondere an benutzerdefinierten Tabs ist, dass Sie sie so gestalten können, dass sie zum Erscheinungsbild Ihrer App passen, benutzerdefinierte Interaktivität über Aktionen und Ihre eigenen Symbolleisten hinzufügen.
Teilweise benutzerdefinierte Tabs
Die Anpassungen von benutzerdefinierten Tabs wurden durch die Unterstützung für teilweise benutzerdefinierte Tabs erheblich verbessert. Sie ermöglichen Nutzern, mit Apps und dem Web mehrere Dinge gleichzeitig zu erledigen. Bisher füllte das Browser-Tab-Overlay bei der Verwendung benutzerdefinierter Tabs den gesamten Bildschirm aus. Jetzt können Sie die Höhe des Overlays für den benutzerdefinierten Tab festlegen. So können Nutzer gleichzeitig mit Ihrer App und Ihren Webinhalten interagieren. Wenn der Browser des Nutzers „Teilweise benutzerdefinierte Tabs“ nicht unterstützt, sieht der Nutzer einfach den unterstützten benutzerdefinierten Tab im Vollbildmodus.
Sie müssen nur eine Verbindung zum Custom Tabs Service 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 erfolgreich benutzerdefinierte Inline-Tabs mit anpassbarer Größe für Direct-Response-Anzeigen eingeführt. Auf diese Weise konnten sie eine neue Art der Interaktion mit Anzeigen und Webinhalten implementieren, ohne die organische Erfahrung in der App zu unterbrechen.
Aber was ist mit Tablets und anderen Geräten mit großem Display? Das Chrome-Team arbeitet derzeit an einer neuen Side-by-Side-Funktion für benutzerdefinierte Tabs für das Querformat und für Geräte mit großen Bildschirmen. Wenn Sie eine maximale Tabbreite und einen Haltepunkt festlegen, wechselt der benutzerdefinierte Tab automatisch zwischen dem Overlay am unteren Rand und der Ansicht nebeneinander. Die Funktion ist bereits in Canary verfügbar und wird etwa im Juli 2003 eingeführt. Wenn du sie ausprobieren möchtest, sieh dir den Quellcode der Beispiel-App für benutzerdefinierte Tabs in Chromium an.
Signale zur Interaktion messen
Die zweite große Neuerung bei benutzerdefinierten Tabs ist die Messung sitzungsspezifischer Nutzerinteraktionen. Angenommen, Ihre App zeigt Nutzern regelmäßig Inhalte wie Links, z. B. in einem Nachrichtenfeed. Wäre es nicht hilfreich, wenn Sie feststellen könnten, welche Links Nutzer wertvoll finden und welche nicht? Diese Informationen können sehr hilfreich sein, wenn es darum geht, welche Links den Nutzern angezeigt werden sollen.
Das Chrome-Team hat den benutzerdefinierten Chrome-Tabs die Sichtbarkeit von sitzungsspezifischen Messwerten hinzugefügt. Sie erhalten nicht nur Informationen dazu, wie lange ein Nutzer auf einer Seite bleibt, sondern auch die Scrollstrecke, die Scrollrichtung und die Interaktionen mit Webinhalten insgesamt.
Engagement-Signale sind ab Chrome 114 verfügbar und erfordern die androidx.browser:browser:1.6.0-alpha01-Supportbibliothek oder höher. Weitere Informationen findest du im Startleitfaden für Engagement-Signale.
PWA
Es gibt auch Updates an PWA – einer Reihe von Technologien, mit denen App-ähnliche Inhalte im Web erstellt und bereitgestellt werden können.
Wenn Sie eine PWA für Android verwenden, könnte Ihre Web-App installiert werden: Sie wird dann neben den anderen Plattform-Apps, auf dem Startbildschirm, im Launcher, in den Einstellungen und auf anderen Oberflächen veröffentlicht.
PWA-Funktionen basieren auf Webstandards. Der Schwerpunkt liegt auf der plattformübergreifenden Kompatibilität. So erhalten Entwickler die Tools, mit denen sie eine Web-App einmal erstellen und auf jedem beliebigen Gerät installieren können. Das Erstellen einer installierbaren Webanwendung bedeutet nicht, dass Sie keine native Android-App haben können oder auch nicht, es ist jedoch eine weitere Option, das Web auf Android zu übertragen.
Sehen wir uns ein paar Funktionen an, mit denen sich deine installierbare Web-App unter Android gut anfühlt.
Wir wollten Nutzern die Möglichkeit geben, die für sie wichtigsten Websites zu installieren. Im ersten Schritt wurde der Abruf-Handler des Service Workers als Voraussetzung für die Installation unter Android und Chrome entfernt. Außerdem überspringt Chrome das Starten des Service Workers, wenn der Abruf-Handler leer ist. Chrome führt Tests durch, um Nutzern mehr Zugriff auf die Installationen zu ermöglichen. Halte sie im Blick und gib uns gern Feedback.
Die Service Worker-Anforderung bestand für Entwickler darin, eine Nutzererfahrung zu schaffen, die mit anderen Android-Apps übereinstimmte. Es könnte verwendet werden, um eine Seite zu erstellen, auf der Nutzende darüber informiert werden, dass sie die App offline nicht verwenden können.
Wir haben erkannt, dass wir die Arbeitslast für Entwickler entlasten und dafür sorgen können, dass diese Apps von Anfang an eine gute Installation bieten. Aus diesem Grund hat Chrome eine Standard-Offline-Funktion eingeführt, bei der Nutzer einen Bildschirm mit dem App-Symbol sehen, der sie darüber informiert, dass sie offline sind, ohne dass der Entwickler zusätzlich etwas tun muss.
Natürlich ist die Service Worker API weiterhin verfügbar, um benutzerdefinierte Offlineumgebungen zu erstellen und andere Funktionen wie Caching zu implementieren, um die Leistung zu verbessern.
Weitere Funktionen, mit denen Android optimiert werden kann, ist die Richer Install UI. Wenn du deinem Webmanifest die Felder „description“ und „screenshots“ hinzufügst, können Nutzer deine App eher installieren als je zuvor.
Es gibt auch Verknüpfungen. Wenn du ein Array namens shortcuts hinzufügst, das eine Reihe von Schnellaktionen beschreibt, die deine Nutzer häufig in deiner App ausführen, können sie durch langes Drücken auf das App-Symbol auf diese Aktionen zugreifen.
Mithilfe der APIs Web Share und Web Share Target kann Ihre App wie jede andere Plattform-App mit anderen Apps interagieren. Ihre App ist eine Option in den Freigabetabellen und kann Fotos, Texte und andere Dateien teilen und empfangen.
Wenn Sie mehr darüber erfahren möchten, wie Unternehmen diese Technologien einsetzen, können Sie sich den I/O-Vortrag „The Web: Your Platform for Growth“ ansehen.
Vertrauenswürdige Webaktivitäten
Eine weitere Möglichkeit, auf Android-Geräten das Web nutzen zu können, sind vertrauenswürdige Webaktivitäten.
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 umschließen oder ihre Website als Teil einer App verwenden möchten.
TWA mag streng mit PWA zu tun haben, ist es aber nicht. Ja, wenn Sie TWA nutzen, 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 diese in Ihre Android-App einbinden.
Vertrauenswürdige Webaktivitäten werden vom Browser des Nutzers auf dieselbe Weise gerendert, wie sie ein Nutzer in seinem Browser sehen würde, mit der Ausnahme, dass sie im Vollbildmodus ausgeführt werden und keine URL-Leiste anzeigen. Das bedeutet, dass sie alle Webplattformfunktionen und APIs unterstützen, die vom jeweiligen Browser unterstützt werden.
Das Wrapping Ihrer Webanwendung mit TWA hat folgende Vorteile:
Bei Google Play veröffentlichen: Ihre App hat Zugriff auf die Sichtbarkeit und den Vertrieb Ihrer App. Zugriff auf die Play Billing API, die es Entwicklern ermöglicht, Verkäufe digitaler Waren in ihren Apps zu verwalten und die Einrichtung von Produkten, Verkäufen, Abos und mehr zu vereinfachen. Delegieren von Benachrichtigungen und Berechtigungen zur Standortbestimmung an die Android-App statt an die Website
In diesem Artikel erfahren Sie mehr darüber, wie ContactsDirect seine Nutzer mit TWA profitiert und die Conversion-Raten verdreifacht hat.
Fazit
Wie Sie gesehen haben, gibt es viele verschiedene Optionen zum Einbetten von Webinhalten in Ihre App, und alle diese Optionen werden ständig verbessert.