Aggiunta della tua app web progressiva a Google Play

1. Ti diamo il benvenuto

In questo lab acquisirai un'app web progressiva esistente di cui hai eseguito il deployment e la riunirai in un'app per la distribuzione nel Play Store di Google.

Obiettivi didattici

• Come utilizzare Bubblewrap per pacchettizzare la tua app web progressiva per il Play Store di Google
• Che cos'è una chiave di firma e come utilizzarla
• Come creare una nuova app in Play Console e configurare una release di test per testare la tua app prima della pubblicazione
• Che cosa sono i link di asset digitali e come aggiungerli alla tua app web

Che cosa devi sapere

• Che cosa sono le app web progressive
• Come utilizzare gli strumenti a riga di comando
• Comandi di base della shell Bash o modalità di traduzione nella shell scelta

Che cosa ti serve

• Un'app web progressiva pubblicata sul Web e puoi apportare modifiche
• L'interfaccia a riga di comando Bubblewrap installata e pronta per l'uso
• Un account sviluppatore Google Play
• La tua chiave di firma esistente, se hai già avviato le app su Google Play
• Un dispositivo Android o Chrome OS su cui eseguire il test

Che cosa non verrà coperto

• Limitazione della PWA solo ai dispositivi Android o Chrome OS
• Eseguire il deployment di una PWA per Chrome OS e di un'app Android per dispositivi mobili nella stessa app.
• Come rispettare le norme relative ai pagamenti di Google Play nella tua PWA.

2. Aggrega la tua PWA

Bubblewrap è uno strumento che consente di raggruppare la tua app web progressiva in un Android App Bundle con un paio di comandi dell'interfaccia a riga di comando. A tale scopo, genera un progetto Android che avvia la PWA come Attività web attendibile.

Prima di iniziare Di quale tipo di informazioni potrebbe avere bisogno Bubblewrap per la tua PWA per generare un progetto Android?

Per iniziare, crea una directory in cui inserire il tuo progetto e spostarlo:

$ mkdir my-pwa && cd my-pwa

Dopodiché, esegui lo strumento a riga di comando Bubblewrap per generare la configurazione e il progetto Android per l'Android App Bundle che caricherai su Google Play:

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

Importante: quando il fumetto viene eseguito per la prima volta, ti verrà chiesto di scaricare dipendenze aggiuntive. Queste dipendenze sono Java Development Kit e gli strumenti a riga di comando di Android. Per assicurarti che vengano scaricate le versioni corrette per ogni dipendenza, ti consigliamo vivamente di consentire a Bubblewrap il download delle versioni corrette, invece di utilizzarne una già disponibile sul tuo computer.

In questo caso, il fumetto viene inizializzato con il percorso del file Web App Manifest di PWA. Verrà generata una configurazione predefinita dal file manifest web app e verrà avviata una procedura guidata all'interno della console che ti consentirà di modificare la configurazione predefinita. Segui la procedura guidata per modificare qualsiasi valore generato dallo strumento.

Chiave di firma

Il Play Store di Google richiede la firma digitale dei pacchetti dell'applicazione con un certificato al momento del caricamento, spesso indicato come chiave di firma. Si tratta di un certificato autofirmato ed è diverso da quello utilizzato per gestire la tua applicazione tramite HTTPS.

Durante la creazione dell'applicazione, Bubblewrap chiederà il percorso della chiave. Se utilizzi una scheda del Play Store esistente per la tua applicazione, dovrai aggiungere il percorso alla stessa chiave utilizzata dalla scheda.

Se non disponi di una chiave di firma esistente e stai creando una nuova scheda nel Play Store, puoi utilizzare il valore predefinito fornito da Bubblewrap per creare una nuova chiave per te:

Importante: assicurati che la chiave e le password siano archiviate in un luogo sicuro. Ti serviranno per creare la tua applicazione la prima volta e anche per aggiornare regolarmente l'app sul Play Store.

Output Bubblewrap

Dopo aver inizializzato il progetto Bubblewrap e completato la procedura guidata, verranno creati i seguenti elementi:

• twa-manifest.json: la configurazione del progetto che riflette i valori scelti nella procedura guidata Bubblewrap. Dovrai monitorare questo file con il sistema di controllo della versione, poiché può essere utilizzato per rigenerare l'intero progetto Bubblewrap, se necessario.
• File di progetto Android: i file rimanenti nella directory sono il progetto Android generato. Questo progetto è l'origine utilizzata per il comando di creazione Bubblewrap. Facoltativamente, puoi monitorare questi file anche con il sistema di controllo della versione.
• (Facoltativo) Chiave di firma: se decidi di far creare la chiave di firma a bolle, la chiave verrà generata nella posizione descritta nella procedura guidata. Assicurati che la chiave sia conservata in un luogo sicuro e limita il numero di persone che vi hanno accesso; viene usata per dimostrare che le app sul Play Store provengono da te.

Con questi file, abbiamo tutto ciò che serve per creare un Android Application Bundle.

Crea il tuo Android App Bundle

Dalla stessa directory in cui hai eseguito il comando di inizializzazione di Bubblewrap, esegui il comando seguente (devi inserire le password per la chiave di firma):

$ bubblewrap build

Il comando build genererà due file importanti:

• app-release-bundle.aab: il tuo Android App Bundle di PWA. Questo è il file che caricherai sul Google Play Store.
• app-release-sign.apk: un formato di pacchetti Android che può essere utilizzato per installare l'applicazione direttamente su un dispositivo di sviluppo utilizzando il comando bubblewrap install.

3. Mettiti alla prova - Bubblewrap

Ora tocca a voi! Utilizzando quanto appreso nel passaggio precedente, prova a eseguire la seguente procedura:

1. Crea una directory in cui inserire il tuo progetto Android generato.
2. Inizializza la directory con il fumetto e il file manifest dell'app web PWA.
3. Genera una nuova chiave di firma o riutilizza quella esistente se ne hai una.
4. Crea il tuo Android App Bundle dal progetto Android generato.

4. Aggiunta della tua app al Play Store di Google

Ora che disponi di un Android App Bundle per la tua PWA, è il momento di caricarlo nel Play Store di Google. Dopo aver registrato l'account sviluppatore, puoi aprire Play Console per eseguire l'accesso e iniziare.

Prima di iniziare: quali sono i diversi tipi di chiavi di firma necessari per creare una release in Google Play?

Crea un'app

Una volta eseguito l'accesso, verrà visualizzata una schermata in cui sono visualizzate tutte le tue app. Nella parte superiore è presente un pulsante Crea app che, se selezionato, mostra la seguente schermata che ti guida nella creazione della nuova scheda dell'app Android.

Sono presenti diversi campi da compilare, tra cui il nome dell'app, la lingua predefinita, se è un'app o un gioco, se è senza costi o a pagamento e una serie di dichiarazioni. Non potrai creare un'app senza accettare le dichiarazioni, quindi è importante leggerle e comprenderle prima di accettarle.

Anche se è possibile rendere la tua app senza costi o a pagamento, la PWA che raccogli per l'inclusione in Google Play deve essere disponibile per l'accesso a Internet a un pubblico più ampio per funzionare. Inoltre, non esiste un modo affidabile per rilevare in modo affidabile che un utente vi acceda dalla tua app anziché dal suo browser o da un altro metodo di installazione. Di conseguenza, ti consigliamo di monetizzare la tua PWA tramite metodi diversi dall'addebito per scaricarla dallo store.

Dopo aver compilato tutte le informazioni e aver fatto clic sul pulsante Crea app nella parte inferiore del modulo, verrai indirizzato alla dashboard della tua nuova app. Nella dashboard troverai elenchi di controllo delle attività che devi completare per configurare, iniziare a testare e rilasciare la tua app.

Configura test interni

I test interni sono un ottimo metodo per rilasciare rapidamente la tua app senza revisione per un gruppo di trusted tester selezionati. Visualizza le attività nell'elenco di controllo Inizia il test adesso e seleziona Seleziona tester.

Viene visualizzata la pagina Test interni. Qui puoi gestire la configurazione dei test per la tua app. Puoi accedere nuovamente alla sezione Test dal menu Release nella barra laterale. La prima cosa da fare qui è creare una mailing list di tester per testare la tua app. A tale scopo, fai clic sul link Crea mailing list nella sezione Tester della pagina. Si aprirà un popup in cui puoi creare la mailing list.

In questo popup, potrai assegnare un nome alla mailing list e puoi inserire manualmente gli indirizzi email o caricare un file CSV di indirizzi da utilizzare. Al termine, premi il pulsante Salva modifiche. Puoi tornare alle mailing list che hai già creato per aggiungere o rimuovere indirizzi email in base alle tue esigenze. Dopo aver aggiunto i tester, è il momento di creare una release di test. Fai clic sul pulsante Crea nuova release nella parte superiore della pagina.

Crea una release di test

Dopo aver fatto clic sul pulsante Crea nuova release, ti verrà chiesto di aprire una serie di sezioni. La prima, Integrità dell'app, ti consente di scegliere come gestire la chiave di firma della tua app. L'opzione predefinita è consentire a Google di gestire la chiave di firma ed è l'opzione consigliata perché è sicura e garantisce il recupero dell'app in caso di perdita della chiave di caricamento.

Firma dell'app di Google Play

Importante: a partire da agosto 2021, la funzionalità Firma dell'app di Google Play è necessaria per consentire al Play Store di gestire e proteggere la firma finale della tua applicazione. Con la firma dell'app di Google Play Google gestisce e protegge automaticamente la chiave di firma della tua app e la utilizza per firmare le app Android per la distribuzione agli utenti. La chiave generata da Bubblewrap diventa la tua chiave di caricamento anziché la chiave di firma. Google gestisce la chiave di firma per te, ma tu la mantieni e la mantieni privata, che utilizzi ogni volta che approvi il caricamento per la Play Console. Questo sistema consente di reimpostare la chiave di caricamento in caso di smarrimento o compromissione contattando il team di assistenza di Google Play.

Caricamento e finalizzazione app

Dopo aver scelto come gestire la chiave di firma, ti verrà chiesto di caricare l'app bundle nella release. Per farlo, trascina il file app-release-bundle.aab che Bubblewrap ha generato nel modulo. Per finalizzare la release, compila i restanti dettagli della release e fai clic su Salva, quindi su Controllo della release e infine sui pulsanti Inizia implementazione per test interni per iniziare la release. In questo modo la tua app sarà disponibile per i tester interni. Torna alla scheda Tester della pagina Test interni e puoi copiare un link da condividere con i tester in modo che possano accedere all'app.

Anche se le app di test non seguono la procedura di revisione completa del Play Store, potrebbe essere necessario attendere un po' di tempo prima che siano disponibili per il download e il test dopo la creazione e l'implementazione della release.

5. Mettiti alla prova - Crea un'app

Ora tocca a voi! Utilizzando quanto appreso nel passaggio precedente, prova a eseguire la seguente procedura:

1. Crea una nuova app per la tua PWA in Play Console.
2. Configurare test interni per l'app e aggiungerti come tester.
3. Carica l'app bundle e crea una release di test per l'app.
4. Installa l'app dal Play Store sul tuo dispositivo Android o Chrome OS utilizzando il link di test.

6. Digital Asset Links

Se hai eseguito il test della PWA su Google Play, potresti notare che non viene visualizzata a schermo intero. Questo perché non hai ancora verificato la proprietà del sito tramite un file Digital Asset Links. Bubblewrap è in grado di configurare e creare il tuo bundle di applicazioni Android, ma devi completare il collegamento aggiornando l'applicazione web.

Prima di iniziare: in che modo i link di asset digitale possono dimostrare che la tua app e la tua PWA sono di tua proprietà?

Ottieni l'impronta SHA-256 della tua app

Per configurare i Digital Asset Links per PWA, devi disporre dell'impronta SHA-256 per il certificato utilizzato per firmare il pacco che l'utente riceve sul telefono.

Con la funzionalità firma dell'app di Google Play

Se hai configurato la funzionalità firma dell'app di Google Play per la tua app al momento della creazione della release (opzione consigliata in precedenza), la versione dell'impronta SHA-256 è disponibile in Play Console. Ricorda che questo certificato è diverso da quello utilizzato per caricare la tua applicazione. Per recuperare l'impronta, vai all'interno dell'applicazione in Play Console, quindi vai a Release->Configurazione->Integrità dell'app. Vedrai una serie di opzioni nella sezione Certificato della chiave di firma dell'app. Copia il valore dell'impronta digitale del certificato SHA-256.

Senza la funzionalità firma dell'app di Google Play

Se hai disattivato la firma dell'app di Google Play, la chiave usata per firmare l'applicazione finale sarà la stessa che usi per caricare l'applicazione in Play Console. Puoi utilizzare keytool di Java per estrarre l'impronta:

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

Per utilizzarlo, devi conoscere il percorso della chiave di firma e le password pertinenti. Copia i valori esadecimali della chiave SHA256.

Crea il tuo file Digital Asset Links

Bubblewrap può gestire le impronte digitali firmate e generare il file Digital Asset Links corretto per te. Per aggiungere un'impronta con Bubblewrap, esegui il comando seguente all'interno della stessa directory creata durante l'operazione Bubblewrapping della tua PWA, sostituendo <fingerprint> con l'impronta copiata dal passaggio precedente.

$ bubblewrap fingerprint add <fingerprint>

Questo comando aggiungerà l'impronta all'elenco delle impronte dell'applicazione e genererà un file assetlinks.json. Carica questo file nella directory .well-known sulla stessa origine della tua PWA.

Il file assetlinks.json deve essere posizionato nel file .well-known, deve essere denominato assetlinks.json, deve avere la stessa origine della PWA e quindi deve essere accessibile da my-pwa.origin/.well-known/assetlinks.json. Qualsiasi deviazione in tal senso impedirà che venga trovata e collegata correttamente alla tua app. Puoi verificare che il tuo Digital Asset Link sia configurato correttamente utilizzando l'API Digital Asset Links.

7. Mettiti alla prova - Link a risorse digitali

Ora tocca a voi! Utilizzando quanto appreso nel passaggio precedente, prova a eseguire la seguente procedura:

1. Trova l'impronta SHA-256 della tua app.
2. Genera un file Digital Asset Links per la tua app.
3. Carica il file Digital Asset Links alla tua PWA.
4. Verifica che il file Digital Asset Links sia configurato correttamente utilizzando l'API e l'app di test.

8. Testa le tue conoscenze

Prima di terminare, verifica le tue conoscenze e scopri ciò che hai appreso rispondendo alle domande seguenti. Non dare un'occhiata alle risposte.

Dopo aver generato il suo progetto Android con Bubblewrap, Sara esegue il commit del file ______ generato nel suo sistema di controllo della versione in modo che possa ricrearlo in qualsiasi momento.

twa-manifest.json chiave di firma app-release-bundle.aab build.gradle

Giacomo vorrebbe che il suo team addetto al QA provasse la sua app Android PWA. _________________________!

upload build e caricamenti release firma e caricamenti

L'app Android progressiva PWA di Oogie Boogie non è in modalità a schermo intero. Per risolvere il problema, ricevono l'impronta digitale del certificato SHA-256 per ______ e lo caricano nel file Digital Asset Links all'indirizzo ___ nella stessa origine della PWA.

chiave di caricamento, /.well-known/assetlinks.json chiave di caricamento, /assetlinks.json chiave di firma, /.well-known/assetlinks.json chiave di firma, /assetlinks.json

9. Verifica le tue conoscenze - Risposte

Risposte alle domande per verificare le tue conoscenze!

1. Dopo aver generato il suo progetto Android con Bubblewrap, Sara esegue il commit del file ______ generato nel suo sistema di controllo della versione in modo che possa ricrearlo in qualsiasi momento.
   • Risposta: twa-manifest.json
   • Sezione: wrapper PWA
2. Giacomo vorrebbe che il suo team addetto al QA provasse la sua app Android PWA. _________________________!
   • Risposta: segnali e caricamenti
   • Sezione: Aggiungere la tua app al Play Store di Google
3. L'app Android progressiva PWA di Oogie Boogie non è in modalità a schermo intero. Per risolvere il problema, ricevono l'impronta digitale del certificato SHA-256 per ______ e lo caricano nel file Digital Asset Links all'indirizzo ___ nella stessa origine della PWA.
   • Risposta: chiave di firma, /.well-known/assetlinks.json
   • Sezione: Digital Asset Links

10. Complimenti!

Complimenti! Hai imparato ad aggiungere la tua PWA al Play Store di Google.

Quando te la senti, prova a seguire questi passaggi in autonomia:

• Creare una release di produzione dell'app
• Scopri altre opzioni per il rilascio della tua app, incluse release solo per Chrome OS e release che includono un'app Android per dispositivi mobili e una PWA per Chrome OS.
• Scopri come configurare la fatturazione di Google Play per la tua app e implementarla nella tua PWA e nel backend.

Buona programmazione!