Cosa sono le PWA e quali vantaggi portano alle aziende

Progressive Web App, o più comunemente PWA, è un termine coniato da Google: si riferisce ad applicazioni web che vengono sviluppate e caricate come normali pagine web, ma che si comportano in modo simile ad applicazioni native quando vengono utilizzate su un dispositivo mobile.

Le PWA non sono quindi delle vere e proprie app tradizionali bensì un ibrido tra i normali siti web e le applicazioni native. Questo genere di modello cerca infatti di combinare le funzionalità offerte dalla maggior parte dei browser con i benefici offerti dall’utilizzo mobile.

Come nascono e quali sono le caratteristiche delle PWA?

Nel 2015 lo sviluppatore di Google Chrome Alex Russell e Frances Berriman coniarono il termine Progressive Web App per descrivere app che sfruttavano le funzionalità offerte dai moderni browser, che consentono agli utenti di promuovere le web app affinché si comportino come applicazioni native nel sistema operativo dei loro device.

Le caratteristiche di una PWA sono:

• Progressive: funzionano a prescindere dal browser scelto perché sviluppate con principi di miglioramento progressivo;
• Responsive: si adattano alle varie dimensioni dello schermo del device utilizzato;
• Indipendenti dalla connessione: i Service worker permettono di far funzionare     l’applicazione offline, anche in mancanza quindi di connessione o con connessioni di bassa qualità;
• App-like: in termini di navigazione e interazione si comportano come se fossero delle app native;
• Aggiornate: grazie al processo di aggiornamento offerto dai Service worker, le informazioni delle WPA sono sempre aggiornate;
• Sicure: sono sottoposte a protocollo HTTPS per evitare l’esposizione di     informazioni o che i contenuti vengano alterati;
• Discoverable: vengono identificate come “applicazioni” grazie al manifesto W3C e al Service worker registration scope, che consente ai motori di ricerca di trovarle e indicizzarle;
• Riattivabili: grazie a funzioni quali ad esempio le notifiche push, sono facilmente riattivabili;
• Installabili: consentono di salvare le app che l’utente considera più utili senza che si debba affrontare tutti i passaggi necessari sull’app store;
• Linkabili: sono facilmente condivisibili tramite l’URL e non richiedono complesse installazioni.

Il termine Progressive si riferisce al fatto che queste app, dal punto di vista della User Experience, possono abilitare una serie di funzionalità aggiuntive alle normali pagine web a seconda delle funzionalità offerte dal dispositivo. Un esempio fra tutti, il browser può proporre all’utente mobile di salvare la pagina nella schermata home del proprio dispositivo, facendola percepire come un’app a tutti gli effetti.

I pro delle PWA

Molte aziende hanno riscontrato notevoli miglioramenti in termini di prestazioni.

La pubblicazione di una PWA infatti funziona allo stesso modo di qualsiasi altra pagina web (e dal 2016 vengono implementate in Chrome). Questo vuol dire, in altre parole, che sono un’evoluzione delle tecnologie esistenti.

Come tali non richiedono installazioni separate o implementazioni ulteriori ma, comportandosi come delle vere e proprie app native, spingono l’utente a rimanere più a lungo sul sito e/o favoriscono la conversione di nuovi utenti.

È possibile riconoscere una PWA da un semplice elemento presente sulla barra di ricerca del browser:

Cliccando sull’icona + è possibile salvare sul proprio dispositivo la pagina e navigarla anche in assenza di rete.

Questo simbolo non appare nella barra di navigazione quando utilizziamo il dispositivo mobile, ma è possibile salvare la PWA attraverso la funzione “Aggiungi a schermata Home”.

Quali sono i criteri tecnici di base perché un sito venga considerato una Progressive Web App?

I criteri sono descritti dallo stesso Russell, Le PWA:

• devono essere esposte da una sorgente sicura HTTPS, con la visualizzazione del lucchetto verde nel browser;
• devono poter essere caricate ed eseguite anche se il device è offline;
• devono avere un Web App Manifest di riferimento. Il Web App Manifest è un semplice file Json che contiene le informazioni di base della PWA e indica al browser come deve comportarsi quando questa viene salvata sul device;
• devono avere un’icona grande almeno 144*144px in formato .png.

Utilizzo offline della PWA

Come abbiamo avuto modo di accennare, le tecnologie che solitamente vengono utilizzate sono:

• Il Manifesto    
• I Service workers (quelli che rendono possibile l’utilizzo offline)    
• Architettura della shell delle Applicazioni

L’utilizzo offline è reso possibile dai Service workers. Questi forniscono un proxy di rete implementato nel browser e si interpongono tra la connessione di rete e il terminale che fornisce il contenuto della PWA.

Lo fa utilizzando i meccanismi di cache in maniera efficiente, consentendo quindi un comportamento privo di errori durante lunghi periodi di assenza di rete.

L’architettura della shell invece, che non è altro che la struttura dell’interfaccia di base memorizzata localmente nella cache del browser del mobile, fornisce un frame statico iniziale nel quale il contenuto può essere caricato, consentendo agli utenti di interagire con l’app nonostante i diversi livelli di qualità della connessione di cui dispongono.

Meglio una PWA o un’app nativa?

La risposta a tale domanda, come sempre, dipende dagli obiettivi che si vuole raggiungere.

È da preferire una PWA se:

• L’app deve essere facilmente distribuita ad un’ampia utenza
• Il budget a disposizione non è elevato
• C’è poco tempo a disposizione per il go-live
• Si vuole avere una corretta indicizzazione
• È necessaria la compatibilità multiforma
• Sono necessari più aggiornamenti in tempi ristretti.

È meglio un’applicazione nativa se:

• È necessario il passaggio sugli store (ad esempio per avere traccia del numero dei download)
• Reattività e velocità sono caratteristiche fondamentali per il successo dell’app
• L’app richiede un utilizzo importante delle funzionalità hardware del dispositivo
• Il modello di business è basato su elementi quali ad esempio il costo per il download 
• L’app deve essere integrata con altre app di terze parti

Progressive Web App famose

In giro per il web ci sono più PWA di quante se ne possa immaginare. Ne sono un esempio Google Maps Go, Uber, Tinder o anche YouPorn, che ha optato per la PWA per offrire una User Experience migliore bypassando i limiti che Apple e Google pongono sui contenuti pornografici all’interno degli store.

YouPorn sfrutta il potenziale delle PWA per migliorare l’esperienza utente. Se infatti in questo caso non è possibile utilizzare la sua Progressive Web App in assenza di connessione a internet, risultano decisamente superiori navigabilità e fruibilità nella navigazione da dispositivi mobile.

Anche Pinterest è una PWA: questo Social network ha scoperto che solo l’1% degli utenti mobile si convertiva con registrazioni, accessi o installazioni dell’app a causa delle scarse prestazioni della stessa sui dispositivi mobili. Comprendendo le grandi opportunità offerte, l’azienda ha ricostruito il sito web utilizzando la tecnologia PWA.

Questo ha portato a numerosi risultati positivi: il tempo trascorso on site è aumentato del 40%, le entrate generate dagli utenti sono aumentate del 44% e l’engagement è aumentato del 60%.