La configurazione delle attività web attendibili può essere difficile, soprattutto se vuoi solo visualizzare il tuo sito web. Questa guida ti insegna a creare un piccolo progetto che utilizza le attività web attendibili.
Al termine di questa guida:
- Avrai utilizzato Bubblewrap per creare un'applicazione che utilizza un'attività web attendibile e supera la verifica.
- Capirai quando vengono utilizzate le chiavi di firma.
- Sarai in grado di determinare la firma con cui viene creata la tua applicazione Android.
- Saprai come creare un file Digital Asset Links di base.
Per seguire questa guida, devi avere:
- Node.js 10 o versioni successive.
- Uno smartphone o un emulatore Android, collegato e configurato per lo sviluppo. Attiva il debug USB se utilizzi uno smartphone fisico.
- Un browser mobile che supporti le attività web attendibili.
- Un sito web che vuoi visualizzare nell'attività web attendibile.
Puoi utilizzare un'attività web attendibile per la tua app Android per avviare una scheda del browser a schermo intero, senza l'interfaccia utente del browser. Questa funzionalità è limitata ai siti web di tua proprietà. Per dimostrare la proprietà, devi configurare Digital Asset Links.
Quando avvii un'attività web attendibile, il browser verifica Digital Asset Links. Se la verifica non va a buon fine, il browser torna a visualizzare il tuo sito web come scheda personalizzata.
Installare e configurare Bubblewrap
Bubblewrap è un insieme di librerie e uno strumento a riga di comando (CLI) per Node.js che aiuta gli sviluppatori a generare, creare ed eseguire app web progressive all'interno di applicazioni Android, utilizzando le attività web attendibili.
Installa la CLI eseguendo questo comando:
npm i -g @bubblewrap/cli
Configurare l'ambiente
Quando esegui Bubblewrap per la prima volta, ti viene chiesto di scaricare e installare automaticamente le dipendenze esterne richieste. Ti consigliamo di consentire i download automatici, in quanto contribuiscono a garantire che le dipendenze siano configurate correttamente. Consulta la documentazione di Bubblewrap per utilizzare un Java Development Kit (JDK) o un'installazione degli strumenti a riga di comando Android esistente.
Inizializzare e creare il progetto
Inizializza un progetto Android che esegue il wrapping di una PWA:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap legge il manifest web, chiede agli sviluppatori di confermare i valori da utilizzare nel progetto Android e genera il progetto utilizzando questi valori.
Una volta generato il progetto, genera un APK eseguendo:
bubblewrap build
Esegui
Il passaggio di creazione genera un file denominato app-release-signed.apk. Questo file può essere installato su un dispositivo di sviluppo per i test o caricato sul Play Store per la release.
Bubblewrap fornisce un comando per installare e testare l'applicazione su un dispositivo locale. Con il dispositivo di sviluppo collegato al computer, esegui:
bubblewrap install
In alternativa, puoi utilizzare lo strumento adb.
adb install app-release-signed.apk
L'applicazione dovrebbe ora essere disponibile nel launcher del dispositivo.
Quando apri l'applicazione, noterai che il tuo sito web viene avviato come scheda personalizzata, non come attività web attendibile. Questo perché non abbiamo ancora configurato la convalida di Digital Asset Links.
Alternative all'interfaccia utente grafica (GUI) per Bubblewrap
PWA Builder fornisce un'interfaccia GUI che utilizza la libreria Bubblewrap per alimentare la generazione di progetti di attività web attendibili. Trova le istruzioni su come utilizzare PWA Builder per creare un'app Android che apre la tua PWA.
Chiavi di firma
Digital Asset Links tiene conto della chiave con cui è stato firmato un APK e una causa comune di errore di verifica è l'utilizzo della firma errata. (Ricorda che se la verifica non va a buon fine, il tuo sito web verrà avviato come scheda personalizzata con l'interfaccia utente del browser nella parte superiore della pagina.) Quando Bubblewrap crea l'applicazione, viene creato un APK con una chiave configurata durante il passaggio init. Tuttavia, quando pubblichi l'app su Google Play, potrebbe essere creata un'altra chiave, a seconda di come scegli di gestire le chiavi di firma. Scopri di più sulle chiavi di firma e su come si relazionano a Bubblewrap e Google Play.
Configurare il file di collegamento degli asset
Digital Asset Links è costituito essenzialmente da un file sul tuo sito web che rimanda alla tua app e da alcuni metadati nella tua app che rimandano al tuo sito web.
Dopo aver creato il file assetlinks.json, caricalo sul tuo sito web in .well-known/assetlinks.json rispetto alla root in modo che la tua app possa essere verificata correttamente dal browser. Per ulteriori informazioni su come si relaziona alla tua chiave di firma, consulta un approfondimento su Digital Asset Links.
Controllare il browser
Un'attività web attendibile tenterà di rispettare la scelta predefinita del browser dell'utente. Se il browser predefinito dell'utente supporta le attività web attendibili, verrà avviato. In caso contrario, se un browser installato supporta le attività web attendibili, verrà scelto. Infine, il comportamento predefinito è di tornare alla modalità Schede personalizzate.
Ciò significa che se stai eseguendo il debug di un elemento relativo alle attività web attendibili, devi assicurarti di utilizzare il browser che ritieni di utilizzare. Puoi utilizzare il seguente comando per verificare quale browser viene utilizzato:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
Passaggi successivi
Se hai seguito questa guida, dovresti avere un'attività web attendibile funzionante e conoscenze sufficienti per eseguire il debug in caso di errore di verifica. In caso contrario, consulta altri concetti di Android per gli sviluppatori web.
Per i passaggi successivi, crea un'icona per la tua app. Una volta fatto, puoi prendere in considerazione il deployment dell'app sul Play Store.