Apps e Mobile

Progressive Web App: tutto quello che devi sapere

Questa è l'immagine del blog post incentrato sullo sviluppo delle Progressive Web App

ll futuro dello sviluppo di applicazioni? E' targato Progressive Web App, la nuova frontiera tecnologica del mobile. In questo articolo spiegheremo cosa sono, a cosa servono ed i vantaggi offerti rispetto alle app di tipo nativo.

Che cosa sono le Progressive Web App


Dopo i siti web responsive, ovvero ottimizzati per garantire la navigazione da smartphone e tablet, è la volta delle Progressive Web App o semplicemente PWA, che rappresentano una vera e propria rivoluzione nel mercato delle applicazioni.

Come definire in breve la Progressive Web App? Semplicemente come la versione mobile di un sito web, una moderna applicazione web offline nata per i dispositivi mobili ed oggi pienamente in grado di competere con le app tradizionali.

La principale caratteristica di un'app di questo tipo è proprio quella di essere Progressive, ovvero pensata per tutti, indipendentemente dal browser utilizzato. Ne deriva un'esperienza utente senza uguali, altra peculiarità fondamentale senza cui la Progressive Web App non avrebbe motivo di esistere e che si può definire il punto focale di ogni PWA.

Questa immagine è un esempio di una Progressive Web App appena lanciata sul mercato

D'altra parte, il web del futuro è decisamente orientato verso il mobile. Non a caso Google sta favorendo nei suoi algoritmi le app con versioni mobili più curate. Un trend che piano piano, ma forse neanche tanto, porterà sicuramente al rivoluzionamento del modo di utilizzare la rete di cui le PWA rappresentano le nuove frontiere.

Ogni fornitore di browser l'ha capito molto bene al punto che tutti stanno lavorando quotidianamente per l'implementazione di tutta la tecnologia necessaria per garantirne il miglior funzionamento.

Caratteristiche e tecnologie principali delle PWA


Le Progressive Web App funzionano esattamente come un'app tradizionale ma, rispetto a queste, sono completamente autonome nel loro funzionamento.

Una PWA si installa molto facilmente in quanto non è necessario fare riferimento ad alcuno store. Semplicemente, nel momento in cui gli utenti accedono ai siti ricevono una notifica che li invita, se lo vogliono, a scaricare direttamente dal browser la relativa PWA. Pochissimi, dunque, i passaggi e la navigazione è diretta.


Sono tre gli elementi chiave di una Progressive Web App: l'App Shell, il Service Worker e il JSON Manifest.


- L'App Shell rappresenta il vero e proprio scheletro dell'app all'interno di cui avverrà la diffusione dei dati. Vi è contenuto ogni elemento principale dell'interfaccia utente e ogni componente indispensabile per il corretto funzionamento dell'app.

Al secondo accesso dell'utente all'applicazione, proprio grazie al fatto che ogni elemento è stato salvato in locale e che i contenuti vengono recuperati in modo dinamico da un API, l'app carica in tempi brevissimi.


- Il Service Worker è un elemento chiave delle PWA. Importantissimo per la ricezione di notifiche push, il Server Worker lavora per la modifica del comportamento dell'app andando ad occupare una posizione strategica: quella tra il browser e l'app stessa.

Tecnicamente si tratta di uno script che il browser esegue in background. Un po' come un server proxy, si pone tra il browser e la rete, immagazzina i dati delle pagine nella cache e migliora così la successiva esperienza utente che risulta più veloce e coinvolgente.


- Il JSON Manifest è un file che contiene ogni metadato necessario per l'indicizzazione dell'app su uno store o per il salvataggio della stessa app sulla schermata Home degli utenti.

Tutti i principali vantaggi delle PWA


I vantaggi di cui oggi può usufruire chi decide di utilizzare le Progressive Web App sono tantissimi.


- L'affidabilità si colloca certamente tra i primi posti. Il caricamento è praticamente istantaneo e il funzionamento avviene anche offline, indipendentemente quindi da eventuali problemi legati alla rete. Nel caso di assenza di connessione, comunque, è bene ricordare che le notifiche non arriveranno. Grazie ai Servie Worker ogni risorsa viene pre-memorizzata nella cache e si può definitivamente dire addio alle lunghe attese.


- La rapidità è importante per le PWA che ne fanno uno dei loro principali punti di forza. Non a caso sono in grado di reagire molto rapidamente con gli utenti. Si calcola che circa il 53% di coloro che navigano sul web abbandonano i siti se gli stessi non si caricano in 2-3 secondi. Ecco perché le app del futuro devono avere queste prerogative: rapidità e fluidità.


- Gli alti livelli di coinvolgimento portano l'esperienza utente ai massimi livelli, al punto da avere le stesse caratteristiche di un'applicazione nativa. Non a caso è proprio questa, l'user experience, a potersi definire la peculiarità fondamentale delle Progressive Web App.

Le PWA coinvolgono grazie al file Web App Manifest che permette i controlli dell'app e della modalità d'avvio. Gli utenti possono inoltre scegliere le icone che preferiscono visualizzare nella propria Home, la pagina da visualizzare all'avvio dell'app o, ancora, l'orientamento del display. Tutto questo si traduce, inevitabilmente, in un maggior livello di gradimento da parte dell'utente finale.


- I miglioramenti generali dell'esperienza utente e i ridottissimi tempi di caricamento portano ad un notevole miglioramento delle conversioni del proprio sito. Si calcola, infatti, che con una PWA ben progettata gli utenti rimangano connessi al sito ben 8 volte di più rispetto al classico portale web.


- Gli aggiornamenti sono costanti perché arrivano direttamente dal web e non occorre effettuare alcun download. Nel momento stesso in cui si andrà ad aprire la PWA si avrà la certezza di utilizzare l'ultima versione disponibile in quel momento.


- L'utilizzabilità su tutti i dispositivi è una caratteristica importante che dà anche il nome alle PWA che sono, per l'appunto, Progressive (indirizzate a tutti indistintamente). Le PWA, non a caso, sono davvero multi-piattaforma. Indipendentemente, inoltre, dal dispositivo utilizzato si adattano perfettamente al relativo display modificando, se è il caso, la disposizione del menù o degli annunci pubblicitari.


- Le PWA si eseguono nel web e quindi vi è la totale possibilità di controllare sia l'app che la relativa distribuzione. Non è necessario passare da alcuno store. Questo si traduce anche in un numero minore di restrizioni da rispettare, in una maggiore libertà in termini di design e di funzionalità.


- Le PWA sono indicizzabili da parte dei principali motori di ricerca. Sono, per questa motivazione, molto più semplici da promuovere rispetto ad un'app tradizionale con una conseguente maggiore visibilità.


- Non è necessario alcun processo di installazione per utilizzare le PWA, cosa che invece deve avvenire obbligatoriamente nel caso delle app native.


- I servizi di geolocalizzazione rappresentano un enorme vantaggio per le PWA. Grazie all'API Geolocation è possibile conoscere la posizione geografica degli utenti, naturalmente previo il consenso degli stessi. Una volta attivato il rilevamento della posizione si ricevono notifiche ogni qualvolta questa subisce un cambiamento ed il tutto in piena sicurezza dal momento che è garantita dall'HTTPS. Fidelizzare così sul web fino ad oggi non era praticamente possibile ed ecco perché è un grande merito delle Progressive Web App.


- La sicurezza, aspetto irrinunciabile sul web, lo diventa anche nelle PWA grazie all'utilizzo dei già citati protocolli HTTPS.

Quali sono le differenze tra le PWA e le app tradizionali?


In definitiva, visti gli innumerevoli vantaggi e le caratteristiche delle PWA è forse possibile fare un confronto diretto con le applicazioni tradizionali? Chi la spunterebbe tra le due?

Prima di farlo è importante ricordare che, nonostante tutto, le app native risultano essere ancora molto scaricate attualmente. Dato come stanno evolvendo le cose, però, è inevitabile che nel tempo si assista ad un lento ma graduale declino. La motivazione non è difficile da comprendere e si ritrova in tutte le caratteristiche delle PWA che, purtroppo, non appartengono alle applicazioni tradizionali.


1- Prima grande differenza, che non può passare inosservata, sta nel fatto che le app tradizionali sono progettate solo per un determinato sistema operativo. Non è un caso se app progettate per Mac sono praticamente inutilizzabili su Windows. Le PWA, invece, sono multi-piattaforma e sono utilizzabili, in un'unica versione, con qualunque tipo di browser o sistema operativo.


2- Un altro limite delle app tradizionali rispetto alle PWA che rappresenta la seconda grande differenza tra le due tipologie sta nella necessità di download per l'utilizzo. Praticamente impossibile, infatti, utilizzare un'app tradizionale senza averla scaricata. Limite che, invece, non esiste per le Progressive Web App.


3- Volendo confrontare sul piano dell'efficienza le PWA con le app tradizionali ne viene fuori un quadro disarmante. Le prime, infatti, sembrano vittoriose su tutta la linea con almeno 4 punti di forza, ovvero il funzionamento su richiesta, l'accessibilità continua garantita, la non occupazione di spazio all'interno della memoria dei dispositivi, un consumo più ridotto di dati.


4- Le PWA sono nettamente più economiche rispetto alle applicazioni tradizionali. Questo perché il tempo impiegato per la loro costruzione e per il loro aggiornamento è molto minore rispetto a quello necessario per un'app nativa. Il discorso è ancor più degno di nota se si considera che lo sviluppo di una PWA equivale alla realizzazione di tre differenti app native (ios, windows, android) a cui deve aggiungersi quella di un sito responsive.


5- Le applicazioni tradizionali non possono contare sull'indicizzazione di Google che, invece, è possibile per le PWA che in questo modo diventano molto più semplici da promuovere e garantiscono livelli di visibilità ben oltre la media di una classica applicazione tradizionale.

Esempi pratici di Progressive Web App


Andare alla ricerca di una Progressive Web App non è attualmente cosa difficile dal momento che, venute a galla le enormi potenzialità che offrono, la loro diffusione sta aumentando giorno dopo giorno. Tra tutte si sono scelte 4 PWA dal carattere ritenuto particolarmente interessante.


1- FlipKart è la Progressive Web App di un sito di e-commerce indiano. Accedendovi si nota immediatamente come il contenuto viene caricato direttamente mentre si naviga ed il tutto avviene davvero in maniera molto veloce. Caricando solo i contenuti effettivamente richiesti, poi, si nota un buon risparmio nel consumo di dati dal momento che si evita tutto quanto non strettamente necessario. Il tutto corrisponde certamente ad una migliorata esperienza dell'utente e ad una maggiore soddisfazione finale.


2- Walmart è la WPA di un sito che si occupa di promuovere il risparmio nella delicata fase degli acquisti online. L'esperienza utente è, anche in questo caso, entusiasmante e fa venir voglia di scorrere ulteriormente le pagine senza abbandonare l'app. Ecco che si riscontra qui il riscontro positivo della maggiore conversione per il proprio portale. Si è anche potuto notare come cambiando dispositivo la PWA si presenta differentemente in base alle dimensioni del display, ad esempio con una diversa collocazione delle voci di menù.


3- Anche il Washington Post, uno dei giornali più noti in America, si è lanciato nel settore delle PWA usufruendo di articoli perfettamente indicizzati su Google.


4- Product Hunt, infine, è la PWA di un sito che aiuta gli utenti e li guida nella scoperta di nuovi prodotti. L'esperienza utente, in questo caso, risulta più attiva e vivace rispetto a quanto potrebbe avvenire sul sito stesso o su un'app tradizionale con una buona soddisfazione finale da parte di ogni utente che sicuramente tornerà ad utilizzarla.

Come abbiamo visto, le PWA sembrano avere tutte le carte in regola per affermarsi come le future protagoniste del mobile marketing. E tu, cosa ne pensi? Se stai pensando di integrare un app mobile nella tua strategia aziendale, non ti rimane che contattarci: perché non giocare d'anticipo sui competitor, introducendo per primo sul mercato la tua Progressive Web App?

Email Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo.

Vuoi approfondire questo argomento con un nostro consulente?

I nostri esperti di Apps e Mobile sono a disposizione per aiutarti.