Le attività web attendibili possono essere un po' complesse da configurare, soprattutto se si vuole solo mostrare il tuo sito web. Questa guida ti illustrerà come creare un progetto di base che utilizza attività web attendibili, trattando tutti i trucchi.
Al termine di questa guida imparerai a:
- Hanno utilizzato Bubblewrap per creare un'applicazione che utilizza un'Attività web attendibile e supera la verifica.
- Scopri quando vengono utilizzate le tue chiavi di firma.
- Essere in grado di determinare la firma con cui viene creata la tua applicazione Android.
- Scopri come creare un file di base Digital Asset Links.
Per seguire questa guida avrai bisogno di:
- Node.js 10 o versioni successive installato sul computer di sviluppo.
- Un emulatore o uno smartphone Android connesso e configurato per lo sviluppo Attiva il debug USB se stai utilizzando un telefono fisico).
- Un browser che supporti l'Attività web attendibile sul telefono di sviluppo. Chrome 72 o versioni successive funzionerà. Il supporto in altri browser è in arrivo.
- 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 su qualsiasi interfaccia utente del browser. Questa funzionalità è limitata ai siti web di tua proprietà e lo puoi dimostrare impostando Digital Asset Links. Ne parleremo più avanti.
Quando avvii un'attività web attendibile, il browser verifica che il controllo Digital Asset Links questa procedura è chiamata verifica. Se la verifica non va a buon fine, il browser tornerà a mostrare il tuo sito web come un Scheda personalizzata.
Installare e configurare Bubble wrap
Il riquadro avvolgente è un insieme di librerie e un comando strumento a riga di comando (CLI) per Node.js che aiuta gli sviluppatori a generare, creare ed eseguire app web progressive all'interno delle app 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 viene eseguita per la prima volta Bubble wrap, ti proporrà di scaricare e installare automaticamente delle dipendenze esterne richieste. Ti consigliamo di consentire allo strumento di farlo, in quanto garantisce che e le dipendenze siano configurate correttamente. Consulta la documentazione relativa al pluriball per utilizzare un l'installazione esistente del Java Development Kit (JDK) o degli strumenti a riga di comando di Android.
Inizializza e crea il progetto
L'inizializzazione di un progetto Android che aggrega una PWA avviene eseguendo il comando init:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Il pluriball leggerà il manifest web, chiedi agli sviluppatori di confermare i valori da usare nel progetto Android e genera il progetto utilizzando quei valori. Una volta generato il progetto, genera un APK eseguendo:
bubblewrap build
Esegui
Il passaggio di compilazione restituirà un file denominato app-release-signed.apk. Questo file può essere installato su
dispositivo di sviluppo per i test o caricato sul Play Store per la release.
Bubble wrap fornisce un comando per installare e testare l'applicazione su un dispositivo locale. Con dispositivo di sviluppo collegato al computer esegue:
bubblewrap install
In alternativa, lo strumento adb può essere in uso.
adb install app-release-signed.apk
L'applicazione dovrebbe essere disponibile in Avvio app del dispositivo. Quando apri l'applicazione noti che il tuo sito web è stato avviato come una scheda personalizzata, non come un'attività web attendibile, perché non abbiamo ancora configurato la convalida dei link agli asset digitali, ma prima...
Alternative alla Graphic User Interface (GUI) per il pluriball
PWA Builder offre un'interfaccia GUI che utilizza il pluriball per supportare la generazione di progetti di attività web attendibili. Trova ulteriori istruzioni su come usa PWA Builder per creare un'app per Android che apra la 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 errori di verifica è l'utilizzo della firma errata. 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 crea l'applicazione, durante il passaggio init verrà creato un APK con una chiave configurata. Tuttavia, quando pubblichi la tua app in Google Play, potrebbe essere creata automaticamente un'altra chiave, a seconda di come scegli di gestire le chiavi di firma. Scopri di più sui tasti di firma e sulla loro correlazione con Bubblewrap e Google Play.
Configurare il file di link agli asset
I Digital Asset Links sono costituiti essenzialmente da un file sul tuo sito web che rimanda alla tua app e da alcune 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 in relazione alla directory principale) in modo che la tua app possa essere verificata correttamente dal browser. Consulta un'analisi approfondita su Digital Asset Links per ulteriori informazioni sulla relazione con la chiave di firma.
Controllo del browser in corso...
Un'attività web attendibile cercherà di rispettare il browser predefinito dell'utente. Se il browser predefinito dell'utente supporta Attività web attendibili, verrà avviato. In caso contrario, se qualsiasi browser installato supporta Attività web attendibili, verrà scelto. Infine, il comportamento predefinito prevede il passaggio alla modalità Schede personalizzate.
Ciò significa che se stai eseguendo il debug di qualcosa da fare con Attività web attendibili, dovresti accertati di utilizzare il browser che pensi di utilizzare. Per verificare quale browser è in uso, puoi utilizzare il comando seguente:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
Passaggi successivi
Spero che se hai seguito questa guida, avrai un'attività sul Web affidabile funzionante e 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. questi documenti.
Per i prossimi passaggi, ti consiglio di iniziare creando un'icona per la tua app. Dopodiché, potrai valutare l'implementazione della tua app nel Play Store.