Progressive Web App: tutto quello che bisogna sapere

L'avvento delle Progressive Web App
Più chiare, più pulite e soprattutto più intuitive, queste nuove interfacce si sono poi fatte strada anche su schermi di dimensioni più grandi. Questo ha fatto si che adesso per catturare e mantenere alta l'attenzione degli utenti, bisogna offrire una UX pressoché perfetta su qualsiasi tipo di dispositivo.
Le Progressive Web App sono qui proprio per questo, avendo loro la capacità di combinare il meglio delle app native e della tecnologia web, offrendo agli utenti una user experience senza precedenti. Inoltre, potendovi accedere attraverso un URL, ti consentono di avere una visibilità 3 volte maggiore rispetto alle applicazioni native. La user experience offerta (menzionata poc'anzi) porta gli utenti a restare connessi più a lungo (8 volte di più) rispetto ad un sito web classico. Notevole, vero?
Per comprendere appieno il concetto di Progressive Web App, e il perché delle loro prestazioni imbattibili, è necessario conoscere ciò che sta alla base di tutto ciò.
1) Le promesse delle PWA
1. Maggiore visibilità ed engagement
a. Multi-piattaforma: guadagni tempo e denaro
Le PWA possono essere utilizzate su qualsiasi tipo di dispositivo, adattandosi facilmente allo schermo dal quale vi si accede. Questo funzionamento presenta due vantaggi:

Il secondo vantaggio si basa sull'idea che le Progressive Web App si eseguono attraverso uno strumento universale: il browser di navigazione. Tutti i dispositivi connessi alla rete ne posseggono uno: che si parli di mobile, di tablet o di desktop non cambia nulla. Bisogna nuovamente pensare poi a un punto importante, ovvero che sviluppando un'unica app di questo tipo si risparmia non poco.
b. Si esegue sul web: tieni sotto controllo la tua app e la sua distribuzione
Le Progressive Web App vengono distribuite alla pari di un sito web, dunque attraverso un URL richiamato da un browser. Come puoi vedere, abbiamo di fronte un grande vantaggio delle PWA: non bisogna passare da App Store o Google Play per distribuire la tua app.
Perché questo dovrebbe rappresentare un vantaggio?
Prima di tutto per quel che riguarda il costo: non c'è alcun costo addizionale necessario per poter pubblicare la tua app (a differenza delle app native: 25€ per Google, 99$/anno per Apple).
Inoltre sei totalmente libero di agire per ciò che riguarda il design, le funzionalità e i contenuti della tua app, puoi infatti pubblicarla senza dover passare da alcuna revisione.
Questo secondo punto ci permette di evidenziare un vantaggio considerevole di questa modalità di distribuzione: l'aggiornamento della tua PWA. Tutte le tue modifiche vengono aggiornate immediatamente, non devi aspettare o passare attraverso una revisione appunto. Bisogna poi notare che le applicazioni native sono fatte di un codice, questo significa che ogni volta che viene fatto un aggiornamento i tuoi utenti devono scaricare questo nuovo codice sui loro dispositivi per poterne usufruire. Questo non avviene appunto con le Progressive Web App.
I tuoi utenti possono poi giocare un ruolo importante nel miglioramento costante della tua app. Prendere in considerazione i loro feedback è molto più veloce con una PWA, visto che puoi apportare delle modifiche istantanee a seconda dei loro feedback. Puoi effettuare test, analizzare le relative statistiche e capire dunque cosa bisogna migliorare. In parole povere, con una Progressive Web App, se qualcosa non quadra o non piace ai tuoi utenti, puoi sistemarla in modo rapido.
c. Facile da promuovere: guadagna in visibilità
La totalità dei contenuti prodotti per la tua Progressive Web App è indicizzabile dai motori di ricerca. La tua PWA ha su Google la stessa visibilità di un sito web, il tutto è regolato dalle stesse di tecniche di ottimizzazione. Il livello di accessibilità offerto da una PWA è un qualcosa che il tuo business non può farsi scappare!
Come accennato in precedenza, le PWA sono accessibili tramite un URL proprio come accade con un sito web. Questo ti la possibilità di accedere a tutta una serie di strumenti di marketing: dall'indicizzazione organica, ai link sponsorizzati, al retargeting.

d. Funzionalità avanzate: coinvolgi il tuo pubblico
Un'altra caratteristica fondamentale delle PWA è la loro capacità di coinvolgere il proprio pubblico. Fino a poco tempo fa solo le app native erano in grado ricevere notifiche push, adesso tutto questo è possibile anche per questa nuova tecnologia.
Avremo modo di approfondire il tutto più avanti, possiamo però già dirvi che le app che hanno abilitato questa funzionalità, hanno visto aumentare del 72% il tempo di navigazione al loro interno da parte degli utenti e del 50% le visite ricorrenti (Why build a PWA? By Udacy).
Non si può discutere il fatto che le notifiche push sono un elemento fondamentale quando si parla di comunicazione con gli utenti. Queste sono adesso disponibili anche su desktop: perché non approfittare di tutto ciò?
2. Gli utenti beneficiano di un tipo di esperienza unico
a. Fluida, intuitiva: come un'app nativa
Una PWA è prima di tutto un'esperienza per l'utente. Pertanto, con i bisogni dell'utente ben chiari in testa, gli sviluppatori si rivolgono alla tecnologia web e alle 'best practices' per stabilire dei nuovi standard per tutti i dispositivi.
Dal punto di vista pratico, le PWA emulano la navigazione delle app native con l'obiettivo di offrire una navigazione il più possibile fluida (proprio come un'app). Per gli utenti ricorrenti significa che gli elementi chiave dell'applicazione vengono immediatamente visualizzati, in quanto già memorizzati in precedenza nella cache. Per garantire delle performance ottimale i contenuti vengono dunque recuperati a ogni utilizzo. Avremo modo di soffermarci anche su questo punto più avanti.
Un prodotto pensato partendo dal mobile, le Progressive Web App offrono una user experience perfetta portando i codici di sviluppo mobile a tutti i tipi di schermo. Questo nuovo concept risulta così perfettamente in linea con le attuali aspettative degli utenti.
b. Accessibile e leggera: senza impedimenti di alcun tipo
Con le Progressive Web App i tuoi utenti si trovano a un semplice clic dai tuoi contenuti, il tutto è diventa quindi facilmente accessibile su qualsiasi dispositivo (mobile, tablet, desktop, laptop). Non importa di che dimensioni sia lo schermo, vi si accede comunque da browser di navigazione. Le PWA non richiedono alcuna installazione, lo step del download dell'app può dirsi quindi superato.

La loro innegabile leggerezza toglie qualsiasi genere di preoccupazione relativa allo spazio di archiviazione del dispositivo, i tuoi utenti non dovranno dunque più preoccuparsi di questo. E anche quando un utente tenta di accedere ad una data pagina, vengono caricati esclusivamente i contenuti necessari alla visualizzazione della stessa. Giusto per dare un'idea: una PWA occupa 200 volte meno spazio sul telefono di un'applicazione iOS.
c. Veloce: caricamento istantaneo
Le PWA sono state pensate con l'idea di mettere l'utente al primo posto, in modo da garantirgli sempre la migliore esperienza possibile. Basta vedere come gli aggiornamenti dinamici vengono eseguiti, ovvero facendo in modo che l'utente abbia sempre accesso ai contenuti più recenti. Le PWA sono in grado di eseguire un codice JavaScript anche in background o senza dover aprire alcuna pagina web nel browser di navigazione. In questo modo è possibile un aggiornamento regolare dell'app, consentendo all'utente di avere il tutto disponibile appena vi accede. Le performance delle Progressive Web App sono poi state migliorate grazie al caricamento iniziale delle risorse statiche e di pagine intere.
Sono finiti i tempi dei caricamenti senza fine. I tuoi utenti potranno navigare nella tua PWA con una fluidità e ripidezza ineguagliabile.
d. Funzionamento offline: zero frustrazioni per l'utente
Una delle caratteristiche principali di una Progressive Web App è quella di poter funzionare in assenza di una connessione di rete affidabile. Quando l'utente accede per la prima volta, il sistema di messa in cache permette di immagazzinare localmente una parte o la totalità del contenuto disponibile. Così, quando ci sarà un secondo accesso, l'utente potrà visualizzare questi contenuti e navigare all'interno della PWA anche senza connessione.

2) Il funzionamento di una PWA
1. Come una web app diventa Progressive?
a. Le sfide delle Progressive Web App
Per potere ottenere la qualifica di PWA un'applicazione deve assolutamente rispondere ad alcuni specifici criteri, che gli permettono di fornire una User Experience senza paragoni.
Per definizione deve quindi essere:
- Progressive - deve poter funzionare per tutti gli utenti, indipendentemente dal tipo di browser utilizzato. Chiaramente più questo è avanzato, più evolute saranno le funzionalità offerte dalla PWA.
- Responsive - deve adattarsi a tutti i tipi di schermo: desktop, smartphone, tablet etc...
- Indipendente dalla rete - deve poter funzionare in assenza di connessione o con una connessione di non ottima qualità.
- App like - deve offrire la stessa esperienza di una app nativa, tutto questo grazie all'App Shell che distingue tra funzionalità dell'app e contenuti.
- Aggiornata - deve offrire contenuti sempre aggiornati grazie al processo di aggiornamento effettuato dal service worker
- Sicura - deve funzionare in HTTPS per far si che gli scambi tra il client e il server avvengano in sicurezza.
- Trovabile - deve poter essere indicizzabile sui motori di ricerca e qualificata come app grazie al JSON Manifest.
- Coinvolgente - deve poter facilitare il coinvolgimento degli utenti grazie a funzionalità come le notifiche push.
- Installabile - deve poter essere salvata sulla home screen degli utenti, senza dover più passare dagli store.
- Facile da condividere - deve poter essere condivisa tramite un semplice URL, senza il bisogno di un'installazione complessa.
b. Il funzionamento delle Progressive Web App
Le PWA sono sviluppate a partire dal linguaggio web lato client, il che permette di gestire l'interfaccia utente di ogni pagina.
Qui in GoodBarber ad esempio, abbiamo scelto di sviluppare Progressive Web App in JavaScript e di utilizzare Angular 4.0. Si tratta di un framework creato da Google che fornisce agli sviluppatori gli strumenti necessari a concepire una user experience web paragonabile a quella delle app native.
Abbiamo scelto di creare delle app isomorfiche, ovvero delle applicazioni in grado di eseguire il codice JavaScript sia dal lato server (Server Side Rendering - SSR) che dal lato client (Client Side Rendering - CSR).
Qui puoi trovare alcune informazioni su come funziona una Progressive Web App in modo tale da poter comprendere tutti i vantaggi di questo meccanismo:
La prima pagina dell'app viene generata sul lato server (SSR), permettendo così ai robot dei motori di ricerca di indicizzare una pagina già completamente costruita. L'applicazione esegue anche calcoli all'interno del browser (CSR), permettendogli di funzionare anche in assenza di rete, dal momento che tutti i JavaScript della PWA sono stati scaricati in background e salvati nella cache.
c. L'architettura di una Progressive Web App
Come menzionato precedentemente, le PWA funzionano con la combinazione di concept esistenti:

- App Shell
L'App Shell permette (a partire dal secondo accesso all'applicazione) una rapida visualizzazione dell'applicazione, il minor consumo possibile di banda, alle risorse statiche di essere caricate dalla cache locale e, soprattutto, la separazione tra contenuto e navigazione, consentendo all'app di caricare in brevissimo tempo.
- Service Worker
- JSON Manifest
I Service Worker, come si diceva poc'anzi, sono un elemento chiave della PWA e necessitano dunque di un'attenzione particolare. Da un punto di vista tecnico, un Service Worker è uno script eseguito in background dal browser di navigazione. È capace di eseguire azioni in risposta a richieste di rete o informazioni trasmesse dal sistema operativo (cambi di connettività ad esempio). Permette agli sviluppatori di creare funzionalità avanzate come notifiche push o gestione della cache. Una volta che il service worker è installato nel browser di navigazione, esegue le attività assegnategli in modo indipendente, anche se l'utente non sta navigando sul sito. Il funzionamento di un service worker è simile a quello di un server proxy; fa da intermediario tra il browser e la rete in modo da rendere migliore la user experience, in particolare immagazzinando i dati di una pagina web in cache.

Nel caso delle Progressive Web App di GoodBarber ad esempio, questo consente di ottimizzare il modo in cui il browser fa visualizzare un font, in quanto questi vengono scaricati e memorizzati fin dalla prima visita dell'utente. Per le visite future, il tipo di font verrà processato localmente, il che permetterà una visualizzazione più rapida dell'app.

Come puoi vedere, Apple non ha ancora aperto le porte del suo browser di navigazione ai service worker e dunque a tutta la potenza delle PWA. Ma la buona notizia è Safari e iOS Safari saranno presto anche loro nella lista dei browser perfettamente compatibili. Parlando invece di Edge, i service worker sono già compatibili con Android. Presto ci saranno ulteriori novità a riguardo.
Come dicevamo, i service worker permettono la creazione di funzionalità avanzate, come ad esempio la sincronizzazione in background, consentendo all'utente la visualizzazione di dati sempre aggiornati (grazie appunto all'aggiornamento regolare di questi dati in background). Tale sincronizzazione permette di avere dunque una user experience fluida e un'app molto più veloce.
L'utilizzo dei service worker implica il rispetto di specifiche condizioni per le PWA. I service worker sono infatti in grado di eseguire delle operazioni di una certa potenza, pertanto i dati degli utente devono essere assolutamente criptati al fine di garantire un corretto funzionamento del tutto.
L'installazione di un servizio worker, indispensabile per poter utilizzare le principali funzionalità di una PWA, può avvenire soltanto se la pagina web è servita in HTTPS. Si tratta di una condizione necessaria.
2. Le funzionalità di una PWA
a. Notifiche push
Questa funzionalità è possibile (anche in questo caso) grazie alla capacità dei Service Worker di lavorare in background. Per far si che questo accada, due elementi complementari lavorano insieme: il Push API e il Notification API.
- Il Push API viene utilizzato per segnalare al Service Worker la presenza di una notifica;
- Il Notification API viene utilizzato per attivare la visualizzazione della notifica sul browser.

La possibilità di usufruire delle notifiche push su web app rappresenta una rivoluzione che non fa altro che assottigliare sempre di più il confine tra queste e le app native.
Nel caso di GoodBarber, a permettere la gestione e la visualizzazione delle notifiche tramite i Service Worker, è uno specifico servizio che si chiama FireBase.

b. Funzionamento offline
L'accessibilità offline dipende anche dal Service Worker, che una volta installato nel browser di navigazione, gestisce il caching dei file delle app nella cache, intercetta le richieste di rete ed esegue di conseguenza una serie di azioni. Questa funzionalità consente di consultare l'app senza connessione e quindi di migliorare la user experience. Anche in presenza di connessione, alcuni file non dovranno essere caricati dal server web visto che sono già stati memorizzati localmente.

I service worker vennero originariamente pensati come una versione migliorata di Apache, un'interfaccia che permetteva di immagazzinare i file dell'app nella cache e di utilizzarli eventualmente in assenza di rete. I service worker danno agli sviluppatori web la possibilità di fornire alle loro app un funzionamento offline ottimale.
In termini di funzionamento, come si accennava poc'anzi, questi vanno difatti ad intercettare le richieste di rete, quindi ad effettuare le azioni più appropriate: questo a seconda della presenza o meno di connessione e della disponibilità di risorse aggiornate sul server.
Ecco un esempio di una strategia di caching che gli sviluppatori possono implementare attraverso i service worker e che, tra l'altro, viene utilizzata nelle PWA di GoodBarber: Cache then Network.

c. Home screen e Splash screen
Questo è possibile grazie al Manifest JSON che è basicamente un file descrittivo che permette agli sviluppatori di tenere sotto controllo il modo in cui la Progressive Web App si comporta.
Il Manifest JSON consente dunque di salvare l'app sulla home screen direttamente dal browser. L'applicazione avrà in questo modo un proprio nome ed icona.
Il Manifest consente inoltre di visualizzare uno splashscreen che l'utente vedrà all'apertura dell'applicazione, o mentre i dati vengono scaricati o recuperati dalla cache.

d. Geolocalizzione
È possibile monitorare la posizione dell'utente e di essere notificati se c'è qualche cambiamento. L'API Geolocation funziona solamente su app in HTTPS, permettendo di ottenere preziose informazioni in totale sicurezza.
Grazie a tutto questo è possibile realizzare delle strategie di fidelizzazione fino ad oggi non possibili su web.

e. Cattura immagini e video
Fino a poco tempo fa, l'unico modo per manipolare immagini e video su apparecchi mobili era tramite un elemento HTML standard che permetteva di lanciare delle app 'fornitrici di immagini', come la fotocamera. Non c'era altro modo se non quello di uscire dalla web app.
Adesso l'API Media Capture permette alle web app di avere accesso diretto al flusso audio e video del dispositivo (come la fotocamera e il microfono). Questi flussi possono essere letti e manipolati dalla web app: è possibile dunque scattare una foto e registrare un video, senza uscire dal browser di navigazione.

f. Bluetooth
Le Progressive Web App hanno anche la possibilità di comunicare con dispositivi Bluetooth in modo sicuro. Fino ad oggi prerogativa esclusiva delle app native, l'uso del bluetooth nel web è stato reso possibile dall'Api Web Bluetooth.
Questa API consente la comunicazione tra un'applicazione web e un dispositivo bluetooth: l'app chiede al browser di navigazione di far visualizzare la lista dei dispositivi bluetooth presenti nelle vicinanze; l'utente sceglie un dispositivo e chiude la finestra di dialogo. Per far si che non ci sia alcun rischio di sicurezza, l'applicazione deve essere assolutamente in HTTPS per poter fare uso dell'API Web Bluetooth.
Il futuro delle app
In termini di utilizzo il numero di utenti di smartphone non smette di aumentare: si è infatti passati dal 56% della popolazione mondiale nel 2013, al 66% nel 2018. E se oggi il 57% degli utenti naviga sul web su mobile, le previsioni ci dicono che nel 2021 questi arriveranno ad essere il 61%.
Un altro indicatore a sostegno di questa tendenza è la recente mossa di Google, che ha modificato il suo algoritmo favorendo i siti web che hanno la loro versione mobile ben curata. Ancora un po' di tempo e Google arriverà a classificare le sue pagine basandosi su questa versione, per comprendere i dati strutturati e mostrare estratti del sito web nei risultati di ricerca. Lo vedi dunque il collegamento con le Progressive Web App? Questa è la visione che Google ha del Web del futuro: decisamente mobile.
Inoltre il comportamento degli utenti sembra andare sempre più verso una sorta di pigrizia nei confronti del processo di installazione di un'app. E anche se i proprietari di smartphone adorano la UX delle app native, solo un terzo di questi scarica abitualmente delle applicazioni dagli store.
Sono tutti segnali a favore delle Progressive Web App, come nuova forma di utilizzo di web e mobile. I fornitori di browser di navigazione lo hanno capito da tempo e stanno lavorando per implementare al meglio tutte le tecnologie necessarie al loro funzionamento. Si arriverà dunque presto ad una PWA universale.
Ci troviamo pertanto di fronte un trend che andrà a rivoluzionare il nostro modo di accedere alla rete. Ed è in questa direzione che bisogna iniziare a guardare per poter disporre degli strumenti migliori per lo sviluppo del tuo business.
Design



