Pubblicazione di PWA nei principali App Store: perché e come

A partire da Google Play Store, uno dopo l'altro il mercato delle app è salito sul carro dell'accoglienza di Progressive Web Apps (Cos'è l'app Progressive Web?) nel loro negozio, rendendolo il nuovo approccio di riferimento per la distribuzione di software. Con tutto questo in gioco, sarebbe uno spreco non sfruttare questa nuova tecnologia per espandere meglio la portata della tua app.

Per darti una prospettiva più chiara sull'intero movimento delle app Web progressive, in particolare sul processo di pubblicazione, oggi esamineremo lo stato attuale delle PWA nei principali mercati di app e come pubblicare una PWA in detti negozi.

Perché dovresti pubblicare la tua Progressive Web App nei principali app store?

In passato le Progressive Web App erano limitate alle sole installazioni Web (Aggiungi alla schermata iniziale). Tuttavia, con il tempo, i mercati delle app come Google e Microsoft hanno iniziato a riconoscere il potenziale delle PWA e hanno preso iniziative per portare avanti l'adozione di questa tecnologia del futuro.

Se hai le capacità e i fondi, la nostra opinione professionale è che dovresti provarci: rendere la tua piattaforma PWA omni-piattaforma. Dopotutto, grandi marchi come Twitter, Uber e Spotify sono tutti saltati sul carrozzone e hanno ottenuto risultati stellari, dimostrando che questa tecnologia in effetti non è solo marketing e vale la pena pensarci sopra. La stessa Microsoft ha anche fatto un ulteriore passo avanti pianificando di rendere le app Web progressive l'esperienza principale in Windows.

 Lettura consigliata : 12 migliori esempi di app Web progressive.

Come pubblicare la tua PWA nei principali app store

Google Play Store

Essendo il precursore del movimento PWA, non sarebbe sorprendente vedere Google Play Store tenere le braccia aperte per le Progressive Web App. Con TWA (Trusted Web Activities) in atto, l'intera sequenza di pubblicazione è stata resa molto più semplice e dovrebbe terminare in pochissimo tempo.

Requisiti

• Android Studio installato
• Un account sviluppatore Google
• Una Progressive Web App funzionante e controllata.

Passaggio 1 : crea un clone dell'app TWA Starter per Android e modifica

• Clona il progetto svgomg-twa con il seguente comando:

 git clone https://github.com/GoogleChromeLabs/svgomg-twa.git

• Importa il progetto in Android Studio usando File > Nuovo > Importa progetto .

In /app/build.gradle , modifica twaManifest secondo il tuo scopo. Le specifiche su cosa e come modificare possono essere trovate all'interno del file build.gradle.

Nota: l' applicationId deve seguire un formato <com>.<your-brand>.<your-app>

Dopo le modifiche, il tuo /app/build.gradle dovrebbe assomigliare a questo:

 def twaManifest = [
    applicationId: 'com.simicart.app',
    hostName: 'simicart.com', // Il dominio aperto nel TWA.
    launchUrl: '/', // Il percorso iniziale per il TWA. Deve essere relativo al dominio.
    nome: 'SimiCart PWA', // Il nome mostrato su Android Launcher.
    themeColor: '#ED8A19', // Il colore utilizzato per la barra di stato.
    navigationColor: '#303F9F', // Il colore utilizzato per la barra di navigazione.
    backgroundColor: '#bababa', // Il colore utilizzato per lo sfondo della schermata iniziale.
    enableNotifications: false, // Impostare su true per abilitare la delega delle notifiche.
    // Aggiungi qui le scorciatoie per la tua app. Ogni scorciatoia deve includere i seguenti campi:
    // - nome: stringa che apparirà nel collegamento.
    // - short_name: stringa più breve utilizzata se |name| è troppo lungo.
    // - url: percorso assoluto dell'URL con cui avviare l'app (ad es. '/create').
    // - icon: nome della risorsa nella cartella disegnabile da utilizzare come icona.
    scorciatoie: [
        nome: 'Apri SimiCart', 
        short_name: 'Apri', 
        URL: '/apri', 
        icona: 'splash'
    ]
,
    // La durata dell'animazione in dissolvenza in millisecondi da riprodurre quando si rimuove la schermata iniziale.
    splashScreenFadeOutDurata: 300
]

Passaggio 2 : crea un archivio chiavi e verifica l'APK

Gli archivi chiavi o le chiavi di caricamento sono necessari per la verifica dell'APK. Per creare un archivio chiavi, avvia Android Studio e vai a Crea → Genera pacchetto/APK firmato e compila i campi richiesti.

Dopo aver creato un Key Store, dovrai estrarre da esso l'impronta digitale SHA256 utilizzando i seguenti comandi:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 Tipo di voce: PrivateKeyEntry
...
Impronte digitali del certificato:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? copia questa riga

Passaggio 3 : configurare il collegamento alla risorsa digitale

È necessario un collegamento alle risorse digitali per la verifica della proprietà dei tuoi contenuti web che possono essere successivamente utilizzati per collegarsi al tuo APK.

Genera un file di istruzioni

Utilizzare l'impronta digitale SHA256 estratta in precedenza e generare un file di istruzioni con il generatore e il tester dell'elenco di istruzioni.

Dopo aver generato un file di rendiconto, il passaggio successivo consiste nel creare un file accessibile pubblicamente che contenga informazioni da Digital Asset Tool. Il file dovrebbe essere posizionato nel tuo host web e in questa posizione:

 .ben noto/assetlinks.json

La posizione di questo file dipende dal processo di compilazione dell'app Web, ma normalmente dovrebbe trovarsi nelle directory distribuite, ovvero le directory "pubbliche" o "dist".

Al termine, il passaggio successivo e finale da fare è distribuire l'app.

Passaggio 4 : crea e rilascia la tua app su Google Play

Con la tua Google Play Console alle impostazioni predefinite, vai su Tutte le applicazioni → Crea applicazione .

Crea un test interno

Passa a Versioni dell'app → Traccia di test interna → Crea versione per creare una Traccia di test interna della tua app.

Crea un APK firmato

In Android Studio, vai a Compila → Genera pacchetto/APK firmato e usa l'archivio chiavi SHA256 che abbiamo estratto in precedenza. Assicurati di selezionare entrambe le caselle della versione della firma.

Carica l'APK

Ora sei alla fine di questo processo. Per caricare il tuo apk, vai su Google Play Store, Rilasci app → Test interno → Modifica versione .

Non dimenticare di completare la scheda dello Store

Tutti i campi obbligatori devono essere compilati prima che la tua app possa essere elencata per il processo di revisione. Questi campi sono necessari per informazioni cruciali come i dettagli sui prezzi, la scheda dello store, la classificazione dei contenuti, ecc. Quando questo processo è completato, dovresti vedere quattro segni di spunta verdi ️ che indicano che tutti i campi obbligatori sono stati compilati.

E questo è tutto. La tua PWA è ora pronta per la revisione e sarà pronta per il download pubblico in poche ore.

App Store di Apple

Di tutti i principali mercati di app, Apple App Store potrebbe essere solo quello meno accogliente o addirittura ostile alle PWA, il che è un po' ironico considerando che Steve Jobs è stato il primo a immaginare un futuro pieno di Progressive Web App.

Il motore Safari completo è all'interno di iPhone. E così, puoi scrivere fantastiche app Web 2.0 e Ajax che sembrano esattamente e si comportano esattamente come le app su iPhone. E queste app possono integrarsi perfettamente con i servizi iPhone. Possono effettuare una chiamata, possono inviare un'e-mail, possono cercare una posizione su Google Maps.

Steve Jobs, 2007

In iOS, le PWA sono fortemente limitate in termini di funzionalità. Non è disponibile il supporto per le notifiche push, il manifest dell'app Web è supportato solo in parte e le nuove funzionalità come Nuova Galleria app spesso ignorano del tutto le PWA. E per questo motivo, ha senso solo che PWA non sia il benvenuto nell'App Store di Apple, secondo le Linee guida per la revisione dell'App Store di Apple:

La tua app dovrebbe includere funzionalità, contenuto e interfaccia utente che la elevano al di là di un sito Web riconfezionato . Se la tua app non è particolarmente utile, unica o "simile a un'app", non appartiene all'App Store.

Funzionalità minima, linee guida per la revisione dell'App Store

Dal momento che Apple fa del suo meglio per paralizzare tutte le funzionalità di PWA, qualsiasi sforzo per pubblicare una PWA, anche con un wrapper di app nativo come Cordova, è inutile. Per ora, possiamo solo sperare che le future versioni di iOS portino un migliore supporto per PWA, ma al momento non è possibile pubblicare PWA su Apple App Store, motivo per cui dovresti considerare un approccio app nativo se la maggior parte del tuo pubblico di destinazione utilizza dispositivi basati su iOS.

 Ulteriori informazioni: PWA su iOS 14 Beta: modifiche sottili

Microsoft Store

Come affermato nel nostro articolo su Windows 10 e PWA: il futuro della consegna del software, Microsoft ha gettato le basi per un negozio di app Web progressive per un po' di tempo e sta gradualmente diventando realtà. Le PWA di marchi più famosi stanno già popolando tutti i mercati delle app e con risultati non meno esemplari da seguire per altri.

Come Google, Microsoft accoglie con favore le PWA e inoltre, pianifica persino di rendere popolare e sostituire le app UWP native con app ibride, una sorta di app Web progressive racchiuse in shell native.

In teoria, pubblicare la tua app Web progressiva su Microsoft Store non dovrebbe richiedere alcuno sforzo poiché originariamente era stato pianificato per essere un processo automatico che utilizza Bing come meccanismo di ricerca per indicizzazione per PWA di qualità. Tuttavia, il tutto è ancora in una fase sperimentale e non funziona in modo così efficace come previsto, motivo per cui dovresti inviare manualmente la tua PWA come pacchetto dell'app Windows (.appx). Ma non preoccuparti, il processo non è snervante come un certo app store.

Requisiti

• Un account Windows Dev Center
• PWABuilder
• Un'app Web progressiva funzionante e controllata dalla qualità che soddisfa le politiche del negozio

Passaggio 1 : riserva un nome per la tua app

Il primo passaggio per la pubblicazione di un'app in Microsoft Store è la prenotazione di un nome. Nel caso ti stia chiedendo cosa accadrebbe se un ragazzo pazzo decidesse di riservare tutti i nomi esistenti: non preoccuparti, la prenotazione dei nomi scadrà dopo 3 mesi.

Compila i campi richiesti e annotali da qualche parte poiché queste informazioni saranno richieste in seguito.

Passaggio 2: genera un AppX utilizzando PWABuilder

Come accennato in precedenza, PWABuilder è un ottimo modo per generare un pacchetto funzionale pubblicabile sui principali mercati di app. È uno dei primi strumenti sul mercato sviluppato da Microsoft esclusivamente allo scopo di portare avanti l'adozione delle PWA.

Genera manifesto

Su PWABuilder, inserisci l'URL della tua PWA e fai clic su Inizia . Tieni presente che questo passaggio è fondamentale in quanto identifica e/o compila automaticamente le informazioni mancanti in manifest.json , che è spesso necessario per le PWA non create specificamente per Microsoft Store.

 Letture consigliate: Manifesto PWA: creare il manifesto dell'app Web in modo semplice

Il passaggio successivo consiste nella creazione di service worker per la tua PWA, ma supponendo che la tua sia una tipica app Web progressiva in cui i service worker siano già integrati, questo passaggio verrà saltato e andremo avanti al passaggio finale, ovvero ottenere il tuo pacchetto .appx.

Genera AppX

Dopo aver fatto clic su genera AppX, dovresti vedere qualcosa di simile a questo pop-up:

È qui che le informazioni precedenti possono tornare utili. Compila i campi e verrà visualizzata una casella di download contenente il pacchetto .appx. Scaricalo e sarai ora pronto per pubblicare la tua PWA su Microsoft Store.

Nel caso in cui desideri testare la tua PWA prima di pubblicarla sullo store, c'è sempre la possibilità di testarla su Windows abilitando Modalità sviluppatore → Fai clic con il pulsante destro del mouse su test_install.ps1 → Esegui con PowerShell . In questo modo aggiungerai automaticamente la tua PWA al desktop e al menu Start, da cui può essere avviata e testata per vedere se tutto funziona correttamente.

Passaggio 3: invia il pacchetto dell'app a Microsoft Store

Per pubblicare la tua PWA su Microsoft Store, dovrai accedere alla cartella del pacchetto all'interno del file .zip che hai scaricato in precedenza. In questa cartella c'è tutto ciò di cui avresti bisogno per pubblicare su Microsoft Store. Per chiarimenti, questa cartella non contiene alcun codice poiché funge solo da meccanismo di indirizzamento alla tua PWA sul Web e ad altri metadati dello Store non correlati.

Dopo aver individuato windows.appx, vai alla pagina di invio nel tuo Dev Center e inserisci le informazioni richieste:

Dopo aver completato tutti i passaggi e compilato tutti i campi richiesti, il pulsante " Invia allo Store " dovrebbe accendersi, indicando che la tua PWA è ora pronta per il processo di revisione. Ci vorranno da un'ora a diversi giorni per completare questo processo; una volta terminato, la tua PWA sarà certificata e disponibile per download pubblici/privati ​​(dipende dalle impostazioni di disponibilità in Dev Center).

Conclusione

Dopo tutto questo, forse ti stai ancora chiedendo perché dovresti creare un'app Web progressiva, tanto meno affrontare tutti questi problemi per pubblicarne una. E hai ragione a porre domande così fondamentali.

La Progressive Web App si sta rivelando passo dopo passo il futuro della fornitura di software e il prossimo passo naturale nell'evoluzione della tecnologia Web. A partire da ora, è già ampiamente utilizzato ovunque nel mondo dell'eCommerce, dove un'esperienza unificata e coinvolgente su tutti i dispositivi è la chiave per conversioni elevate.

Essendo una nuova tecnologia, è già abbastanza difficile creare un'app Web progressiva così com'è. Con SimiCart, non devi più preoccuparti delle fasi di sviluppo della tua PWA Magento poiché forniamo una soluzione completa e la migliore economicamente conveniente sul mercato.