Avviare una PWA in un'app per Android
Le app web progressive (PWA) sono applicazioni web che utilizzano funzionalità simili alle app per creare esperienze di alta qualità, veloci, affidabili e coinvolgenti.
Il web ha una portata incredibile e offre modi efficaci per consentire agli utenti di scoprire nuove esperienze. Tuttavia, gli utenti sono anche abituati a cercare le applicazioni nello store del sistema operativo. In molti casi, questi utenti conoscono già il brand o il servizio che stanno cercando e hanno un elevato livello di intenzionalità che si traduce in metriche di coinvolgimento superiori alla media.
Il Play Store è uno store di app per Android e gli sviluppatori spesso vogliono aprire le loro app web progressive dalle loro app Android.
L'attività web attendibile è uno standard aperto che consente ai browser di fornire un container completamente compatibile con la piattaforma web che esegue il rendering delle PWA all'interno di un'app per Android. La funzionalità è disponibile in Chrome ed è 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.
La limitazione di Android WebView è che non è inteso come sostituzione del browser. Android WebView è uno strumento per sviluppatori per l'utilizzo dell'interfaccia utente web in un'app per Android e non fornisce l'accesso completo alle funzionalità della piattaforma web moderna, come il selettore di contatti o il file system, tra le altre.
Cordova è stato progettato per colmare le carenze di WebView, ma le API sono limitate all'ambiente Cordova. Ciò significa che devi gestire una codebase 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 essere un problema. Quando utilizzano una di queste soluzioni, gli sviluppatori hanno bisogno di ulteriori procedure di garanzia di qualità e sostengono un costo di sviluppo aggiuntivo per rilevare e creare soluzioni alternative.
L'attività web attendibile è un nuovo container per le app web su Android
Gli sviluppatori possono ora utilizzare un'Attività web attendibile come container per includere una PWA come attività di avvio per un'app per Android. La tecnologia sfrutta il browser per eseguire il rendering della PWA a schermo intero, garantendo che l'Attività web attendibile abbia la stessa compatibilità con le funzionalità e le API della piattaforma web del browser sottostante. Esistono anche utilità open source per semplificare ulteriormente l'implementazione di un'app per Android utilizzando un'Attività web attendibile.
Un altro vantaggio non disponibile in altre soluzioni è che il container 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à dei browser
La funzionalità è disponibile in Chrome dalla versione 75, mentre Firefox la implementa nella versione nightly.
Criteri di qualità
Gli sviluppatori web devono 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 corrispondere al comportamento che gli utenti si aspettano dalle applicazioni Android, Chrome 86 ha introdotto una modifica in base alla quale la mancata gestione dei seguenti scenari è considerata un arresto anomalo:
- Impossibilità di verificare i link agli asset digitali all'avvio dell'applicazione.
- Impossibilità di 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, si verifica un arresto anomalo dell'app per Android visibile all'utente. Consulta le indicazioni sulla gestione di questi scenari nel tuo service worker.
L'applicazione deve inoltre soddisfare criteri aggiuntivi specifici per Android, come la conformità alle norme.
Strumenti
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 Android. Insieme, Bubblewrap e PWABuilder forniscono strumenti per sviluppatori sotto forma di libreria, interfaccia a riga di comando (CLI) e interfaccia utente grafica (GUI).
Bubblewrap
Il progetto Bubblewrap genera app Android sotto forma di libreria NodeJS e interfaccia a riga di comando (CLI).
L'avvio di un nuovo progetto si ottiene eseguendo lo strumento e passando l'URL del manifest web:
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
Lo strumento può anche creare il progetto e l'esecuzione del comando riportato di seguito genererà 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. Si integra anche con Bubblewrap per fornire un'interfaccia GUI per inserire queste PWA in un'app per Android. Il team di PWABuilder ha creato un ottimo post del blog su come generare un'app per Android utilizzando lo strumento.
Verificare la proprietà della PWA nell'app per Android
Uno sviluppatore che crea un'ottima app web progressiva non vorrebbe che un altro sviluppatore creasse un'app per Android senza la sua autorizzazione. Per evitare che ciò accada, l'applicazione Android deve essere associata all'app web progressiva utilizzando uno strumento chiamato Digital Asset Links.
Bubblewrap e PWABuilder si occupano della configurazione necessaria sull'app per Android, ma rimane un ultimo passaggio: 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 che ha 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 e poi utilizza lo strumento Asset Link di Peter per
generare il file assetlinks.json corretto per l'app. Rendi disponibile il file assetlinks.json generato
all'indirizzo /.well-known/assetlinks.json nel dominio convalidato.
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 hai appena iniziato a utilizzare le app web progressive, leggi le nostre indicazioni su come creare un'ottima PWA. Per gli sviluppatori che hanno già una PWA, utilizza Lighthouse per verificare se soddisfa i criteri di qualità.
Poi, utilizza Bubblewrap o PWABuilder per generare l'app per Android, carica l'app in un canale di test chiuso sul Play Store e accoppiala alla PWA utilizzando lo strumento Asset Link di Peter.
Infine, sposta l'applicazione dal canale di test chiuso alla produzione.