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 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.

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 10 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.

Promemoria sui Cookie e sulla Privacy

Leggi l'informativa
closeIcona closesearchIcona searchmore vertIcona more vertmenuIcona menushareIcona sharelinkIcona linkarrow upwardIcona arrow upward