Come pubblicare una PWA sull'App Store e su Google Play

Un'app Web progressiva (PWA) è un sito Web che può essere installato dal browser. Ciò è utile, ma la maggior parte dei clienti cerca ancora app nell'App Store e in Google Play. Se la tua PWA funziona già bene su un telefono, puoi impacchettarla per entrambi gli store senza riscriverla.

Il problema è che i due negozi trattano le app basate sul Web in modo molto diverso. Google ha un percorso ufficiale per le PWA. Apple no, e il suo team di revisione si aspetta più di un sito web riconfezionato. Questa guida copre le opzioni realistiche, le regole che contano e una lista di controllo per sottoporre una PWA alla revisione.

Perché pubblicare una PWA negli app store?

Una PWA offre già agli utenti una richiesta di installazione, un'icona sulla schermata iniziale e un'esperienza a schermo intero. Le schede dello Store aggiungono elementi che l'installazione di un browser non può:

• Discovery. Le persone cercano nei negozi prodotti come i tuoi e un elenco ti fornisce una pagina che si posiziona lì.
• Trust. Una scheda dello Store con recensioni e un editore verificato è un segnale più forte di "Aggiungi alla schermata Home" su un sito web.
• Installazione affidabile. Su iPhone, l'installazione di una PWA dal browser è nascosta nel menu di condivisione. L'installazione in un negozio è un tocco.
• Canali nativi. Un'app in pacchetto può utilizzare notifiche push e collegamenti diretti attraverso la piattaforma anziché dipendere da ciò che espone il browser.

Niente di tutto ciò significa che dovresti abbandonare la PWA. Il sito web rimane il prodotto; le app dello store sono un altro modo per raggiungerlo. Per i compromessi tra una PWA, un'app WebView e una build completamente nativa, leggi PWA vs nativo vs WebView.

Opzione 1: attività web attendibile per Google Play

Google Play supporta le PWA tramite a Attività Web attendibile (TWA). Una TWA è un'app Android che apre la tua PWA a schermo intero utilizzando il browser Chrome installato dall'utente, anziché un WebView incorporato. Secondo la documentazione di Chrome, l'app e il sito web si verificano a vicenda con Digital Asset Link, il che dimostra che entrambi provengono dallo stesso sviluppatore.

Strumenti come Pluriball (uno strumento da riga di comando) e PWABuilder generare e costruire il progetto Android per te. I passaggi abituali sono:

1. Assicurati che la tua PWA abbia un manifest dell'app Web valido, un URL di avvio raggiungibile tramite HTTPS e icone.
2. Genera il progetto Android con Bubblewrap o PWABuilder.
3. Pubblica un file Digital Asset Links sul tuo dominio in modo che l'app possa essere verificata.
4. Crea un Android App Bundle firmato e caricalo su Google Play Console.

Cose da sapere prima di scegliere questo percorso:

• L'esperienza dipende dal fatto che Chrome sia installato e aggiornato sul dispositivo. Se la verifica fallisce o Chrome non è disponibile, gli utenti possono visualizzare una barra degli strumenti del browser.
• L'app host non può leggere direttamente i tuoi contenuti web, i cookie o l'archiviazione locale. La comunicazione con il codice nativo è limitata.
• Hai ancora bisogno di un account Play Console, una scheda dello Store, un'informativa sulla privacy e i requisiti di test che Google applica ai nuovi account personali. Nostro guida alla pubblicazione li esamina, inclusa la regola del test chiuso.

Un TWA è una buona soluzione se hai dimestichezza con gli strumenti da riga di comando e hai solo bisogno di Android.

Opzione 2: wrapper fai da te per iOS

Apple non ha un equivalente TWA. Per inserire una PWA nell'App Store è necessaria un'app iOS nativa che la carichi, in genere tramite WKWebView. La versione fai da te è simile a questa:

1. Crea un progetto Xcode su un Mac.
2. Carica la tua PWA in una visualizzazione Web e aggiungi icone, una schermata di avvio e navigazione.
3. Iscriviti all'Apple Developer Program e registra un ID bundle.
4. Firma, archivia e carica la build su App Store Connect tramite la toolchain di Apple.
5. Prova con TestFlight, completa le risposte all'elenco e alla privacy e invia per la revisione.

PWABuilder può generare un progetto iOS come punto di partenza, ma puoi comunque aprirlo e firmarlo tu stesso, il che richiede un Mac e Xcode. Copriamo questo processo in modo più approfondito come convertire un sito Web in un'app iOS senza Xcode o Mac.

Il problema più grande non è tecnico. La questione è se l'app verrà accettata, di cui parleremo in seguito.

Cosa si aspetta Apple da un wrapper PWA

Le linee guida per la revisione delle app di Apple affermano che un'app "dovrebbe includere funzionalità, contenuti e interfaccia utente che la elevano oltre un sito Web riconfezionato" (linea guida 4.2). Una PWA caricata in una semplice visualizzazione web è esattamente il tipo di invio a cui mirano le linee guida.

Altri punti che vale la pena conoscere:

• Linea guida 4.2.2 afferma che, oltre ai cataloghi, le app non dovrebbero essere principalmente materiale di marketing, ritagli web, aggregatori di contenuti o una raccolta di collegamenti.
• Linea guida 2.1 si aspetta una build finale funzionante e credenziali demo se la tua app ha un accesso.
• Linea guida 4.2.6 afferma che le app create da un modello commercializzato o da un servizio di generazione di app vengono rifiutate a meno che non vengano inviate direttamente dal fornitore del contenuto dell'app. Pubblica con il tuo account sviluppatore, non con quello di un fornitore.

Non esiste una formula che garantisca l’approvazione e nessuno strumento può prometterla. Quello che puoi fare è dare ai revisori un motivo per vedere un'app reale: navigazione nativa, notifiche push attivate dagli utenti, collegamenti diretti funzionanti e un'esperienza di caricamento e offline ottimizzata. Per una panoramica completa delle regole di revisione, vedere Linea guida Apple 4.2: Apple rifiuterà l'app di un sito web?.

Opzione 3: utilizza un convertitore per entrambi i negozi

Un convertitore come SiteTo.App esegue il packaging per entrambe le piattaforme dal tuo URL. Inserisci l'indirizzo del tuo sito web, imposti il ​​nome dell'app, l'icona, i colori, la schermata iniziale e la navigazione, ne visualizzi l'anteprima sul telefono e richiedi una build.

In base a come funziona il prodotto oggi:

• Le build Android possono essere prodotte come APK o AAB.
• Le build iOS vengono firmate con il tuo account sviluppatore Apple e consegnate a TestFlight nel tuo account App Store Connect e da lì le prendi per inviarle per la revisione.
• Le notifiche push vengono impostate tramite Firebase.
• Il sito Web rimane la fonte della verità, quindi le modifiche inviate sul Web raggiungono gli utenti dell'app senza una nuova versione dello Store.
• Il prezzo è di $ 29 una tantum per Android, $ 79 per iOS o $ 99 per entrambi. Le tariffe per gli account sviluppatore Apple e Google sono separate.

SiteTo.App tratta la tua PWA come un sito web: carica il tuo URL pubblico all'interno dell'app. Il comportamento delle funzionalità specifiche della PWA come la memorizzazione nella cache del service-worker, le pagine offline o la richiesta di installazione Web all'interno della shell dell'app dipende dalla visualizzazione Web utilizzata dall'app, quindi testale nell'anteprima anziché dare per scontato. Le notifiche push nell'app vengono configurate tramite Firebase anziché tramite il push web della tua PWA.

Puoi confrontare i convertitori nel nostro la migliore guida per i convertitori da sito web ad appe vedere il lato dei costi quanto costa trasformare un sito web in un'app. Se il tuo sito funziona su una piattaforma specifica, il file pagine della piattaforma spiegare cosa controllare per quello stack.

Quale percorso dovresti prendere?

• Solo Android, a proprio agio con la riga di comando: un TWA tramite Bubblewrap o PWABuilder è un buon percorso ufficiale.
• iOS e hai un Mac e uno sviluppatore a tuo agio con Xcode: un wrapper fai-da-te offre il pieno controllo, ma possiedi ogni ricostruzione e gli aggiornamenti dell'SDK.
• Entrambi i negozi, senza possedere progetti nativi: un convertitore è lo sforzo minimo e mantieni il sito web come prodotto.
• Una PWA che dipende fortemente dal comportamento offline o dalla sincronizzazione in background: prova attentamente prima di impegnarti, qualunque sia il percorso che scegli.

Prepara la tua PWA prima di confezionarla

Una scheda dello Store mette in luce i punti deboli nascosti da una scheda del browser. Prima di imballare:

• Controlla che ogni schermo sia reattivo e utilizzabile con il tocco e il gesto indietro del sistema.
• Assicurati che l'accesso, il check-out e il caricamento dei file funzionino in una vista incorporata, inclusa qualsiasi autenticazione di terze parti che apra un popup o un reindirizzamento.
• Aggiungi una pagina di politica sulla privacy e una pagina di supporto raggiungibili senza effettuare l'accesso.
• Decidi quali collegamenti esterni aprire nell'app e quali aprire il browser.
• Gestisci gli stati offline e di errore con un messaggio chiaro anziché con una schermata vuota.
• Rimuovi qualsiasi messaggio che chieda agli utenti di "installare questa app" poiché lo hanno già fatto.

IL lista di controllo della preparazione e pianificazione dei costi può aiutarti a individuare le lacune prima di costruire.

Elenco dei negozi ed elenco di controllo per la revisione

• Gli account sviluppatore sono di proprietà della tua azienda, non di un appaltatore.
• Il nome, l'icona e gli screenshot dell'app mostrano l'app reale e corrispondono alla build.
• L'informativa sulla privacy e le risposte sulla privacy del negozio riguardano il sito Web, i dati analitici e gli strumenti di pagamento caricati nell'app.
• Le credenziali del revisore funzionano e sono incluse nelle note di revisione.
• L'app aggiunge valore nativo oltre il sito Web, ad esempio navigazione, notifiche o collegamenti diretti.
• Entrambe le build sono state testate su dispositivi reali durante una nuova installazione.
• A qualcuno viene assegnato il compito di guardare i messaggi di revisione e rispondere con dettagli specifici.

Domande frequenti

Posso pubblicare una PWA sull'App Store senza wrapper nativo?

No. L'App Store distribuisce solo file binari delle app native. Una PWA deve essere inserita all'interno di una PWA e l'app confezionata deve soddisfare le linee guida di Apple.

È consentita una PWA su Google Play?

SÌ. Google supporta le PWA tramite attività Web attendibili e puoi anche pubblicare un'app wrapper.

La mia PWA continuerà a funzionare offline all'interno dell'app?

Dipende dal percorso e dalla visualizzazione web. Testa il comportamento offline nell'anteprima o in una build di prova invece di dare per scontato che venga trasferito.

Ho bisogno di un Mac?

Per una build iOS fai-da-te, sì. Un convertitore crea l'app per te, anche se hai comunque bisogno di un account sviluppatore Apple per App Store Connect.

La pubblicazione garantisce l'approvazione?

No. Apple e Google decidono su ogni invio. Un elenco migliore e un'esperienza più simile a un'app migliorano le tue probabilità ma non possono garantire il risultato.

Prossimi passi

Se la tua PWA è pronta, visualizzalo in anteprima come app con SiteTo.App e provalo sul tuo telefono prima di decidere un percorso. Una volta che sei soddisfatto, rivedi prezzi e seguire il creare e pubblicare la guida.