Ci sono molti motivi per cui gli sviluppatori portano il web su Android: ad esempio, possono riutilizzare un widget web in un'app per Android, incorporare contenuti proprietari o di terze parti e persino portare l'intera app web sulla piattaforma. Qualunque sia il caso d'uso, Android ha molti strumenti per renderlo possibile.
Ecco gli ultimi aggiornamenti apportati a questi strumenti. Ad esempio:
- Miglioramenti della privacy e supporto migliore per schermi di grandi dimensioni, ad esempio il supporto del trascinamento delle immagini in WebView.
- Le schede personalizzate ora supportano le schede personalizzate parziali.
- Funzionalità integrate per PWA, come l'UI di installazione più completa e l'API di fatturazione Play nelle attività web attendibili.
Vediamoli in dettaglio e scopriamo di più.
WebView
WebView è il modo più usato per incorporare contenuti web nelle app per Android, poiché la maggior parte di queste utilizza WebView. È un ottimo modo per integrare perfettamente l'UI web nelle esperienze di app native per Android. Ad esempio, puoi incorporare diverse UI web nella tua app, come annunci, widget o persino browser in-app. Uno dei maggiori punti di forza di WebView è la potente API per il controllo e la modifica dei contenuti web che vengono caricati. Quali sono le novità di WebView?
Intestazione X-Requested-With
Iniziamo con la sezione relativa alla privacy e al ritiro dell'intestazione X-Requested-With. Quando un utente installa ed esegue un'applicazione che utilizza un componente 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 APK dell'applicazione. Ciò significa che ogni richiesta include informazioni specifiche sul contesto in cui l'utente fruisce dei contenuti web e comunica l'identità dell'app al servizio online. Per proteggere la privacy degli utenti, il team di WebView ha avviato una prova relativa al ritiro che rimuove questa intestazione da tutte le richieste WebView.
Ma cosa succede se la tua app si basa sull'intestazione X-Requested-With? Il nostro metodo consigliato consiste nell'utilizzare la nuova API di attivazione, che consente di inviare selettivamente l'intestazione della richiesta a origini specifiche. Questo significa che hai il meglio di entrambi i mondi: puoi continuare a supportare le funzionalità esistenti basate su questa intestazione, garantendo 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
Il prossimo argomento è i 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. Le prove dell'origine ti consentono di accedere a funzionalità nuove o sperimentali in Chrome. Puoi usarli per provare una nuova funzionalità prima che venga resa disponibile per tutti. Finora, le prove dell'origine sono disponibili solo su Chrome per computer e dispositivi mobili, ma a partire da Chrome M110, le prove dell'origine funzionano anche in WebView.
Ora è molto più facile installare WebView beta. Ti consigliamo vivamente di testare il tuo sito web utilizzando il canale beta di WebView per assicurarti che funzioni correttamente nelle versioni future di WebView. Per farlo, partecipa al programma di beta test di WebView sul Google Play Store e il tuo dispositivo verrà registrato automaticamente.
Supporto di dispositivi con schermi grandi
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 un componente WebView in un'altra app.
È molto facile aggiungere la funzionalità di trascinamento ai componenti WebView: devi solo dichiarare un DropDataProvider nel file AndroidManifest.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Per quanto riguarda i dispositivi con schermo grande, Chrome e WebView su Android U supportano completamente la scrittura a mano libera nei campi di immissione del testo HTML e i gesti di immissione per eliminare 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 con Android T, puoi attivare la scrittura a mano libera negli input HTML nella sezione Opzioni sviluppatore.
Motore JavaScript Jetpack
A volte potrebbe essere necessario eseguire JavaScript nell'app senza dover visualizzare contenuti web, ad esempio quando condividi la logica di business tra web e app mobile. Per semplificare le cose, l'anno scorso 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 fantastico del nuovo motore JavaScript è che esegue JavaScript in un processo diverso, rendendolo un modo sicuro e stabile per eseguire JavaScript nella tua app. Inoltre, richiede 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 è ottimo per integrare l'UI 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 delle 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 hanno bisogno di accedere di nuovo ai loro siti web preferiti. Questo perché sono un'istanza del browser predefinito e dei cookie dell'utente che vengono condivisi e offrono tutte le funzionalità e le API della piattaforma web supportate dal browser su cui è basato.
Questo significa anche che se il tuo browser predefinito è Chrome, in Chrome viene aperta una scheda personalizzata; se il browser predefinito è Firefox, in Firefox si aprirà una Scheda personalizzata. La maggior parte dei principali browser su Android supporta le schede personalizzate e, se il browser predefinito non supporta le schede personalizzate, si aprirà l'app del browser.
La cosa fantastica delle schede personalizzate è che puoi personalizzarle per adattarle all'aspetto e al design della tua app, aggiungere interattività personalizzata tramite azioni e usare le tue barre degli strumenti.
Schede personalizzate parziali
Le personalizzazioni delle schede personalizzate hanno subito un importante upgrade con il supporto delle schede personalizzate parziali. Consentono agli utenti di svolgere più attività contemporaneamente tra le app e il web. Finora, utilizzando le schede personalizzate, l'overlay delle schede del browser copriva l'intero schermo. Ora puoi controllare l'altezza dell'overlay della scheda personalizzata. In questo modo, gli utenti possono interagire contemporaneamente con l'app e i contenuti web. Se il browser dell'utente non supporta le schede personalizzate parziali, l'utente vedrà semplicemente la scheda personalizzata a schermo intero supportata.
È sufficiente connettersi al servizio schede personalizzate, 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 con successo le schede personalizzate in linea ridimensionabili negli annunci a risposta diretta. In questo modo, sono stati in grado di 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 con le schede personalizzate affiancate per dispositivi in modalità Orizzontale e con schermi grandi. Se definisci una larghezza massima della scheda, insieme a un punto di interruzione, la scheda personalizzata passerà automaticamente dall'overlay del foglio inferiore all'esperienza affiancata. La funzione è già disponibile nella versione canary e sarà lanciata intorno a luglio 2003. Se vuoi provarlo, controlla il codice sorgente dell'app di esempio Schede personalizzate di Chromium.
Misurazione degli indicatori di coinvolgimento
Il secondo grande aggiornamento delle schede personalizzate riguarda la misurazione del coinvolgimento degli utenti specifico della sessione. Se la tua app mostra regolarmente contenuti agli utenti, inclusi i link, ad esempio in un feed di notizie, non sarebbe bello poter capire quali sono i link che un utente trova importanti e quali no? Queste informazioni possono essere davvero utili per stabilire la priorità dei link da mostrare agli utenti.
Il team di Chrome ha aggiunto la visibilità delle metriche specifiche per la sessione alle schede personalizzate di Chrome. Oltre al tempo per cui un utente rimane su una pagina, ora puoi anche ottenere visibilità 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 libreria di supporto androidx.browser:browser:1.6.0-alpha01 o una versione successiva. Per saperne di più, consulta la guida introduttiva agli indicatori di coinvolgimento.
PWA
Sono inoltre disponibili aggiornamenti nelle PWA, un insieme di tecnologie che consentono di creare esperienze simili a quelle delle app, realizzate e distribuite sul web.
Se utilizzi PWA su Android, la tua app web potrebbe essere installabile: sarà attiva 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; si concentrano sulla compatibilità multipiattaforma, offrendo agli sviluppatori gli strumenti per creare un'app web una sola volta e consentendo agli utenti di installarla su qualsiasi dispositivo scelgano. 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.
Diamo un'occhiata a un paio di funzionalità che rendono la tua app web installabile a proprio agio in Android.
Vogliamo offrire agli utenti la possibilità di installare i siti web a cui tengono di più. Il primo passaggio è stato rimuovere il gestore del recupero del service worker come requisito per l'installazione su Android e Chrome. Inoltre, Chrome ignora l'avvio del service worker se il gestore di recupero è vuoto. Chrome eseguirà esperimenti per estendere l'accesso all'installazione per gli utenti. Tienili d'occhio e inviaci un feedback.
Per gli sviluppatori esistevano il requisito del service worker di creare un'esperienza utente coerente con quelle di altre app per Android. Potrebbe essere utilizzato per creare una pagina in cui comunichi all'utente che non può utilizzare l'app mentre era offline.
Ci siamo resi conto di poter alleggerire il carico di lavoro per gli sviluppatori e assicurarci che queste app offrano una buona esperienza di installazione fin dall'inizio. Ecco perché 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 garantire un'esperienza web ottimale su Android includono l'UI di installazione più completa. Se aggiungi i campi description e screenshots al tuo manifest web, gli utenti potranno usufruire di un'esperienza di installazione più simile a quella mostrata dagli store per descrivere la tua app.
Sono disponibili anche scorciatoie. Se aggiungi un array chiamato shortcuts che descrive un insieme di azioni rapide che gli utenti eseguono spesso nella tua app, potranno accedere a queste azioni premendo a lungo sull'icona dell'app.
Utilizzando 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, SMS e altri file.
Puoi dare un'occhiata alla conferenza I/O "Il web: la tua piattaforma per la crescita" per saperne di più su come le aziende sfruttano queste tecnologie.
Attività web attendibile
Un altro modo per portare il web su Android è utilizzare l'Attività web attendibile.
TWA è il modo migliore per visualizzare contenuti web proprietari a schermo intero nella tua app. È la soluzione ideale per gli sviluppatori che vogliono includere la propria app web come applicazione Android o utilizzare il proprio sito web come parte di un'unica app.
Tieni presente che TWA sembra essere strettamente correlata alla PWA, ma non lo è. Sì, con TWA puoi pubblicare la tua app web installabile su Google Play, ma puoi 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 come la vedrebbe un utente nel browser, ad eccezione del fatto che vengono eseguite a schermo intero e non visualizzano una barra degli URL. Ciò significa che supportano tutte le funzionalità della piattaforma web e le API supportate dal browser su cui è basata.
Un paio di vantaggi di eseguire il wrapping dell'app web tramite TWA sono:
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 così la configurazione di prodotti, vendite, abbonamenti e altro ancora. Delega delle notifiche e delle autorizzazioni di geolocalizzazione all'app per Android anziché al sito web.
Consulta questo articolo per saperne di più su come ContactsDirect ha utilizzato TWA a vantaggio degli utenti e triplicato i tassi di conversione.
Conclusione
Come hai visto, ci sono molte opzioni diverse disponibili per incorporare contenuti web nella tua app e tutte queste opzioni vengono continuamente migliorate.