Er zijn veel redenen voor ontwikkelaars om het web naar Android te brengen : misschien hergebruiken van een webwidget in een Android-app, het opnemen van inhoud van eerste of derde partijen, en zelfs het brengen van hun volledige web-app naar het platform. Wat de gebruikssituatie ook is, Android heeft veel tools om het mogelijk te maken.
Hier vindt u de nieuwste updates voor deze tools. Bijvoorbeeld:
- Privacyverbeteringen en betere ondersteuning voor grote schermen, zoals ondersteuning voor het slepen en neerzetten van afbeeldingen in WebView .
- Aangepaste tabbladen ondersteunen nu gedeeltelijke aangepaste tabbladen.
- Geïntegreerde functies voor PWA , zoals Richer Install UI en Play Billing API in Trusted Web Activity .
Laten we erin duiken en meer leren.
Webweergave
WebView is de meest gebruikte manier om webinhoud in Android-apps in te sluiten, aangezien de overgrote meerderheid van Android-apps WebView gebruikt. Het is een geweldige manier om de webinterface naadloos te integreren in native Android-app-ervaringen. U kunt bijvoorbeeld verschillende webgebruikersinterfaces in uw app insluiten, zoals advertenties, widgets of zelfs in-app-browsers. Een van de sterkste punten van WebView is de krachtige API voor het controleren en wijzigen van de webinhoud die wordt geladen. Wat is er nieuw in WebView?
X-Aangevraagd-Met header
Laten we beginnen met privacy en de beëindiging van de X-Requested-With-header . Wanneer een gebruiker een applicatie installeert en uitvoert die een WebView gebruikt om webinhoud in te sluiten, voegt de WebView de X-Requested-With-header toe aan elk verzoek dat naar servers wordt verzonden. De waarde van deze header is de APK-naam van de applicatie. Dit betekent dat elk verzoek specifieke informatie bevat over de context waarin de gebruiker webinhoud gebruikt, en dat de identiteit van de app naar de online dienst lekt. Om de privacy van gebruikers te beschermen, is het WebView-team een beëindigingsproef gestart waarbij deze header uit alle WebView-verzoeken wordt verwijderd.
Maar wat als uw app afhankelijk is van de X-Requested-With-header? Onze aanbevolen methode is om de nieuwe opt-in-API te gebruiken waarmee u de verzoekheader selectief naar specifieke oorsprongen kunt verzenden. Dit betekent dat u het beste van twee werelden krijgt: u kunt bestaande functies die bovenop deze header zijn gebouwd blijven ondersteunen, terwijl u ervoor zorgt dat de privacy van de gebruiker in alle andere gevallen behouden blijft. Als u het bestaande gedrag wilt behouden, kunt u zich ook aanmelden voor de X-Requested-With Deprecation origin-proefperiode.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
WebView-testen
Het volgende onderwerp is testen. Als u een webontwikkelaar bent en uw websites veel verkeer ontvangen van WebViews, zijn er twee updates voor u:
WebView ondersteunt nu proefversies van Chrome Origin . Origin-proefversies geven u toegang tot nieuwe of experimentele functies in Chrome. Hiermee kunt u een nieuwe functie uitproberen voordat deze voor iedereen beschikbaar wordt gesteld. Tot nu toe waren origin-proefversies alleen beschikbaar in desktop- en mobiel Chrome, maar vanaf Chrome M110 werken origin-proefversies ook in WebView.
Het is nu veel eenvoudiger om WebView Beta te installeren. We raden u ten zeerste aan uw website te testen met behulp van het WebView Bètakanaal om er zeker van te zijn dat uw website goed werkt in de komende WebView-versies. Om dit te doen, neemt u deel aan het WebView Beta-testprogramma in de Google Play Store en wordt uw apparaat automatisch ingeschreven.
Ondersteuning voor groot schermapparaat
Ons doel is om WebView goed te laten werken op apparaten met een groot scherm. Een stap in deze richting is dat WebView nu het slepen en neerzetten van afbeeldingen ondersteunt. In de modus voor gesplitste schermweergave kunt u bijvoorbeeld een afbeelding van een WebView naar een andere app slepen.
Het is heel eenvoudig om slepen en neerzetten toe te voegen aan uw WebViews: u hoeft alleen maar een DropDataProvider aan te geven in uw AndroidManifest.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Over apparaten met een groot scherm gesproken: Chrome en WebView op Android U zullen volledige ondersteuning bieden voor handschrift in HTML-tekstinvoervelden, en met invoergebaren voor het verwijderen van tekst of het toevoegen van spaties. Handschriftondersteuning is al beschikbaar voor alle Samsung-toestellen met One UI 5.1, zoals de S23 Ultra. Voor andere apparaten die Android T gebruiken, kunt u handschrift in HTML-invoer inschakelen onder Opties voor ontwikkelaars.
Jetpack JavaScript-engine
Soms moet u JavaScript in uw app uitvoeren zonder dat u webinhoud hoeft weer te geven; bijvoorbeeld bij het delen van bedrijfslogica via internet en mobiele apps. Om dit gemakkelijker te maken, hebben we vorig jaar de alfaversie van de nieuwe JetPack JavaScript-engine gelanceerd. Deze bibliotheek maakt gebruik van de V8, de JavaScript-engine van Chrome, en laat uw applicatie JavaScript- of WebAssembly-code evalueren zonder een WebView-instantie te maken. Het mooie van de nieuwe JavaScript-engine is dat deze uw JavaScript in een ander proces uitvoert, waardoor het een veilige en stabiele manier is om JavaScript in uw app uit te voeren. Het vereist ook minder bronnen dan een WebView-instantie.
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);
…
Aangepaste tabbladen
WebView is geweldig voor het integreren van de Web UI in uw app. Maar hoe zit het met het toestaan dat gebruikers door webinhoud in uw app bladeren?
Dit is een geweldig gebruiksscenario voor aangepaste tabbladen. Ze zijn een veilige en gebruiksvriendelijke manier om gebruikers webinhoud in uw app te laten bekijken. Het grote voordeel is dat gebruikers niet opnieuw hoeven in te loggen op hun favoriete websites. Dit komt omdat ze een exemplaar zijn van de standaardbrowser van de gebruiker en de cookies die worden gedeeld, en ze alle webplatformfuncties en API's bieden die worden ondersteund door de browser die deze ondersteunt.
Dit betekent ook dat als uw standaardbrowser Chrome is, er een aangepast tabblad wordt geopend in Chrome; als uw standaardbrowser Firefox is, wordt een aangepast tabblad geopend in Firefox. De meeste grote browsers op Android ondersteunen aangepaste tabbladen, en als de standaardbrowser geen aangepaste tabbladen ondersteunt, wordt in plaats daarvan de browser-app geopend.
Het mooie van aangepaste tabbladen is dat u ze kunt stylen zodat ze bij het uiterlijk van uw app passen, aangepaste interactiviteit kunt toevoegen via acties en uw eigen werkbalken.
Gedeeltelijke aangepaste tabbladen
Aangepaste tabbladaanpassingen hebben een grote upgrade gekregen met ondersteuning voor gedeeltelijke aangepaste tabbladen . Ze laten gebruikers multitasken tussen apps en internet. Tot nu toe bedekte de overlay van het browsertabblad bij gebruik van aangepaste tabbladen het hele scherm. Nu kunt u de hoogte van de aangepaste tabbladoverlay bepalen. Op deze manier kunnen gebruikers tegelijkertijd met uw app en webinhoud communiceren. Als de browser van uw gebruiker geen gedeeltelijke aangepaste tabbladen ondersteunt, ziet de gebruiker eenvoudigweg het ondersteunde aangepaste tabblad op volledig scherm.
Het enige dat u hoeft te doen, is verbinding maken met de Custom Tabs Service, de sessie doorgeven aan CustomTabsBuilder en setActivityHeight aanroepen.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
YouTube heeft met succes aanpasbare inline aangepaste tabbladen gelanceerd voor direct response-advertenties. Op deze manier hebben ze een nieuwe manier van interactie met advertenties en webinhoud kunnen implementeren zonder de organische ervaring in de app te onderbreken.
Maar hoe zit het met tablets en andere apparaten met een groot scherm? Het Chrome-team werkt momenteel aan een nieuwe side-by-side aangepaste tabbladen-ervaring voor liggende apparaten en apparaten met een groot scherm. Door een maximale tabbreedte te definiëren, samen met een breekpunt, schakelt de aangepaste tabbladervaring automatisch tussen de onderste bladoverlay en de zij-aan-zij-ervaring. De functie is al beschikbaar in Canary en wordt rond juli 2003 gelanceerd. Als je het wilt uitproberen, bekijk dan de broncode van de voorbeeldapp Chromium Custom Tabs.
Het meten van betrokkenheidssignalen
De tweede grote update voor aangepaste tabbladen is het meten van sessiespecifieke gebruikersbetrokkenheid. Als uw app regelmatig inhoud aan uw gebruikers toont, inclusief links, bijvoorbeeld in een nieuwsfeed, zou het dan niet geweldig zijn als u kon zien welke links een gebruiker waardevol vindt en welke niet? Deze informatie kan erg nuttig zijn als het gaat om het prioriteren van welke links u aan uw gebruikers wilt laten zien.
Het Chrome-team heeft sessiespecifieke metrische zichtbaarheid toegevoegd aan aangepaste Chrome-tabbladen. Naast hoe lang een gebruiker op een pagina blijft, kunt u nu ook inzicht krijgen in de scrollafstand, de scrollrichting en de algehele betrokkenheid bij webinhoud.
Betrokkenheidssignalen zijn beschikbaar vanaf Chrome 114 en vereisen de ondersteuningsbibliotheek androidx.browser:browser:1.6.0-alpha01 of hoger. Voor meer informatie kunt u de handleiding voor betrokkenheidssignalen raadplegen.
PWA
Er zijn ook updates in PWA: een reeks technologieën die het mogelijk maken om app-achtige ervaringen te creëren, gebouwd en geïmplementeerd op internet.
Als u PWA op Android gebruikt, kan uw webapp installeerbaar zijn: hij zal naast de andere platform-apps staan, op het startscherm, het opstartprogramma, de instellingen en andere oppervlakken.
PWA-functies zijn gebouwd op basis van webstandaarden; ze richten zich op platformonafhankelijke compatibiliteit, waardoor ontwikkelaars de tools krijgen om één keer een webapp te bouwen en gebruikers deze op elk apparaat van hun keuze kunnen installeren. Het bouwen van een installeerbare webapp betekent niet dat je geen native Android-app kunt of mag hebben, maar het is een andere optie om internet naar Android te brengen.
Laten we een paar functies bekijken waardoor uw installeerbare webapp zich thuis voelt in Android.
We wilden gebruikers in staat stellen de websites te installeren die zij het belangrijkst vinden. De eerste stap was het verwijderen van de ophaalhandler voor servicemedewerkers als vereiste voor installatie op Android en Chrome. Bovendien slaat Chrome het starten van de servicemedewerker over als de ophaalhandler leeg is . Chrome gaat experimenten uitvoeren om de toegang tot de installatie voor gebruikers uit te breiden. Houd deze in de gaten en geef feedback.
Ontwikkelaars moesten een gebruikerservaring creëren die consistent was met die van andere Android-apps. Het kan worden gebruikt om een pagina te maken waarop de gebruiker wordt geïnformeerd dat hij de app niet offline kan gebruiken.
We realiseerden ons dat we de werklast voor ontwikkelaars konden verlichten en ervoor konden zorgen dat deze apps vanaf het begin een goede geïnstalleerde ervaring bieden. Daarom heeft Chrome een standaard offline-ervaring toegevoegd die gebruikers een scherm laat zien met het app-pictogram, zodat ze weten dat ze offline zijn, zonder dat daarvoor extra werk van ontwikkelaars nodig is.
Uiteraard is de Service Worker API nog steeds beschikbaar om aangepaste offline ervaringen te bouwen en andere functies, zoals caching, te implementeren om de prestaties te verbeteren.
Enkele andere functies die Android een gepolijste webapp-ervaring kunnen bieden, zijn onder meer de Richer Install UI . Door de description en screenshots aan uw webmanifest toe te voegen, krijgen uw gebruikers een installatie-ervaring die dichter in de buurt komt van wat app-winkels laten zien om uw app te beschrijven.
We hebben ook snelkoppelingen . Door een array met de naam shortcuts toe te voegen, waarin een reeks snelle acties wordt beschreven die uw gebruikers vaak in uw app uitvoeren, hebben ze toegang tot deze acties door lang op het pictogram van de app te drukken.
Met behulp van Web Share- en Web Share Target- API's kan uw app communiceren met andere apps, net als elke andere platform-app. Uw app wordt een optie in de deelbladen en kan foto's, teksten en andere bestanden delen en ontvangen.
U kunt de I/O-lezing “Het web: uw platform voor groei” bekijken voor meer informatie over hoe bedrijven deze technologieën benutten.
Vertrouwde webactiviteit
Een andere manier om internet naar Android te brengen is het gebruik van Trusted Web Activity (TWA) .
TWA is de beste manier om first-party webinhoud op volledig scherm in uw app weer te geven. Het is de ideale oplossing voor ontwikkelaars die hun webapp willen verpakken als een Android-applicatie, of hun website als onderdeel daarvan willen gebruiken.
Merk op dat TWA klinkt alsof het strikt gerelateerd is aan PWA, maar dat is het niet. Ja, door TWA te gebruiken kunt u uw installeerbare web-app publiceren op Google Play, maar u kunt ook één activiteit op internet bouwen en deze opnemen in uw Android-app.
Een vertrouwde webactiviteit wordt door de browser van de gebruiker op precies dezelfde manier weergegeven als een gebruiker deze in zijn browser zou zien, behalve dat deze op volledig scherm wordt uitgevoerd en geen URL-balk weergeeft. Dit betekent dat ze alle webplatformfuncties en API's ondersteunen die worden ondersteund door de browser die deze ondersteunt.
Een aantal voordelen van het inpakken van uw web-app met TWA zijn:
Publiceren op Google Play , waarmee uw app toegang krijgt tot de zichtbaarheid en distributie van Google Play. Toegang hebben tot de Play Billing API , waarmee ontwikkelaars de verkoop van digitale goederen in hun apps kunnen beheren, waardoor het eenvoudiger wordt om producten, verkopen, abonnementen en meer in te stellen. Meldingen en geolocatierechten delegeren aan de Android-app in plaats van aan de website.
Lees dit artikel voor meer informatie over hoe ContactsDirect TWA heeft gebruikt om hun gebruikers te helpen en hun conversiepercentages te verdrievoudigen.
Conclusie
Zoals u heeft gezien, zijn er veel verschillende opties beschikbaar voor het insluiten van webinhoud in uw app en al deze opties worden voortdurend verbeterd.