Le attività web attendibili possono essere un po' difficoltose da configurare, in particolare se vuoi soltanto visualizzare il tuo sito web. Questa guida ti illustrerà come creare un progetto di base che utilizza Attività web attendibili e affronterà tutti gli aspetti pratici.
Al termine della guida:
- Ho utilizzato il wrapper per creare un'applicazione che utilizza un'attività web attendibile e supera la verifica.
- Comprendi quando vengono utilizzate le chiavi di firma.
- Essere in grado di determinare la firma con cui viene creata la tua applicazione Android.
- Sapere come creare un file Digital Asset Links di base.
Per seguire questa guida ti serviranno:
- Node.js 10 o versione successiva installato sul computer di sviluppo.
- Un emulatore o un telefono Android collegato e configurato per lo sviluppo (attiva il debug USB se usi un telefono fisico).
- Un browser che supporti l'Attività web attendibile sul telefono di sviluppo. Chrome 72 o versioni successive. A breve sarà disponibile il supporto in altri browser.
- Un sito web che vuoi visualizzare nell'Attività web attendibile.
Un'attività web attendibile consente alla tua app Android di avviare una scheda del browser a schermo intero senza alcuna UI del browser. Questa funzionalità è limitata ai siti web di tua proprietà e puoi provarlo configurando Digital Asset Links. Parleremo di questi argomenti più avanti.
Quando avvii un'attività web attendibile, il browser controlla che il check-out di Digital Asset Links, questa operazione si chiama verifica. Se la verifica non va a buon fine, il browser tornerà a mostrare il tuo sito web come Scheda personalizzata.
Installare e configurare il wrapping di bolle
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 delle 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à proposto di scaricare e installare automaticamente le dipendenze esterne richieste. Ti consigliamo di consentire allo strumento di farlo, poiché garantisce che le dipendenze siano configurate correttamente. Consulta la documentazione relativa al bubblewrap per utilizzare un'installazione di Java Development Kit (JDK) esistente o di strumenti a riga di comando di Android.
Inizializza e crea progetto
L'inizializzazione di un progetto Android che aggrega una PWA viene eseguita eseguendo il comando init:
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. Dopo aver generato il progetto, genera un APK eseguendo:
bubblewrap build
Esecuzione
Il passaggio di build 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 il rilascio.
Bubblewrap fornisce un comando per installare e testare l'applicazione su un dispositivo locale. Con il dispositivo di sviluppo collegato al computer:
bubblewrap install
In alternativa, può essere usato lo strumento adb.
adb install app-release-signed.apk
L'applicazione dovrebbe essere disponibile in Avvio app del dispositivo. Quando apri l'applicazione noterai che il tuo sito web è stato avviato come scheda personalizzata e non come attività web attendibile; ciò è dovuto al fatto che non abbiamo ancora configurato la convalida di Digital Asset Links, ma prima...
Alternative alla Graphic User Interface (GUI) per il wrapper
PWA Builder fornisce un'interfaccia GUI che utilizza la libreria Bubblewrap per generare progetti di attività web attendibili. Puoi trovare ulteriori istruzioni su come utilizzare PWA Builder per creare un'app Android che apre la tua PWA in questo post del blog.
Nota sulle chiavi di firma
Digital Asset Links prende in considerazione la chiave con cui è stato firmato un APK e una causa comune di errori di verifica è l'utilizzo della firma errata. Tieni presente 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 il bubblewrap crea l'applicazione, durante il passaggio init viene creato un APK con una configurazione della chiave. Tuttavia, quando pubblichi la tua app in Google Play, potrebbe essere creata un'altra chiave per te, a seconda di come scegli di gestire le chiavi di firma. Scopri di più sulle chiavi di firma e sulla loro relazione con il wrapping di bolle e Google Play.
Configurare il file Asset Link
I Digital Asset Links sono costituiti essenzialmente da un file sul tuo sito web che rimanda alla tua app e da alcuni metadati nell'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 in relazione al dominio principale, in modo che la tua app possa essere verificata correttamente dal browser. Consulta l'approfondimento su Digital Asset Links per saperne di più su come si collega alla tua chiave di firma.
Controllo del browser in corso...
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, se qualsiasi browser installato supporta le attività web attendibili, verrà scelto. Infine, il comportamento predefinito consiste nel ricorrere alla modalità Schede personalizzate.
Ciò significa che se esegui il debug di un'attività relativa ad Attività web attendibili, devi assicurarti di utilizzare il browser che ritieni di utilizzare. Per verificare quale browser è in uso, puoi utilizzare il seguente comando:
> 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 avere 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 sviluppatori web o invia una segnalazione su GitHub su questi documenti.
Per i passaggi successivi, ti consiglio di iniziare con la creazione di un'icona per la tua app. Dopodiché, puoi valutare di implementare la tua app sul Play Store.