Aggiungere l'app web progressiva a Google Play

1. Ti diamo il benvenuto

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

Obiettivi didattici

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

Che cosa devi sapere

• Cosa sono le app web progressive
• Come utilizzare gli strumenti a riga di comando
• Comandi shell Bash di base o come tradurli nella shell che preferisci

Che cosa ti serve

• Un'app web progressiva pubblicata su internet e che puoi modificare
• L'interfaccia a riga di comando di Bubblewrap installata e pronta per l'uso
• Un account sviluppatore Google Play
• La chiave di firma esistente, se hai già lanciato app su Google Play
• Un dispositivo Android o ChromeOS su cui eseguire il test

Cosa non sarà coperto

• Limitare la PWA solo ai dispositivi Android o ChromeOS
• Deployment di una PWA per ChromeOS e di un'app per Android per i dispositivi mobili nella stessa app.
• Come rispettare le norme relative ai pagamenti di Google Play nella tua PWA.

2. Proteggere la PWA

Bubblewrap è uno strumento che consente di inserire la tua app web progressiva in un Android App Bundle in modo semplice come l'esecuzione di un paio di comandi CLI. A questo scopo, genera un progetto Android che avvia la tua PWA come Attività web attendibile.

Prima di iniziare: di quali informazioni potrebbe aver bisogno Bubblewrap sulla tua PWA per generare un progetto Android?

Per iniziare, crea una directory in cui inserire il progetto e spostati al suo interno:

$ mkdir my-pwa && cd my-pwa

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

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

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

Qui, Bubblewrap viene inizializzato con la posizione del file manifest dell'app web di una PWA. Verrà generata una configurazione predefinita dal file manifest dell'app web e verrà avviata una procedura guidata nella console che ti consentirà di modificare la configurazione predefinita. Segui la procedura guidata per modificare uno qualsiasi dei valori generati dallo strumento.

Chiave di firma

Il Play Store di Google richiede che i pacchetti dell'applicazione vengano firmati digitalmente con un certificato al momento del caricamento, spesso chiamato chiave di firma. Si tratta di un certificato autofirmato ed è diverso da quello utilizzato per pubblicare l'applicazione tramite HTTPS.

Bubblewrap ti chiederà il percorso della chiave durante la creazione dell'applicazione. Se utilizzi una scheda del Play Store esistente per la tua applicazione, devi aggiungere il percorso alla stessa chiave utilizzata da quella scheda.

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

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

Output di Bubblewrap

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

• twa-manifest.json: la configurazione del progetto, che riflette i valori scelti nella procedura guidata Bubblewrap. Ti consigliamo di monitorare questo file con il tuo sistema di controllo della versione, in quanto 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 compilazione di Bubblewrap. Se vuoi, puoi anche monitorare questi file con il tuo sistema di controllo delle versioni.
• (Facoltativo) Chiave di firma: se scegli di far creare la chiave di firma a Bubblewrap, 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 utilizzata per dimostrare che le app sul Play Store provengono da te.

Con questi file, ora abbiamo tutto il necessario per creare un Android App Bundle.

Crea il tuo Android App Bundle

Dalla stessa directory in cui hai eseguito il comando di inizializzazione di Bubblewrap, esegui il seguente comando (avrai bisogno delle password per la chiave di firma):

$ bubblewrap build

Il comando di build genererà due file importanti:

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

3. Prova - Bubblewrap

Ora tocca a voi! Utilizzando ciò che hai imparato nel passaggio precedente, prova a eseguire le seguenti operazioni:

1. Crea una directory per contenere il progetto Android generato.
2. Inizializza la directory con Bubblewrap e il manifest dell'app web della tua PWA.
3. Genera una nuova chiave di firma o riutilizza quelle esistenti, se le hai.
4. Crea l'Android App Bundle dal progetto Android generato.

4. Aggiungere l'app al Google Play Store

Ora che hai un Android App Bundle per la tua PWA, è il momento di caricarlo sul Google Play Store. Una volta registrato l'account sviluppatore, puoi accedere a Play Console per iniziare.

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

Creare un'app

Una volta eseguito l'accesso, vedrai una schermata che mostra tutte le tue app. In alto, c'è un pulsante, Crea app, che, se selezionato, mostra la schermata seguente per guidarti nella creazione di una nuova scheda dell'app per Android.

Qui devi compilare diversi campi, tra cui il nome dell'app, la lingua predefinita, se si tratta di un'app o di un gioco, se è senza costi o a pagamento e una serie di dichiarazioni. Non potrai creare un'app senza accettare le dichiarazioni, quindi è importante che tu le legga e le comprenda prima di accettarle.

Sebbene tu abbia la possibilità di rendere la tua app senza costi o a pagamento, la PWA che raggruppi per l'inclusione in Play deve essere disponibile per l'intera internet per funzionare e non esiste un modo per rilevare in modo affidabile che un utente vi acceda dalla tua app anziché dal browser o da un altro metodo di installazione. Pertanto, ti consigliamo di monetizzare la tua PWA con mezzi 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, verrà visualizzata la dashboard della nuova app. Nella dashboard vedrai elenchi di controllo delle attività che devi completare per configurare, iniziare a testare e rilasciare l'app.

Configurare i test interni

I test interni sono un ottimo modo per rilasciare rapidamente la tua app senza revisione a un gruppo di trusted tester che selezioni. Visualizza le attività nell'elenco di controllo Inizia subito i test e seleziona Seleziona tester.

Se fai clic su questa attività, si aprirà la pagina Test interno. Qui gestirai la configurazione dei test per la tua app. Puoi tornare a questa pagina aprendo la sezione Test nel menu Rilascio della barra laterale. La prima cosa da fare è creare una mailing list di tester per testare la tua app. Per farlo, fai clic sul link Crea mailing list nella sezione Tester della pagina. Si aprirà un popup per creare la tua lista email.

In questo popup, assegnerai un nome alla tua lista email e potrai inserire manualmente gli indirizzi email o caricare un file CSV di indirizzi email da utilizzare. Al termine, premi il pulsante Salva modifiche. Potrai tornare agli elenchi email che hai già creato per aggiungere o rimuovere indirizzi email in base alle 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.

Creare una release di test

Dopo aver fatto clic sul pulsante Crea nuova release, ti verranno mostrate diverse sezioni. La prima, Integrità dell'app, ti consente di scegliere come gestire la chiave di firma dell'app. L'opzione predefinita è consentire a Google di gestire la chiave di firma ed è l'opzione consigliata perché è sicura e consente di recuperare l'app in caso di perdita della chiave di caricamento.

Firma dell'app di Google Play

Importante:a partire da agosto 2021, è necessaria la firma dell'app di Google Play per consentire al Play Store di gestire e proteggere la firma finale dell'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 tue app per Android da distribuire agli utenti. La chiave generata da Bubblewrap diventa la tua chiave di caricamento anziché la tua chiave di firma. Mentre Google gestisce la chiave di firma per te, tu gestisci e mantieni privata la chiave di caricamento, che utilizzi ogni volta che firmi la tua app per il caricamento su Play Console. Questo sistema ti consente di reimpostare la chiave di caricamento in caso di smarrimento o compromissione contattando il team di assistenza di Google Play.

Caricamento e finalizzazione dell'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 generato da Bubblewrap nel modulo. Per finalizzare la release, compila i dettagli rimanenti e fai clic sui pulsanti Salva, Controlla release e infine Inizia implementazione per il test interno per avviare la release. In questo modo, la tua app sarà disponibile per i tester interni. Nella scheda Tester della pagina Test interni, puoi copiare un link da condividere con i tester in modo che possano accedere alla tua app.

Sebbene le app di test non vengano sottoposte alla procedura completa di revisione del Play Store, potrebbe essere necessario del tempo prima che siano disponibili per il download e il test dopo la creazione e l'implementazione della release.

5. Prova: crea un'app

Ora tocca a voi! Utilizzando ciò che hai imparato nel passaggio precedente, prova a eseguire le seguenti operazioni:

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

6. Digital Asset Links

Se hai avuto modo di testare la tua PWA in Play, potresti notare che non viene eseguita a schermo intero. Questo perché non hai ancora verificato la proprietà del sito tramite un file Digital Asset Links. Sebbene Bubblewrap sia in grado di configurare e creare il bundle dell'applicazione Android, devi completare il collegamento aggiornando l'applicazione web.

Prima di iniziare:in che modo Digital Asset Links può dimostrare che l'app e la PWA sono di tua proprietà?

Ottenere l'impronta SHA-256 della tua app

Per configurare i Digital Asset Links della tua PWA, devi avere l'impronta SHA-256 del certificato utilizzato per firmare il pacchetto che l'utente riceve sul proprio smartphone.

Con la firma dell'app di Google Play

Se hai configurato la firma dell'app di Google Play per la tua app durante la creazione della release (come consigliato in precedenza), la fingerprint SHA-256 è disponibile in Play Console. Ricorda che questo certificato è diverso da quello utilizzato per caricare l'applicazione. Per ottenere l'impronta, all'interno dell'applicazione in Play Console, vai a Release->Configurazione->Integrità dell'app. Qui vedrai una serie di opzioni nella sezione Certificato della chiave di firma dell'app. Copia il valore del fingerprint del certificato SHA-256.

Senza la firma dell'app di Google Play

Se hai disattivato la firma dell'app di Google Play, la chiave utilizzata per firmare l'applicazione finale sarà la stessa che utilizzi per caricare l'applicazione su 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.

Creare il file Digital Asset Links

Bubblewrap può gestire le impronte delle firme che hai recuperato e generare il file Digital Asset Links corretto. Per aggiungere un'impronta con Bubblewrap, esegui il comando seguente dalla stessa directory creata durante Bubblewrapping Your 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 della stessa origine della tua PWA.

Il file assetlinks.jsondeve essere inserito nella directory .well-known, deve essere denominato assetlinks.json, deve trovarsi nella stessa origine della tua PWA e, pertanto, deve essere accessibile all'indirizzo my-pwa.origin/.well-known/assetlinks.json. Qualsiasi deviazione impedirà di trovarlo e collegarlo correttamente alla tua app. Puoi verificare che Digital Asset Links sia configurato correttamente utilizzando l'API Digital Asset Links.

7. Prova: Digital Asset Links

Ora tocca a voi! Utilizzando ciò che hai imparato nel passaggio precedente, prova a eseguire le seguenti operazioni:

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 nella 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, metti alla prova le tue conoscenze e verifica cosa hai imparato rispondendo alle seguenti domande. Non sbirciare le risposte.

Dopo aver generato il progetto Android con Bubblewrap, Sally esegue il commit del file ______ generato nel suo sistema di controllo delle versioni in modo da poterlo ricompilare ogni volta che ne ha bisogno.

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

Jack vuole che il suo team di controllo qualità testi la sua app PWA per Android. Ha ______ il suo Android App Bundle in un canale di test interno.

caricamenti build e caricamenti release firma e caricamenti

L'app per Android PWA di Oogie Boogie non viene eseguita a schermo intero. Per risolvere il problema, recuperano l'impronta del certificato SHA-256 per il loro ______ e la caricano nel file Digital Asset Links che si trova in ______ sulla stessa origine della loro 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 del test delle conoscenze.

1. Dopo aver generato il progetto Android con Bubblewrap, Sally esegue il commit del file ______ generato nel suo sistema di controllo delle versioni in modo da poterlo ricompilare ogni volta che ne ha bisogno.
   • Risposta: twa-manifest.json
   • Sezione: Bubblewrap your PWA
2. Jack vuole che il suo team di controllo qualità testi la sua app PWA per Android. Ha ______ il suo Android App Bundle in un canale di test interno.
   • Risposta: segnali e caricamenti
   • Sezione: Aggiungere l'app al Google Play Store
3. L'app per Android PWA di Oogie Boogie non viene eseguita a schermo intero. Per risolvere il problema, recuperano l'impronta del certificato SHA-256 per il loro ______ e la caricano nel file Digital Asset Links che si trova in ______ sulla stessa origine della loro PWA.
   • Risposta: signing key, /.well-known/assetlinks.json
   • Sezione: Digital Asset Links

10. Complimenti!

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

Quando ti senti pronto, prova a svolgere i seguenti passaggi da solo:

• Crea una release di produzione dell'app
• Scopri di più sulle altre opzioni per il rilascio dell'app, tra cui i rilasci solo per ChromeOS e quelli che includono un'app per Android per il mobile e una PWA per ChromeOS.
• Scopri come configurare Fatturazione Google Play per la tua app e implementarla nella tua PWA e nel tuo backend.

Buona programmazione!