Le attività web attendibili possono essere un po' difficoltose da configurare, soprattutto se tutto ciò che vuoi fare è visualizzare il tuo sito web. Questa guida illustra la creazione di un progetto di base che utilizza le attività web attendibili e illustra tutti i problemi.
Al termine di questa guida imparerai a:
- Aver utilizzato il wrapping 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
- Un emulatore o uno smartphone Android connesso e configurato per lo sviluppo (attiva il debug USB se utilizzi un telefono fisico)
- Un browser che supporta l'Attività web attendibile sullo smartphone di sviluppo
- Un sito web che vuoi visualizzare nella sezione Attività web attendibile
Un'attività web attendibile consente alla tua app per Android di avviare una scheda del browser a schermo intero senza 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 i link agli asset digitali vengano controllati. Questa operazione è chiamata verifica. Se la verifica non va a buon fine, il browser tornerà alla visualizzazione del tuo sito web come scheda personalizzata.
Installa e configura Bubblewrap
Bubblewrap è un insieme di librerie e uno strumento 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:
Configurazione dell'ambiente
Quando viene eseguito per la prima volta Bubblewrap, ti proporrà di scaricare e installare automaticamente le dipendenze esterne richieste. Ti consigliamo di non eseguire questa operazione, in quanto garantisce la corretta configurazione delle dipendenze. Controlla la documentazione relativa al Bubblewrap per utilizzare un'installazione esistente di strumenti a riga di comando Java (JDK) o Java Development Kit (JDK).
Inizializza e compila il progetto
Per inizializzare un progetto Android che esegue il wrapping di una PWA, esegui il comando init:
Il fumetto leggerà il file manifest 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:
Esegui
Il passaggio di compilazione restituirà 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.
Bubble wrap fornisce un comando per installare e testare l'applicazione su un dispositivo locale. Con il dispositivo di sviluppo collegato al computer in esecuzione:
In alternativa, puoi utilizzare lo strumento adb.
Nota: lo strumento a riga di comando **adb** si trova all'interno degli strumenti a riga di comando Android in **android_sdk/platform-tools/**.
L'applicazione è ora 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 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 GUI che utilizza la libreria Bubblewrap per supportare la generazione di progetti Trusted Web Activity. Consulta questo post del blog per ulteriori istruzioni su come utilizzare PWA Builder per creare un'app per Android che apra la tua PWA.
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. Tieni presente che se la verifica non va a buon fine, lancerai il tuo sito web 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:
Passaggi successivi
Se hai seguito questa guida, dovresti avere un'attività web attendibile funzionante e disporre di conoscenze sufficienti per eseguire il debug di ciò che accade 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 creando un'icona per la tua app. Dopodiché, potrai valutare il deployment della tua app nel Play Store.