Avviare una PWA in un'app per Android
Le app web progressive (PWA) sono applicazioni web che utilizzano funzionalità simili a quelle delle app per creare esperienze di alta qualità, rapide, affidabili e coinvolgenti.
Il web ha una copertura incredibile e offre agli utenti modi efficaci per scoprire nuove esperienze. Tuttavia, gli utenti sono abituati a cercare applicazioni anche nel proprio store del sistema operativo. In molti casi, questi utenti sono già familiarizzati con il brand o il servizio che cercano e hanno un elevato livello di intenzionalità che si traduce in metriche sul coinvolgimento superiori alla media.
Il Play Store è uno store per app per Android e spesso gli sviluppatori vogliono aprire le proprie app web progressive dalle app per Android.
Attività web attendibile è uno standard aperto che consente ai browser di fornire un contenitore completamente compatibile con la piattaforma web che esegue il rendering delle PWA all'interno di un'app per Android. La funzionalità è disponibile in Chrome e in fase di sviluppo in Firefox Nightly.
Le soluzioni esistenti erano limitate
È sempre stato possibile includere esperienze web in un'app per Android, utilizzando tecnologie come Android WebView o framework come Cordova.
Il limite di Android WebView è che non è pensato come sostituto del browser. Android WebView è uno strumento per sviluppatori che consente di utilizzare l'UI web in un'app per Android e non fornisce accesso completo, tra le altre, alle funzionalità delle moderne piattaforme web, come il selettore contatti o il file system.
Cordova è stato progettato per colmare le carenze di WebView, ma le API sono limitate all'ambiente Cordova. Ciò significa che devi gestire una base di codice aggiuntiva per l'utilizzo delle API Cordova per la tua app per Android, separata dalla tua PWA sul web aperto.
Inoltre, la rilevabilità delle funzionalità spesso non funziona sempre come previsto e anche i problemi di compatibilità tra le versioni di Android e gli OEM possono rappresentare un problema. Quando si utilizza una di queste soluzioni, gli sviluppatori devono seguire procedure di controllo qualità aggiuntive e sostenere un costo di sviluppo aggiuntivo per rilevare e creare soluzioni alternative.
Attività web attendibile è un nuovo contenitore per le app web su Android
Ora gli sviluppatori possono utilizzare un'Attività web attendibile come contenitore per includere una PWA come attività di lancio per un'app per Android. La tecnologia sfrutta il browser per eseguire il rendering della PWA a schermo intero, assicurando che l'Attività web attendibile abbia la stessa compatibilità con le API e le funzionalità della piattaforma web del browser sottostante. Esistono anche utilità open source per semplificare ulteriormente l'implementazione di un'app per Android che utilizza un'Attività web attendibile.
Un altro vantaggio non disponibile in altre soluzioni è che il contenitore condivide lo spazio di archiviazione con il browser. Gli stati di accesso e le preferenze degli utenti vengono condivisi senza problemi tra le esperienze.
Compatibilità del browser
La funzionalità è disponibile in Chrome dalla versione 75 e Firefox la implementa nella versione notturna.
Criteri di qualità
Gli sviluppatori web dovrebbero utilizzare un'Attività web attendibile quando vogliono includere contenuti web in un'app per Android.
I contenuti web in un'attività web attendibile devono soddisfare i criteri di installabilità della PWA.
Inoltre, per garantire il comportamento che gli utenti si aspettano dalle app per Android, Chrome 86 ha introdotto una modifica in base alla quale la mancata gestione dei seguenti scenari è considerata un errore di arresto anomalo:
- Mancata verifica dei link degli asset digitali al momento del lancio dell'applicazione.
- Impossibile restituire HTTP 200 per una richiesta di risorse di rete offline.
- Una richiesta di navigazione che restituisce un errore HTTP 404 o 5xx".
Quando si verifica uno di questi scenari nell'Attività web attendibile, viene causato un arresto anomalo visibile dell'app per Android da parte dell'utente. Consulta le linee guida per la gestione di questi scenari nel servizio worker.
L'applicazione deve inoltre soddisfare criteri aggiuntivi specifici per Android, come la conformità alle norme.
Utensili
Gli sviluppatori web che vogliono sfruttare l'Attività web attendibile non devono imparare nuove tecnologie o API per trasformare la loro PWA in un'applicazione per Android. Insieme, Bubblewrap e PWABuilder forniscono strumenti per gli sviluppatori sotto forma di libreria, interfaccia a riga di comando (CLI) e interfaccia utente grafica (GUI).
Pluriball
Il progetto Bubblewrap genera app per Android sotto forma di libreria NodeJS e interfaccia a riga di comando (CLI).
Per eseguire il bootstrap di un nuovo progetto, esegui lo strumento e passa l'URL del manifest web:
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
Lo strumento può anche compilare il progetto ed eseguire il comando riportato di seguito per generare un'applicazione Android pronta per essere caricata sul Play Store:
npx @bubblewrap/cli build
Dopo aver eseguito questo comando, nella directory principale del progetto sarà disponibile un file denominato app-release-signed.apk. Questo è il file che verrà caricato sul Play Store.
PWABuilder
PWABuilder aiuta gli sviluppatori a trasformare i siti web esistenti in app web progressive. Inoltre, si integra con Bubblewrap per fornire un'interfaccia utente grafica per incapsulare le PWA in un'app per Android. Il team di PWABuilder ha pubblicato un ottimo post del blog su come generare un'applicazione per Android utilizzando lo strumento.
Verifica della proprietà della PWA nell'app per Android
Uno sviluppatore che crea un'app web progressiva di alta qualità non vorrebbe che un altro sviluppatore ne creasse un'altra per Android senza la sua autorizzazione. Per evitare che ciò accada, l'applicazione Android deve essere accoppiata all'app web progressiva utilizzando uno strumento chiamato Digital Asset Links.
Bubblewrap e PWABuilder si occupano della configurazione necessaria nell'applicazione per Android, ma
rimane un ultimo passaggio, ovvero l'aggiunta del file assetlinks.json alla PWA.
Per generare questo file, gli sviluppatori hanno bisogno della firma SHA-256 della chiave utilizzata per firmare l'APK scaricato dagli utenti.
La chiave può essere generata in diversi modi e il modo più semplice per trovare la chiave con cui è stato firmato l'APK fornito agli utenti finali è scaricarlo dal Play Store stesso.
Per evitare di mostrare agli utenti un'applicazione non funzionante, esegui il deployment dell'applicazione in un
canale di test chiuso, installala in un dispositivo di test, quindi utilizza lo strumento di collegamento delle risorse di Peter per
generare il file assetlinks.json corretto per l'app. Rendi disponibile il file assetlinks.json generato
in /.well-known/assetlinks.json, nel dominio in fase di convalida.
Passaggi successivi
Un'app web progressiva è un'esperienza web di alta qualità. L'Attività web attendibile è un nuovo modo per aprire queste esperienze di alta qualità da un'app per Android quando soddisfano i criteri di qualità minimi.
Se stai iniziando a utilizzare le app web progressive, leggi le nostre indicazioni su come creare un'ottima PWA. Gli sviluppatori che hanno già una PWA possono utilizzare Lighthouse per verificare se soddisfa i criteri di qualità.
Quindi, utilizza Bubblewrap o PWABuilder per generare l'applicazione per Android, caricala su un canale di test chiuso sul Play Store e accoppiala con la PWA utilizzando lo strumento di collegamento delle risorse di Peter.
Infine, sposta l'applicazione dal canale di test chiuso alla produzione.