Sviluppo software

Esempio di Progressive Web App iOS/Android

Vediamo come funziona l'installazione su iOS/Android di una Progressive Web App (PWA). Per farlo abbiamo realizzato una PWA di esempio, ispirata ad Airbnb, che è priva di funzionalità, ma ha il solo scopo di mostrare il flusso di installazione Aggiungi ad HOME.

Cos'è una Progressive Web App?#

Una Progressive Web App (in breve PWA) è un'applicazione web che coniuga in un'unica soluzione le caratteristiche offerte da una App per smartphone e una Applicazione Web.

L'utente può iniziare ad usarla dal web, come un normale sito internet, e decidere solo in un secondo momento se vuole installarla sul proprio smarphone.

Le statistiche dicono che gli utenti installano sempre meno App. Oggi i cellulari vengono già forniti con le App più famose già precaricate (es. Facebook e Whatsapp), ma a parte quelle è ben difficile che l'utente installi una nuova app specialmente se poco conosciuta.

L'utente medio sopra i 18 anni tende ad installare 0 app al mese (Fonte: How is Apple Encouraging Progressive Web Apps on iOS 13 ).

Quando l'utente, dopo aver usato la PWA, decide che è utile, può installarla sul suo smartphone in modo da averla sempre a portata di mano.

Vediamo in pratica come funziona con un esempio.

Flusso di installazione#

L'utente può venire a conoscenza di una App "nuova" in vari modi:

  • ricerca di un problema/soluzione e click su un risultato di Google;
  • click su un banner pubblicitario su Facebook;
  • click su un link di una Email di Marketing;
  • visione di una pubblicità cartacea e scansione di un QR Code o visita al sito della App;
  • passaparola e ricerca in Google del nome della App e click sul risultato di ricerca;
  • ecc.

Tutti questi casi hanno in comune che la prima volta si passa da un sito Web o tramite link diretto o scansionando un QR Code.

Nel nostro esempio l'utente può cliccare sul link https://esempio.app oppure scansionare il QR Code seguente.

Una volta effettuata questa azione sarà già sulla PWA di esempio.

Vediamo il comportamento a seconda del tipo di dispositivo.

Smartphone Android#

Al primo accesso compare un popup che invita l'utente ad installare la App. L'utente può decidere di procedere con l'installazione o chiudere il popup.

Se decide di installare la App viene avviata la procedura di installazione e un messaggio segnala l'esito dell'installazione. A quel punto è possibile chiudere il sito e lanciare direttamente la App dalla schermata del browser, anche in assenza di connessione ad internet.

CLICCA SULLE IMMAGINI PER VEDERLE A SCHERMO INTERO.

Se invece l'utente chiude il popup, può utilizzare la App direttamente dal browser (N.B. la App di esempio ha solo due pagine prive di logiche). Quando poi si sarà convinto potrà premere sul bottone "Installa" del menù e installare la App.

Inoltre, per evitare che si dimentichi di questa possibilità, pur non essendo troppo insistenti, abbiamo deciso di riproporre l'installazione anche le volte successive che l'utente accede alla Web App, purché sia passato almeno un giorno dall'ultima volta che gli era stato proposto e sempre che nel frattempo non abbia già installato la App sullo smartphone.

Nel filmato seguente vediamo lo stesso flusso che però parte dalla scansione di un QR Code cartaceo.

Smartphone iOS#

Il comportamento è simile al caso del cellulare Android, ma in questo caso la PWA guida l'utente affinché la installi. Vediamo un filmato di esempio.

Funzionamento offline#

Dopo il primo accesso, la PWA salva i dati ricevuti sullo smartphone in questo modo è possibile usarla anche in assenza di connettività. Vediamo un filmato di esempio.

Quando è meglio una PWA rispetto ad una App nativa#

Quando l'idea da realizzare come App è nuova e innovativa è solitamente meglio partire realizzando una Progressive Web App. Come abbiamo visto gli utenti non installano le App a meno che siano già affermate e conosciute.

Permettere di provare una App sotto forma di "sito" prima di procedere alla sua installazione facilita il superamento di questa barriera.

Inoltre i costi di realizzazione e mantenimento di una App nativa sono molto maggiori rispetto ai costi di sviluppo di una PWA. Di conseguenza, a parità di budget da investire, è possibile destinare più risorse al marketing o al cambio delle funzionalità in corsa (Azioni di pivot ).

Infatti ogni nuova idea, prima di rivelarsi efficace e profittevole, deve essere "testata" sul mercato. Molto spesso capita che l'idea, come era stata inizialmente concepita, non è perfettamente in linea con le richieste del mercato e quindi è necessario intraprendere delle azioni di modifica della PWA. Avere ancora a disposizione risorse da investire può fare quindi la differenza tra il successo e il fallimento.

Una volta poi che l'idea è stata validata e la PWA ha successo è possibile realizzare la App nativa a colpo sicuro, finanziandola con gli introiti generati dalla PWA.

Infine l'unico modo per pubblicare App native è attraverso gli store di Apple (per iOS) e Google (per Android). Entrambi gli store pongono dei limiti alle App pubblicabili.

Ad esempio su Apple non è possibile pubblicare App enterprise ad uso interno o indirizzate a un pubblico ristretto, ma devono sempre essere aperte a tutti. Inoltre i vincoli e le limitazioni imposte dagli store cambiano nel tempo, senza preavviso, e alle volte sono di interpretazione soggettiva.

Se vuoi approfondire questi rischi puoi leggere l'articolo Perché NON conviene sviluppare App iOS.

Quando non è possibile realizzare una PWA#

Questo articolo non sarebbe equo se non evidenziasse che in alcuni casi non è possibile realizzare una PWA e bisogna per forza realizzare una App nativa.

Il caso principale riguarda l'invio di notifiche Push.

Su Android è possibile anche con le PWA mandare delle notifiche PUSH, sia ad App aperta che ad App chiusa. Su iOS attualmente le notifiche PUSH sono ricevibili solo se la PWA è aperta, diversamente vengono notificate solo alla successiva apertura dell'App.

In questi casi si può superare questo limite affiancando all'invio di notifiche PUSH anche l'invio di email e/o messaggi WhatsApp e/o SMS.

Esistono poi altri casi particolari come ad esempio la lettura di tag NFC o l'accesso a funzionalità particolari dell'hardware dello smartphone che non sempre sono disponibili in una PWA.

Esempi di Progressive Web App famose utilizzate da milioni di utenti ogni giorno#

Di seguito una lista di Progressive Web App in vari settori, utilizzate ogni giorno da milioni di utenti nel mondo.

Starbucks

Starbucks Progressive Web App .

La PWA è più piccola del 99,84% rispetto all'app iOS esistente di Starbucks, rendendo l'app Web favorita tra i suoi utenti. Grazie alla PWA hanno raddoppiato il numero di utenti web che effettuano ordini ogni giorno.

Uber

Uber Progressive Web App

Con l'espansione dell'azienda in nuovi mercati, il sito web di Uber è stato ricreato da zero come PWA per offrire un'esperienza di prenotazione paragonabile all'app mobile nativa.

Il cuore della web app pesa solo 50kB consentendo di caricarla in 3 secondi anche su una rete lenta come la 2G.

Spotify

Spotify Progressive Web App

A causa del disaccordo tra Spotify e Apple in merito alla commissione del 30% che l'Apple Store trattiene sulle vendite generate all'interno dell'App Spotify, Spotify ha deciso di sviluppare una versione PWA della loro app, come hanno fatto molti altri grandi marchi.

Rispetto all'app nativa, la versione PWA è notevolmente più veloce con la sua interfaccia utente unica e adattiva. Come molte altre PWA, agli utenti viene anche richiesto di aggiungere Spotify PWA alla schermata iniziale, rendendo Spotify PWA più accessibile e alla pari con le versioni native.

Pinterest

Pinterest Progressive Web App

Con un focus sulla crescita internazionale, Pinterest ha riscritto la sua piattaforma web come PWA. Il social network ha rilevato che solo l'1% dei loro utenti mobili si convertiva in registrazioni, accessi o installazioni di app, a causa delle scarse prestazioni sui dispositivi mobili.

Rendendosi conto che l'opportunità di migliorare la conversione era enorme, hanno ricostruito la piattaforma web utilizzando la tecnologia PWA.

Youtube

Youtube Progressive Web App

Da inizio 2021 anche Google ha convertito il sito web di Youtube in una Progressive Web App. Questa nuova PWA si unisce alla lista di PWA di Google:

Richiesta preventivo e informazioni#

Per maggiori informazioni sullo sviluppo di App e Progressive Web App consulta la pagina App iOS/Android e Web Application.

Autore: Giovanni Chiodi
Senior software developer con più di 13 anni di esperienza nello sviluppo di soluzioni web based, enterprise, su misura. Dal 2011 socio fondatore di Garda Informatica Snc condivide questa avventura col fratello Lorenzo.

Che soluzione cerchi?#

Read more!

Newsletter

Ti è piaciuto questo articolo? Iscriviti alla newsletter

Di tanto in tanto pubblichiamo nuovi articoli come questo. Se vuoi essere avvisato lascia il tuo indirizzo e-mail di seguito.

Non invieremo mai SPAM e non condivideremo la tua e-mail con altri. Per maggiori informazioni consulta la privacy policy.

Attendere prego...

closeIcona closesearchIcona searchmore vertIcona more vertmenuIcona menushareIcona sharelinkIcona linkarrow upwardIcona arrow upward