Le attività web attendibili possono essere un po' complicate da configurare, soprattutto se vuoi solo mostrare il tuo sito web. Questa guida illustra la creazione di un progetto di base che utilizza le attività web attendibili, nonché tutti i problemi.
Al termine di questa guida, saprai:
- Hai utilizzato Bubblewrap per creare un'applicazione che utilizza un'Attività web attendibile e supera la verifica.
- Scopri quando vengono utilizzate le chiavi di firma.
- Devi essere in grado di determinare la firma con cui viene compilata la tua applicazione Android.
- Devi sapere come creare un file Digital Asset Links di base.
Per seguire questa guida, devi disporre di:
- Node.js 10 o versioni successive installate sul computer di sviluppo.
- Uno smartphone o un emulatore Android connesso e configurato per lo sviluppo (Abilita il debug USB se utilizzi uno smartphone fisico).
- Un browser che supporta l'Attività web attendibile sullo smartphone di sviluppo. È supportato Chrome 72 o versioni successive. Il supporto in altri browser è in arrivo.
- Un sito web che vuoi visualizzare in Attività web attendibile.
Un'Attività web attendibile consente alla tua app per Android di avviare una scheda del browser a schermo intero senza alcuna interfaccia utente del browser. Questa funzionalità è limitata ai siti web di tua proprietà e puoi dimostrarlo configurando Digital Asset Links. Ne parleremo più avanti.
Quando avvii un'attività web attendibile, il browser controlla che sia stato eseguito il check-out di Digital Asset Links. Questa operazione è chiamata verifica. Se la verifica non va a buon fine, il browser tornerà a mostrare il tuo sito web come scheda personalizzata.
Installa e configura Bubblewrap
Bubblewrap è un insieme di librerie e uno strumento dell'interfaccia a riga di comando (CLI) per Node.js che aiuta gli sviluppatori a generare, compilare ed eseguire applicazioni web progressive all'interno di applicazioni Android utilizzando l'attività web attendibile.
L'interfaccia a riga di comando può essere installata con il seguente comando:
npm i -g @bubblewrap/cli
Configurazione dell'ambiente
Quando esegui Bubblewrap per la prima volta, ti verrà chiesto di scaricare e installare automaticamente le dipendenze esterne richieste. Ti consigliamo di consentire allo strumento di eseguire questa operazione, in quanto garantisce che le dipendenze siano configurate correttamente. Consulta la documentazione di Bubblewrap per utilizzare un'installazione esistente di Java Development Kit (JDK) o degli strumenti a riga di comando Android.
Inizializza e compila il progetto
Per inizializzare un progetto Android che avvolge una PWA, esegui il comando init:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap leggerà il manifesto web, chiederà agli sviluppatori di confermare i valori da utilizzare nel progetto Android e genererà il progetto utilizzando questi valori. Una volta generato il progetto, genera un APK eseguendo:
bubblewrap build
Esegui
Il passaggio di compilazione produrrà 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 pubblicazione.
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 programma di avvio del dispositivo. Quando apri l'applicazione, noterai che il tuo sito web viene lanciato come scheda personalizzata e non come attività web attendibile. Questo accade perché non abbiamo ancora configurato la convalida dei link agli asset digitali, ma prima…
Alternative alla GUI (Graphical User Interface) per Bubblewrap
PWA Builder fornisce un'interfaccia utente grafica che utilizza la libreria Bubblewrap per supportare la generazione di progetti Attività web attendibile. Puoi trovare ulteriori istruzioni su come usare PWA Builder per creare un'app per Android che apra la tua PWA in questo post del blog.
Una nota sulle chiavi di firma
Digital Asset Links prende in considerazione la chiave con cui è stato firmato un APK e una causa comune di errore di verifica è l'utilizzo della firma sbagliata. Ricorda che, se la verifica non va a buon fine, il tuo sito web verrà lanciato come scheda personalizzata con l'interfaccia utente del browser nella parte superiore della pagina. Quando Bubblewrap compila l'applicazione, viene creato un APK con una configurazione della chiave durante il passaggio init. Tuttavia, quando pubblichi la tua 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 sulla loro relazione con Bubblewrap e Google Play.
Configurare il file del link agli asset
Digital Asset Links consiste essenzialmente in un file sul tuo sito web che rimanda alla tua app e alcuni metadati nella tua app che rimandano al tuo sito web.
Dopo aver creato il file assetlinks.json, caricalo sul tuo sito web all'indirizzo .well-known/assetlinks.json rispetto alla radice in modo che l'app possa essere verificata correttamente dal browser. Dai un'occhiata a un approfondimento sui link agli asset digitali per saperne di più sul loro rapporto con la chiave di firma.
Controllo del browser
Un'attività web attendibile cercherà 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, verrà scelto un browser installato che supporti le Attività web attendibili. Infine, il comportamento predefinito è quello di passare a una modalità Schede personalizzate.
Ciò significa che se stai eseguendo il debug di qualcosa relativo alle Attività web attendibili, devi assicurarti di utilizzare il browser che ritieni di utilizzare. Puoi utilizzare il seguente comando per controllare quale browser è in uso:
> 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 disporre di conoscenze sufficienti per eseguire il debug dei problemi che si verificano quando la verifica non va a buon fine. In caso contrario, dai un'occhiata ad altri concetti di Android per gli sviluppatori web o segnala un problema su GitHub in base a queste documentazioni.
Per i passaggi successivi, ti consiglio di iniziare con la creazione di un'icona per la tua app. Una volta fatto, puoi valutare la possibilità di implementare la tua app sul Play Store.