Drag

Chiama adesso!
800 93 1196

04 gennaio 2020

Progressive Web App, il futuro del web è realtà

Patrizia Maimone

Scritto daPatrizia Maimone

Tempo stimato per la lettura5 minuti

Quello delle Progressive Web App è un concetto abbastanza recente nato dall'esigenza di ottimizzare al meglio lo sviluppo e la successiva fruizione dei contenuti. Il mondo web in cui ci muoviamo ogni giorno, infatti, tende a cambiare sempre cercando nella velocità e nella dinamicità i suoi maggiori punti di forza e orientandosi sempre più verso il mobile. Proprio da questa necessità sono nate le Progressive Web App che uniscono in un solo "prodotto" le qualità migliori di un sito web e quelle delle ormai note app native. In particolare, utilizzando le migliori funzionalità web, le PWA (abbreviazione per Progressive Web App) garantiscono un'user experience di gran lunga superiore alle migliori app native. Una sorta di applicazione ibrida tra una normale pagina web e un'applicazione mobile che viene installata direttamente sullo smartphone.

Interessante il nome Progressive che descrive a pieno il funzionamento di queste applicazioni. Una volta in esse, infatti, gli utenti le percepiscono come un normalissimo sito internet per poi accorgersi, per l'appunto in maniera progressiva, che il comportamento è più vicino a quello di un'applicazione mobile.

A questo punto una domanda potrebbe sorgere spontanea: perché installare un'app nello smartphone quando si può fruire dei medesimi contenuti attraverso il sito internet? La risposta si trova facilmente in tutte quelle che sono le caratteristiche ed i vantaggi delle Progressive Web App. Esistono, non a caso, numerose testimonianze di portali di grande successo (primo tra tutti Trivago) che, appena creata la propria PWA, ha visto schizzare i risultati del proprio sito in termini di user experience.

Pare, poi, che le PWA per il solo fatto di essere accessibili mediante un indirizzo internet sono tre volte più visibili rispetto ad una classica applicazione nativa. Il miglioramento dell'esperienza utente, cui abbiamo già fatto riferimento, rende piacevole la permanenza del visitatore che rimane connesso circa 8 volte più a lungo rispetto a quanto avverrebbe sul normale sito internet. Risultati interessanti, no?



I vantaggi delle Progressive Web App per gli sviluppatori

Alla base del loro successo vi sono sicuramente i vari vantaggi offerti, per lo sviluppatore, dalle Progressive Web App. L'essere multi-piattaforma, garantire altissime performances, migliorare l'User Experience sono solo alcuni dei benefici che possiamo ottenere dallo sviluppo di una PWA per la nostra attività.

Contattaci per scoprire come creare la tua Progressive Web App

  • Le Progressive Web App sono multipiattaforma
Proprio così, il primo vantaggio di una PWA è quello di essere un'applicazione multipiattaforma e che, cioè, si adatta perfettamente allo schermo del dispositivo che stiamo utilizzando. Poco importa che si tratti di un desktop, di un tablet o di uno smartphone: usufruiremo sempre della visualizzazione perfetta! Da questo nascono altri due vantaggi importanti per chi utilizza le Progressive Web App e decide di affidare il proprio business a questa nuova tecnologia. Innanzitutto, ogni PWA è sviluppata sfruttando la tecnologia web: quanto viene offerto in termini di competenza supera indubbiamente le domande in tale senso. Generalmente, poi, diciamolo: lo sviluppo di una PWA è molto più economica rispetto a quanto avviene con un'app nativa. Pensate ad esempio che, se volessimo sviluppare un'app nativa per iOS e Android sarebbe necessario lavorare su due progetti distinti. Cosa che, per l'appunto, non avviene con le PWA.

Legato a questo concetto è il secondo vantaggio delle PWA multipiattaforma ovvero il fatto che esse vengono eseguite semplicemente mediante il browser di navigazione del proprio dispositivo. Qualunque dispositivo, infatti, che risulta connesso ad internet ne possiede inevitabilmente uno!



  • Le PWA si eseguono sul web da cui possiamo controllarne anche la distribuzione
Il fatto stesso che le Progressive Web App vengano distribuite con un indirizzo internet, per poterle utilizzare non è necessario il passaggio, spesso noioso e fonte di perdite di tempo, attraverso i classici store a cui siamo abituati per le app native, come il Play Store o l'App Store. Per chi sviluppa questa tipologia di applicazione questo è un vantaggio anche sotto il profilo economico. Non si dovranno più sostenere i costi per la distribuzione del proprio prodotto. Si pensi, ad esempio, che sul Play Store sono necessari circa 25 euro. Aspetti di personalizzazione, come il design e le funzionalità da incorporare nella tua PWA sono a completa discrezione di chi sviluppa dal momento che le PWA non vengono revisionate prima della pubblicazione.

E che dire della possibilità di aggiornare in tempo reale le Progressive Web App? Ogni modifica che apporteremo verrà registrata immediatamente dato che, come appena detto, non esiste alcun processo di revisione da superare. Azzerati, dunque, tutti i tempi di attesa a cui eravamo abituati prima dell'avvento delle PWA. Gli aggiornamenti sono più comodi anche per gli utilizzatori. Mentre, infatti, con le app native siamo costretti a scaricare un codice nuovo ad ogni aggiornamento, questo non vale per le PWA per i quali non è previsto alcun codice.

Ogni utente, poi, potrà avere un ruolo importante nel migliorare la PWA. I feedback che riterremo più opportuni e validi per il miglioramento della nostra applicazione potranno essere utilizzati in maniera più veloce. Se qualcosa, dunque, dovesse risultare particolarmente sgradita a chi ha scaricato la nostra app, potremo sistemarla immediatamente correndo ai ripari prima che il danno diventi irreparabile.

  • Le Progressive Web App sono facilissime da promuovere

Altro vantaggio da non sottovalutare: la nostra PWA guadagnerà molti punti rispetto ad una tradizionale applicazione nativa. Questo perché i contenuti che andremo a produrre saranno indicizzabili dai motori di ricerca e saranno considerati, in termini di visibilità, alla stregua di un classico sito internet. Non dovremo far altro che ottimizzare le PWA proprio come facciamo con le pagine web.






L'essere raggiungibili direttamente tramite un link fa in modo che le Progressive Web App possano apparire dappertutto. Possiamo, ad esempio, trovarle sui social media o all'interno di campagne pubblicitarie via email. Ed ecco perché, come abbiamo anticipato, un'applicazione di questo tipo garantisce una visibilità, rispetto al passato, migliorata di ben tre volte. E tutto ciò non può passare di certo inosservato!

  • Migliorato coinvolgimento degli utenti
Con le Progressive Web App è migliorato, e di molto, il coinvolgimento degli utenti con l'applicazione stessa. Questo è possibile grazie alle notifiche push che rappresentano un elemento importantissimo quando ci riferiamo alle comunicazioni con gli utenti. I risultati, d'altra parte, parlano chiaro ed hanno visto un incremento del tempo passato dal visitatore all'interno dell'app superiore al 70% ed un aumento del 50% per quel che concerne i visitatori abituali dell'app.


I vantaggi delle Progressive Web App per gli utenti

Veniamo adesso a quelli che sono i vantaggi principali per chi decide di utilizzare una Progressive Web App e di utilizzarla. Anche in questo caso siamo dinnanzi ad una moltitudine di benefici rispetto all'utilizzo del sito internet cui siamo abituati o dell'app nativa.

  • Le Progressive Web App sono intuitive e fluide
Le PWA, lo abbiamo ribadito più volte, fondano il loro motivo di esistere nel migliorare l'esperienza utente. Ed è proprio per questo che una Progressive Web App è innanzitutto fluida ed intuitiva da utilizzare. La fluidità è un'eredita che proviene direttamente dalle applicazioni native ed è possibile grazie alla memorizzazione di ogni elemento chiave dell'app nella cache e nella loro immediata visualizzazione da parte dell'utente. Addio, quindi, alle fastidiose attese cui ci siamo a volte forzatamente sottoposti in passato!

  • Le Progressive Web App sono accessibili e leggere
Non esiste alcun tipo di impedimento nell'utilizzo di una PWA. Qualunque sia il dispositivo che vogliamo utilizzare, potremo sempre accedere all'applicazione. Come abbiamo anticipato, è il browser che si occupa di gestire l'accesso per cui non dovremo installare proprio nulla. Ed anche il concetto del download è praticamente superato!

Le PWA sono strutturate in modo da risultare leggerissime. Se decideremo, dunque, di salvarle sulla home screen del nostro smartphone non dovremo preoccuparci dell'eventuale spazio residuo in memoria. Nel momento stesso in cui effettueremo l'accesso ad una pagina, saranno caricati solo i contenuti indispensabili per visualizzarla. Ecco perché una Progressive Web App pesa circa 200 volte in meno rispetto ad una normale applicazione.

  • Velocità di caricamento molto elevata

Importantissimo il vantaggio che ci fa trovare nelle Progressive Web App delle applicazioni con una velocità di caricamento molto elevata. Questo migliora moltissimo l'esperienza utente dal momento che molto spesso, se non nella totalità dei casi, erano proprio i tempi di caricamento troppo lenti che inducevano un utente ad abbandonare un'app (come un sito web).

  • PWA: funzionanti anche senza connessione (modalità offline)

Quante volte ci è capitato di non poter utilizzare un'applicazione perché in quel momento non avevamo una connessione di rete disponibile? Ebbene, con le Progressive Web App non avremo più questo problema! Queste app, infatti, funzionano perfettamente anche quando non siamo connessi. Ciò è possibile perché nel momento in cui vi accediamo sotto copertura, i dati contenuti nell'app vengono memorizzati nella cache e mostrati, di conseguenza, in seguito ad un accesso benché effettuato senza essere connessi ad internet. La quantità di informazioni da memorizzare viene decisa dagli sviluppatori al momento della creazione dell'app. Un bel passo in avanti, non pensate?


Riassumendo: i 10 Pro delle PWA

  1. Le Progressive Web App sono Progressive ovvero hanno il medesimo funzionamento per ciascun utilizzatore indipendentemente dai browser utilizzati;
  2. Sono App-Like dal momento che hanno un comportamento, per quanto riguarda soprattutto la navigazione, esattamente come un'applicazione nativa;
  3. Sono Responsive dal momento che si adattano perfettamente allo schermo del dispositivo con cui vengono utilizzate;
  4. Hanno un elevato livello di sicurezza dal momento che utilizzano i protocolli HTTPS per evitare l'utilizzo non autorizzato dei dati;
  5. Sono costantemente aggiornate grazie al lavoro dei service worker (di cui parleremo a breve);
  6. Sono ricercabili ed in quanto tali sono indicizzate dal motore di ricerca;
  7. Sono sempre riattivabili grazie alle notifiche web;
  8. Sono sempre installabili sulla home del proprio dispositivo senza la necessità, però, di passare dallo store;
  9. Sono linkabili e, quindi, possono diffondersi a macchia d'olio proprio perché sono legate sempre ad un URL che le richiama;
  10. Sono utilizzabili offline ovvero anche quando gli utenti non dispongono di una connessione ad internet attiva.




Gli svantaggi delle PWA

Che dire, invece, dei punti a sfavore dell'utilizzo eventuale di una Progressive Web App? Anche questi meritano certamente di essere citati dal momento che può sempre capitare di trovarsi difronte ad una delle situazioni indicate.

  1. Le PWA non sono supportate dalle versioni di iOS inferiori alla 11.3;
  2. Nell'utilizzare le PWA la batteria del nostro dispositivo si scarica più velocemente;
  3. Bisogna essere in possesso di un dispositivo in grado di supportarne le funzionalità;
  4. Nonostante molto pratici, i supporti per le esecuzioni offline sono comunque limitati;
  5. Mancano gli enti che controllino la qualità delle app e che ne approvino la distribuzione;
  6. Le PWA risultano poco flessibili in tutto ciò che viene considerato contenuto speciale riservato all'utente, come può essere ad esempio un semplice programma fedeltà.

Come funziona una Progressive Web App

A questo punto lo avrete capito: le Progressive Web App sono prodotti ibridi che si pongono a metà via tra i siti web e le applicazioni native dal momento che porta in sè tutte le migliori qualità degli uni e delle altre. Sono due, quindi, i concept che, unendosi, ne permettono il funzionamento con risultati irraggiungibili (almeno fino a questo momento).

Nel funzionamento delle PWA hanno un ruolo fondamentale due funzionalità insita in ogni browser moderno ovvero il cosiddetto Manifest e i cosiddetti Service Workers.

- Il Manifest è un file JSON che va a definire ogni parametro fondamentale delle Progressive Web App. Grazie ad esso è possibile stabilire quale sarà l'aspetto dell'applicazione al momento in cui verrà lanciata. Parametri che possono facilmente essere impostati sono, ad esempio, le varie icone utilizzabili, la colorazione principale e quelle secondarie o l'opportunità (o meno) di procedere con l'installazione della PWA stessa all'interno del proprio dispositivo.
All'interno del file JSON sono inseriti tutti i principali dati che identificano la PWA. In particolare:

  1. lo short name è il nome che lo sviluppatore ha voluto dare alla propria applicazione;
  2. il nome completo del sito internet cui si riferisce la PWA;
  3. la scelta dell'icona per il salvataggio dell'app nell'Home Screen dei dispositivi;
  4. lo Start URL che indica quale URL verrà utilizzato nel momento in cui si accede all'app;
  5. La tipologia di spazio che l'app deve occupare sul display. Questa può essere fullscreen (a tutto schermo), standalone (nel caso di applicazioni autonome) o minimal-ui (per le app autonome ma dotate di una serie minima di elementi all'interno dell'IU.
  6. La lingua utilizzata;
  7. Il colore di sfondo e quello della barra degli indirizzi;
  8. L'orientamento della PWA che può essere verticale o orizzontale.

- I Service Workers, invece, sono file sw.js che si occupano di tutto ciò che fa di una PWA una vera app Progressive. Si tratta di particolari script che i browser eseguono in fase di background e che consentono l'utilizzo di funzioni indipendenti da una pagina web o che non necessitano di un'azione da parte degli utenti. Una delle magie più "grandi" che i service workers consentono a tutti gli sviluppatori è proprio quella di garantire alle PWA una perfetta navigabilità anche offline.

Differenze principali tra un'app nativa e una Progressive Web App

Delineato il quadro di ciò che si nasconde dietro una Progressive Web App e dando per certa la conoscenza di ciò che, invece, sono le app native, andiamo a delineare quelle che sono le differenze principali tra la prima e le seconde. Chi la spunta tra le due? Prima di lanciarci in questa "sfida" è bene ricordare che allo stato attuale le app native risultano ancora molto scaricate e, di conseguenza, utilizzate. Tutto ciò che, però, contraddistingue le PWA rispetto alle app native porterà inevitabilmente ad un tracollo di queste ultime a favore delle prime. Un processo indubbiamente lento ma che ha già preso piede negli ultimi mesi. Detto ciò, sono almeno 5 le differenze che vale la pena sottolineare. Vediamo insieme di cosa stiamo parlando.

1. Le app native cui eravamo abituati fino a questo momento supportano solo determinati sistemi operativi. Non esiste un'app di questo tipo compatibile con tutti. Provate ad installare un'app per Mac. Questa sarà praticamente impossibile da utilizzare sui dispositivi con Windows. Le PWA, al contrario, sono multipiattaforma (come più volta ribadito) e sono in grado di funzionare sui più disparati browser senza alcun tipo di difficoltà.

2. Le applicazioni native funzionano solo ed esclusivamente se vengono dapprima scaricate e successivamente installate sul nostro dispositivo. Limite, questo, inesistente per le PWA.

3. Le Progressive Web App sono molto più efficienti rispetto alle app native. Sono, infatti, in grado di funzionare su richiesta, di garantire un utilizzo continuo, di consumare una quantità di dati minima e di occupare uno spazio in memoria davvero esiguo. In questo, dunque, le PWA sembrano vincere su tutta la linea.

4. Un'app nativa costa certamente più di una Progressive Web App che, dunque, va premiata proprio perché più economica. I costi di sviluppo che vi si nascondono, infatti, sono minori rispetto a quelli per le app tradizionali.

5. Le PWA vengono indicizzate da Google e dai motori di ricerca in genere. Ciò non è possibile, invece, con una classica app nativa.

Insomma, in definitiva, e dati alla mano, la spuntano proprio le PWA su tutta la linea!!


In conclusione..


Concludendo, abbiamo visto come la tecnologia alla base delle Progressive Web App sia quanto di più interessante ci sia al momento nel settore. Non rimane che chiederci, a questo punto, se ci attende un futuro basato sul Progressive o meno. E non è semplice fornire una risposta dal momento che decidere lo sviluppo di una Progressive Web App è un passo che va fatto dopo aver analizzato in progetto in ogni suo aspetto. Non dimentichiamo che le PWA sono indicizzabili e, per questo, oggetto di studio da parte dei motori di ricerca. Fare un lavoro incompleto potrebbe, dunque, rivelarsi più dannoso che altro. Detto ciò, non c'è una tattica definitiva ma sono chiare, anzi chiarissime, tutte le potenzialità delle PWA. Non a caso, il motto delle Progressive Web App è proprio "Mobile First" e ciò la dice lunga su quanto sta avvenendo in un settore che è già partito alla conquista del mondo dato che si stima che il 61% della popolazione mondiale, nel 2021, avrà uno smartphone connesso alla rete.


Contattaci per maggiori informazioni sullo sviluppo di Progressive Web App