Sono molte le ragioni per cui gli sviluppatori possono portare il web su Android: magari riutilizzare un widget web in un'app per Android, incorporando contenuti proprietari o di terze parti e persino portando sulla piattaforma la loro intera app web. Qualunque sia il caso d'uso, Android offre molti strumenti per renderlo possibile.
Ecco gli ultimi aggiornamenti di questi strumenti. Ad esempio:
- Miglioramenti alla privacy e supporto migliore per gli schermi di grandi dimensioni, ad esempio il supporto del trascinamento delle immagini in WebView.
- Schede personalizzate ora supporta le schede personalizzate parziali.
- Funzionalità integrate per le PWA, come l'interfaccia utente di installazione più completa e l'API Billing di Google Play nelle Attività web attendibili.
Scopri di più.
WebView
WebView è il modo più comune per incorporare contenuti web nelle app per Android, poiché la stragrande maggioranza di queste app utilizza WebView. È un ottimo modo per integrare perfettamente l'interfaccia utente web nelle esperienze con app Android native. Ad esempio, puoi incorporare nella tua app UI web diverse, come annunci, widget o persino browser in-app. Uno dei maggiori punti di forza di WebView è la sua potente API per controllare e modificare i contenuti web in fase di caricamento. Quali sono quindi le novità di WebView?
Intestazione X-Requested-With
Iniziamo con la privacy e il ritiro dell'intestazione X-Requested-With. Quando un utente installa ed esegue un'applicazione che utilizza WebView per incorporare contenuti web, WebView aggiunge l'intestazione X-Requested-With a ogni richiesta inviata ai server. Il valore di questa intestazione è il nome dell'APK dell'applicazione. Ciò significa che ogni richiesta include informazioni specifiche sul contesto in cui l'utente utilizza i contenuti web e rivela l'identità dell'app al servizio online. Per proteggere la privacy degli utenti, il team di WebView ha avviato una prova di ritiro che rimuove questo header da tutte le richieste WebView.
Ma cosa succede se la tua app si basa sull'intestazione X-Requested-With? Il metodo consigliato è utilizzare la nuova API di attivazione che ti consente di inviare in modo selettivo l'intestazione della richiesta a origini specifiche. Ciò significa che puoi avere il meglio di entrambi i mondi: puoi continuare a supportare le funzionalità esistenti basate su questo header, assicurandoti al contempo che la privacy dell'utente venga preservata in tutti gli altri casi. Se vuoi mantenere il comportamento esistente, puoi anche registrarti per la prova dell'origine X-Requested-With Deprecation.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Test di WebView
L'argomento successivo è il test. Se sei uno sviluppatore web e i tuoi siti web ricevono molto traffico da WebView, hai a disposizione due aggiornamenti:
WebView ora supporta le prove dell'origine di Chrome. Origin trials consente di accedere a funzionalità nuove o sperimentali in Chrome. Puoi utilizzarli per provare una nuova funzionalità prima che venga resa disponibile a tutti. Fino a questo momento, le prove delle origini erano disponibili solo su Chrome per computer e dispositivi mobili, ma a partire da Chrome M110 funzionano anche in WebView.
Ora è molto più facile installare WebView beta. Ti consigliamo vivamente di testare il tuo sito web utilizzando il canale WebView beta per assicurarti che funzioni bene nelle prossime versioni di WebView. Per farlo, partecipa al programma di beta test di WebView sul Google Play Store e il tuo dispositivo verrà registrato automaticamente.
Supporto dei dispositivi con schermo grande
Il nostro obiettivo è far funzionare WebView sui dispositivi con schermi grandi. Un passo in questa direzione è che WebView ora supporta il trascinamento delle immagini. Ad esempio, in modalità di visualizzazione a schermo diviso, puoi trascinare un'immagine da una WebView in un'altra app.
È molto facile aggiungere il trascinamento alle WebView: devi solo dichiarare un DropDataProvider in AndroidManifest.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Parlando di dispositivi con schermi di grandi dimensioni, Chrome e WebView su Android U offriranno il supporto completo della scrittura a mano nei campi di immissione di testo HTML e i gesti di immissione per eliminare il testo o aggiungere spazi. Il supporto della scrittura a mano libera è già disponibile per tutti i dispositivi Samsung con One UI 5.1, come S23 Ultra. Per altri dispositivi che utilizzano Android T, puoi attivare la scrittura a mano libera negli input HTML in Opzioni sviluppatore.
Motore JavaScript di Jetpack
A volte potresti dover eseguire JavaScript nella tua app senza dover visualizzare contenuti web, ad esempio quando condividi la logica di business tra app web e mobile. Per semplificare questa operazione, lo scorso anno abbiamo lanciato la release alpha del nuovo motore JavaScript JetPack. Questa libreria utilizza V8, il motore JavaScript di Chrome, e consente all'applicazione di valutare il codice JavaScript o WebAssembly senza creare un'istanza WebView. L'aspetto migliore del nuovo motore JavaScript è che esegue JavaScript in un processo diverso, rendendolo un modo sicuro e stabile per eseguire JavaScript nella tua app. Richiede inoltre meno risorse rispetto a un'istanza WebView.
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);
…
Schede personalizzate
WebView è ideale per integrare l'interfaccia utente web nella tua app. Ma che ne dici di consentire agli utenti di sfogliare i contenuti web nella tua app?
Questo è un ottimo caso d'uso per le schede personalizzate. Sono un modo sicuro e facile da usare per consentire agli utenti di visualizzare i contenuti web nella tua app. Il loro grande vantaggio è che gli utenti non devono eseguire nuovamente l'accesso ai loro siti web preferiti. Questo perché sono un'istanza del browser predefinito dell'utente e dei cookie condivisi e offrono tutte le API e le funzionalità della piattaforma web supportate dal browser che li gestisce.
Ciò significa anche che se il tuo browser predefinito è Chrome, viene aperta una scheda personalizzata in Chrome; se il tuo browser predefinito è Firefox, viene aperta una scheda personalizzata in Firefox. La maggior parte dei principali browser su Android supporta Custom Tabs e, se il browser predefinito non supporta questa funzionalità, verrà aperta l'app del browser.
La grandezza delle schede personalizzate è che puoi personalizzarle in base all'aspetto della tua app, aggiungere interattività personalizzata tramite azioni e barre degli strumenti personalizzate.
Schede personalizzate parziali
Le personalizzazioni delle schede personalizzate hanno subito un upgrade importante con il supporto delle schede personalizzate parziali. Consentono agli utenti di eseguire il multitasking tra app e web. Fino a ora, quando utilizzavi Custom Tabs, la sovrapposizione della scheda del browser copriva l'intero schermo. Ora puoi controllare l'altezza dell'overlay della scheda personalizzata. In questo modo, gli utenti possono interagire con la tua app e i tuoi contenuti web contemporaneamente. Se il browser dell'utente non supporta le schede personalizzate parziali, l'utente vedrà semplicemente la scheda personalizzata a schermo intero supportata.
Devi solo connetterti al servizio Custom Tabs, passare la sessione a CustomTabsBuilder e chiamare setActivityHeight.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
YouTube ha lanciato correttamente le schede personalizzate in linea ridimensionabili negli annunci di risposta diretta. In questo modo, ha potuto implementare un nuovo modo di interagire con gli annunci e i contenuti web senza interrompere l'esperienza organica nell'app.
E per quanto riguarda i tablet e altri dispositivi con schermi di grandi dimensioni? Il team di Chrome sta attualmente lavorando a una nuova esperienza di schede personalizzate affiancate per la modalità Orizzontale e i dispositivi con schermi di grandi dimensioni. Se definisci una larghezza massima della scheda, insieme a un punto di interruzione, l'esperienza Scheda personalizzata passerà automaticamente dall'overlay del riquadro inferiore all'esperienza affiancata. La funzionalità è già disponibile in Canary e verrà lanciata intorno a luglio 2023. Se vuoi provarlo, dai un'occhiata al codice sorgente dell'app di esempio di schede personalizzate di Chromium.
Misurare gli indicatori di coinvolgimento
Il secondo grande aggiornamento di Custom Tabs è la misurazione del coinvolgimento degli utenti specifico per sessione. Se la tua app mostrasse regolarmente contenuti agli utenti, inclusi link, ad esempio in un feed di notizie, non sarebbe fantastico se potessi capire quali link trovano utili e quali no? Queste informazioni possono essere molto utili per stabilire la priorità dei link da mostrare agli utenti.
Il team di Chrome ha aggiunto la visibilità delle metriche specifiche per sessione alle schede personalizzate di Chrome. Oltre a sapere per quanto tempo un utente rimane su una pagina, ora puoi anche ottenere informazioni sulla distanza di scorrimento, sulla direzione di scorrimento e sul coinvolgimento complessivo con i contenuti web.
Gli indicatori di coinvolgimento sono disponibili a partire da Chrome 114 e richiedono la androidx.browser:browser:1.6.0-alpha01 libreria di supporto o versioni successive. Per saperne di più, consulta la guida introduttiva agli indicatori di coinvolgimento.
PWA
Ci sono anche aggiornamenti nelle PWA, un insieme di tecnologie che consentono di creare esperienze simili a quelle di un'app, create e implementate sul web.
Se utilizzi PWA su Android, la tua app web potrebbe essere installabile: sarà pubblicata insieme alle altre app della piattaforma, nella schermata Home, in Avvio app, nelle impostazioni e in altre piattaforme.
Le funzionalità delle PWA sono basate su standard web e si concentrano sulla compatibilità multipiattaforma, offrendo agli sviluppatori gli strumenti per creare un'app web una volta sola e consentendo agli utenti di installarla su qualsiasi dispositivo. Creare un'app web installabile non significa che non puoi o non dovresti avere un'app Android nativa, ma è un'altra opzione per portare il web su Android.
Vediamo un paio di funzionalità che rendono la tua app web installabile a suo agio su Android.
Vogliamo offrire agli utenti la possibilità di installare i siti web a cui sono più interessati. Il primo passaggio è stato rimuovere il gestore di recupero del servizio worker come requisito per l'installazione su Android e Chrome. Inoltre, Chrome ignorerà l'avvio del service worker se il gestore del recupero è vuoto. Chrome eseguirà esperimenti per espandere l'accesso all'installazione per gli utenti. Tieni d'occhio queste novità e fornisci un feedback.
Il requisito del service worker richiedeva agli sviluppatori di creare un'esperienza utente coerente con quella di altre app per Android. Potrebbe essere utilizzata per creare una pagina che informa l'utente che non può utilizzare l'app offline.
Ci siamo resi conto che potevamo semplificare il carico di lavoro per gli sviluppatori e garantire che queste app offrissero un'esperienza di installazione positiva fin dall'inizio. Per questo motivo, Chrome ha aggiunto un'esperienza offline predefinita che mostra agli utenti una schermata con l'icona dell'app per informarli che sono offline, senza richiedere ulteriori interventi da parte degli sviluppatori.
Ovviamente, l'API service worker è ancora disponibile per creare esperienze offline personalizzate e implementare altre funzionalità come la memorizzazione nella cache per migliorare le prestazioni.
Alcune altre funzionalità che possono offrire un'esperienza affinata con le app web su Android includono la UI di installazione più completa. Aggiungendo i campi description e screenshots al file manifest web, gli utenti avranno un'esperienza di installazione più simile a quella mostrata dagli store per descrivere la tua app.
Sono disponibili anche delle scorciatoie. Aggiungendo un array denominato shortcuts che descrive un insieme di azioni rapide che gli utenti eseguono di frequente nella tua app, questi potranno accedere a queste azioni facendo una pressione prolungata sull'icona dell'app.
Con le API Web Share e Web Share Target, la tua app può interagire con altre app, come qualsiasi altra app della piattaforma. La tua app sarà un'opzione nei fogli di condivisione e potrà condividere e ricevere foto, messaggi e altri file.
Per saperne di più su come le aziende stanno sfruttando queste tecnologie, puoi dare un'occhiata all'evento I/O "The Web: Your platform for growth" (Il web: la tua piattaforma per la crescita).
Attività web attendibile
Un altro modo per portare il web su Android è utilizzare l'Attività web attendibile (TWA).
TWA è il modo migliore per visualizzare contenuti web proprietari a schermo intero nella tua app. È la soluzione ideale per gli sviluppatori che vogliono eseguire il wrapping della propria app web come applicazione per Android o utilizzare il proprio sito web all'interno di un'app.
Tieni presente che l'approccio TWA sembra essere strettamente correlato alle PWA, ma non lo è. Sì, con TWA puoi pubblicare la tua app web installabile su Google Play, ma potresti anche creare una singola attività sul web e includerla nella tua app per Android.
Un'attività web attendibile viene visualizzata dal browser dell'utente esattamente nello stesso modo in cui un utente la vedrebbe nel proprio browser, tranne per il fatto che viene eseguita a schermo intero e non mostra una barra degli URL. Ciò significa che supportano tutte le API e le funzionalità della piattaforma web supportate dal browser che le esegue.
Ecco alcuni vantaggi dell'utilizzo di TWA per il wrapping dell'app web:
Pubblicazione su Google Play, che consente alla tua app di accedere alla visibilità e alla distribuzione di Google Play. Avere accesso all'API Play Billing, che consente agli sviluppatori di gestire le vendite di prodotti digitali nelle loro app, semplificando la configurazione di prodotti, vendite, abbonamenti e altro ancora. Delegare le notifiche e le autorizzazioni di geolocalizzazione all'app per Android anziché al sito web.
Leggi questo articolo per scoprire di più su come ContactsDirect ha utilizzato TWA a vantaggio dei propri utenti e ha triplicato i tassi di conversione.
Conclusione
Come hai visto, esistono molte opzioni diverse per incorporare contenuti web nella tua app e tutte queste opzioni vengono continuamente migliorate.