Con Progressive Web App - PWA si indica una serie di funzionalità che arricchiscono l’esperienza utente mentre naviga un sito web con lo scopo di renderlo simile ad un’applicazione nativa.
La maggioranza delle web app che realizza Bitforce sono PWA ed abbiamo una vasta esperienza in questo ambito.
Grazie al file manifest.json è possibile indicare al browser che la web app è installabile sul device.
Questo file contiene molte informazioni come il nome e logo dell’app che appariranno nell’home screen del device, il colore della welcome screen, informazioni su come mostrare l’applicazione una volta avviata, ex in full screen senza la barra degli indirizzi ed altri meta dati.
Grazie ai service workers è possibile cachare in maniera avanzata qualsiasi tipo di asset: JS, CSS, HTML, immagini, fonts e chiamate XHR. Questa tecnologia permette di bypassare completamente la rete essendo quindi più veloce delle cache HTTP oltre a funzionare anche in modalità offline.
I vantaggi di utilizzare un service worker sono:
L’app riceve una risposta immediata per gli assets che sta richiedendo, ottenendo un tempo di time to interactive TTI molto basso.
In caso di connessione lenta o intermittente i dati verranno forniti prima dalla cache, fornendo un’esperienza di navigazione fluida, stabile e veloce.
Le politiche per accedere alla cache del service worker sono varie ma in generale una volta richiesti gli assets e serviti dalla cache, questi vengono aggiornati facendo una chiamata reale al server per avere sempre una copia fresh.
Nel caso venga effettuato un nuovo deploy dell’app, sono previsti meccanismi per invalidare completamente la cache.
La possibilità di utilizzare un sito web anche offline è un’altra rivoluzione che fa parte del pacchetto PWA, anche questa volta a diminuire il gap tra app nativa e web.
Provate a navigare qualche pagina della PWA di Starbucks e poi mettere il vostro telefono in modalità aereo. Potrete visitare nuovamente le pagine già aperte ed effettuare un ordine, che verrà poi processato appena tornerete online. Fantastico!
Anche in questo caso lo strumento che rende possibile tutto ciò è il service worker
Un’altra funzionalità che rende le PWA simili ad un app nativa è la possibilità di inviare notifiche push native sia a PC che a dispositivi mobili. Questo è possibile grazie alle web push API in combinazione con i service worker.
Quando l’utente fa tap sulla notifica viene portato automaticamente alla pagina di riferimento esattamente come succede con un’app nativa. Adesso il web ha uno strumento in più per aumentare il ritorno dei visitatori ed trasmettere informazioni importanti ed immediate.
Per ottenere una valida UX mobile partendo da un sito web non basta essere responsive nascondendo qualche contenuto e aggiustando un po’ il layout. La UI/UX deve essere progettata completamente in versione mobile per offrire una navigazione semplice ed ingaggiante. Un ottimo esempio e’ la PWA di twitter che si mostra in maniera totalmente diversa se visualizzata su mobile. Questo permette di caricare meno contenuti e quindi di avere un app più reattiva e leggera a beneficio di tempi di caricamento e UX. Questo è un ingrediente fondamentale per una PWA di successo.
Pinterest ha registrato un aumento dell'engagement dell'60%, 44% dell'aumento in fatturato per AD generati dall'utente ed un aumento del 40% del tempo speso nel sito.
Tinder ha ridotto il tempo di caricamento da 11.91s a 4.69s. La PWA e' il 90% più piccola rispetto all'app Android e l'engagement è aumentato in tutte le sezioni dell'app.
Trivago grazie alla nuova PWA ha ottenuto un incremento del 97% di click sulle offerte di hotel. Gli utenti che vanno offline possono continuare a visitare il sito ed il 67% di loro continua a navigare il sito quando tornano online.
Incrementa le performances del tuo business!