PWA - Progressive Web Apps

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.

PWA - scopriamole meglio

Installabile

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.

Caricamenti istantanei grazie ai service workers

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.

Navigazione offline grazie ai service workers

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

Notifiche push native

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.

Esperienza utente orientata al mobile

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.

Casi di studio