Ti fidi di me?
Da qualche tempo le applicazioni web potrebbero essere trasformate in app native con poco sforzo, a seconda della complessità dell'app. Ad esempio, framework come Capacitor.js o Cordova offrono tale funzionalità e sono anche software open source. Per offrire un'app Web come nativa, è necessario creare l'applicazione Web localmente, indicare al framework dove si trova questo output di build e sostanzialmente attendere che le app vengano create. Il concetto di base è che il tuo sito web viene eseguito solo in una visualizzazione web incorporata. Bene, le cose stanno per cambiare ancora una volta introducendo "Attività Web attendibile" di Google.
PWA++
Che cos'è "Attività Web attendibile" (TWA)? Ecco il succo:
- Viene utilizzata una "Attività Web attendibile" nel contesto di Google Play Store e un'app Android nativa generata da una PWA
- Puoi verificare la proprietà della tua PWA per l'app Android creando una credenziale chiamata "assetlink": è qui che è necessario Google Play
- caricando questo file "assetlinks" nella directory pubblica della tua app web, Google può verificare la proprietà della PWA quando l'app Android nativa lo ottiene, quindi nessuno tranne te può crearla
Bene, questa era una breve panoramica del concetto alla base di TWA. Per ricapitolare, la parte "fiducia" riguarda la verifica della proprietà della tua PWA.
Una nuova TWA, per favore!
Ok, ma come funziona effettivamente? L'installazione è in realtà molto semplice e non dovrebbe richiedere più di un'ora. Ecco come è fatto:
Innanzitutto, assicurati che la tua PWA sia configurata correttamente:
- manifest.json è disponibile e convalidato
- icona + nome sono corretti
- puoi controllare queste modifiche rapidamente in DevTools
La libreria principale che prenderà tutto il lavoro pesante si chiama "bubblewrap", un pacchetto Node.js che fornisce una CLI, che utilizzerà durante il tutorial.
Innanzitutto, crea una nuova directory per la TWA chiamata "twa". All'interno di "twa" creeremo un'altra directory chiamata "android". "twa" stesso conterrà i node_modules e "android" l'effettiva app Android nativa.
Assicurati di essere ora all'interno di "twa" per iniziare un nuovo progetto npm:
npm init -y
Ora aggiungiamo la CLI come dipendenza di sviluppo:
npm i -D @bubblewrap/cli
Questo è tutto ciò di cui abbiamo bisogno per ora. Iniziamo quindi il progetto "bubblewrap". Sostituisci semplicemente il dominio con il tuo e controlla dove si trova "manifest.json". Ti verranno chiesti i percorsi di Java SDK + Android SDK, che puoi riutilizzare se sono già installati:
npx bubblewrap init --manifest=https://your-pwa.com/manifest.json
Andando avanti, è il momento di passare attraverso alcune domande e risposte con la CLI "bubblewrap". A seconda dei metadati disponibili nella tua PWA, la maggior parte dei campi sarà già precompilata:
npx bubblewrap build
Ora che la tua PWA è stata identificata e l'app per Android è stata creata, è il momento per un rapido test del fumo. Avvia un emulatore o usa il tuo dispositivo reale di prova preferito:
npx bubblewrap install
Se tutto funziona correttamente, vedrai la tua app Web come un'app Android nativa funzionante. Ottimo, la parte più difficile è già stata fatta!
Ciò che resta è la creazione del file di verifica chiamato "assetlinks.json". Poiché presumo che tu voglia caricare l'app bundle su Google Play, è importante notare come viene effettivamente gestita la firma:
- Google Play gestirà le chiavi di firma per te, il che significa che dobbiamo cercare il valore SHA-256 corrispondente in Google Play Console
- "bubblewrap" potrebbe aver creato un file "assetlinks" già con una voce, che contiene un diverso hash SHA-256 - non preoccuparti, useremo entrambe le chiavi di Google Play e quella generata
Se non è stato creato alcun file "assetlinks", il modo in cui ho proceduto è stato scaricare "Asset Links Tool" (consigliato da Google, collegamento nell'appendice) sul mio dispositivo di test e leggere SHA-256 dall'app di test firmata installata creata e installato da “bubblewrap”. Questo json può quindi essere utilizzato da te. Assicurati solo di duplicare la prima voce e sostituire SHA-256 con quello di Google Play, risultando in un file "assetlinks" con 2 voci, che differiscono solo nelle loro chiavi di firma.
Hai quasi finito, ora devi solo creare una nuova directory nella cartella pubblica della tua PWA esistente e caricare l'app una volta:
.well-known/assetlinks.json
Ora Google può leggerlo e verificarne la proprietà.
Ancora un passo...
Ora non resta che caricare il bundle di rilascio su Google Play e rilasciarlo! Sì, in realtà è così semplice. Google spinge davvero ciò che è possibile sul Web e non ha paura di provare cose nuove. "Trusted Web Activity" è un nuovo modo per colmare ulteriormente il divario tra Web e nativo, sebbene attualmente limitato ad Android.
Oh, e sì: ovviamente questa web app è una PWA e una TWA. Puoi controllare l'app Android in Google Play, il link è sotto nell'addendum.
- Tom
