NewsTech

PWA – Progressive Web Application

PWA - Progressive Web Application 1

In questo articolo illustreremo perchè ci sono svariati vantaggi nel rendere un sito una Progressive Web App.

Tuffiamoci nel mondo delle progressive web app rispondendo prima di tutto ad una  domanda importante: dove nascono le PWA?
Le Progressive Web App, esplose all’interno del Google I/O 2016, uniscono il Web alle App native, aiutando tutti gli sviluppatori che operano nel mondo mobile e Web a oltrepassare nuovi confini per avere piattaforme integrate e funzionali per utenti e imprese.PWA - Progressive Web Application 2
Una Progressive Web App (PWA) usa le moderne capacità del Web per fornire una User Experience (UX) di livello App-like. In particolare le PWA rappresentano un set di esperienze e tecnologie che combinano quanto di meglio c’è sul mercato in ambito sviluppo Mobile e Web che creare Web Application moderne.

PWA - Progressive Web Application 3

PWA vs Native Apps

Prima di entrare nel dettaglio delle PWA, facciamo un passo indietro e confrontiamo le applicazioni web “tradizionali”  con le native.
Bene, iniziamo con una statistica che potrebbe scoraggiare chiunque a optare per una soluzione web.

PWA - Progressive Web Application 4

Come si evince l’utente medio trascorre circa l’87% del proprio tempo in app native mentre solo il 13% accede alla rispettiva versione web.

Quindi questo potrebbe essere uno dei motivi principali per non costruire un’app web mobile.

Ma scopriamo perchè un’app nativa è migliore di una web app:

PWA - Progressive Web Application 5

Se potessimo “trasferire” queste feature sulle web app?

Diamo prima un’occhiata ad alcuni argomenti contro le app native.

PWA - Progressive Web Application 6

Per costruire un’app nativa bisogna avere conoscenze approfondite su diversi ambiti (iOS e Android).
Altro fattore importante è che l’80% del tempo speso da un utente è sulla top 3 delle app del proprio smartphone, mentre le altre hanno un tasso di raggiungibilità pari allo 0%.

Analizziamo attraverso un’altra statisitica, il tasso di raggiungibilità.

PWA - Progressive Web Application 7

Statistica mensile di utenti attivi su 1000 app

Ci sono 3.3 milioni di utenti sulle app web mentre 8.9 milioni sulle app native.

Potrebbe essere un statistica vantaggiosa per le app native ma non lo è.
Il tempo che gli utenti spenderanno sarà solo su una dedicata porzioni di app (appunto la top 3).

Discorso diverso per le web app che hanno una tasso di raggiungibilità molto più ampio.

Inoltre le web app hanno un enorme vantaggio: non hanno bisogno di essere installate attraverso un’app store.

Usando il famoso motore di ricerca Google, la ricerca è facile e immediata. Oltre, aggiungendo tale ricerca ai nostri bookmark, abbiamo un accesso dedicato da consultare successivamente.

Se uniamo i vantaggi di entrambi i mondi … ecco le PWA.
Quindi potremmo azzardare dicendo che non è per niente male

PWAs Vs Native Apps Vs Traditional Web Apps

PWA - Progressive Web Application 8

Compariamo ora in primis una native app e una web app tradizionale attraverso la capability (abilità) e il reach (raggiungibilità).

Le app native hanno capacità eccezionali in quanto possono sfruttare il sistema operativo al massimo e accedere a tantissime funzionalità ma avranno un alto tasso di raggiungibilità solo su pochissime apps.

Un’app web tradizionale ha il vantaggio di essere raggiunta facilmente (attraverso una ricerca su Google) ma ha feature limitate.

PWA combina i vantaggi di entrambe le soluzioni e quindi vale la pena approfondire.

Potremmo elencare le potenzialità di una PWA attraverso i seguenti punti:

Indicizzabili: le PWA sono indicizzabili da Google e quindi possono posizionarsi e ricevere traffico organico.

Progressivefunzionano per ogni utente, indipendentemente dal browser che utilizzano poiché sono costruite sulla base del principio del “progressive enhancement” ( più funzioni offre il browser più funzioni offre la Web App );

Accesso rapido: l’icona dell’app sarà inserita nel telefono insieme alle altre app, basta un tap per avviare il sito.

Sicure: devono essere servite per forza da una connessione HTTPS per prevenire lo snooping e per garantire che il contenuto non sia manomesso.

Navigazione quasi istantanea: le PWA possono usare un sistema di cache interna al telefono per velocizzare drasticamente la navigazione.
Nel momento in cui si preme il bottone aggiungi, la PWA crea un pacchetto APK e lo installa nel tuo telefono. In questo pacchetto è possibile inserire file per la cache locale: pagine HTML, file CSS e JS, immagini e tutto quello che serve al rendering di una pagina web per poter essere fruita offline.
Quando si lancia l’app sul telefono non verranno scaricati dalla rete i file che sono già in cache. Si, hai capito bene, se  in cache  ci sono  i file critici, il caricamento della pagina sarà praticamente istantaneo con enormi vantaggi sulla user experience.

Navigazione offline: grazie ai Service Worker e salvando in cache immagini, file CSS e JS, le pagine saranno navigabili anche offline.

Massima usabilità ed esperienza utente: le Progressive Web App possono essere impostate per essere visualizzate a tutto lo schermo, senza la tipica barra degli indirizzi sui browser, tutto a vantaggio dell’usabilità e fruibilità del sito web.

Tracciamento ed engagement: tutte le pageviews provenienti da app installate sono tracciabili in Google Analytics.
Nelle PWA si deve impostare l’URL di avvio, ovvero la pagina che verrà aperta quando si lancia la Progressive Web App. Ti basta aggiungere il parametro UTM /?utm_source=homescreen per tracciare tutto il traffico con Google Analytics. Scoprirai che i lettori che usano l’app sono tra i migliori in quanto a KPI di navigazione: bounce rate sotto la media, pageviews sopra la media e tempo di permanenza maggiore della media.

Personalizzazione: è possibile personalizzare il colore della barra degli indirizzi se si decide di non nasconderla. Inoltre una volta installata, l’app verrà avviata con uno splash screen personalizzabile con logo e colore di background.

Indipendenza dalle app native: la PWA può coesistere senza alcun problema con l’app nativa.

 

PWA Core Building block

Scopriamo il core building block di una PWA.

PWA - Progressive Web Application 9

Una PWA per essere definita tale deve avere come minimo:

  • connessione HTTPS
  • supporto Service Worker
  • web app manifest

Possiamo avere anche features addizionali come Push Notification e altre APIs.

In questo primo articolo analizzeremo un pò nel dettaglio (ma non troppo :))  il Manifest e il Service Worker.

MANIFEST

Un Web Manifest fornisce dei meta data al browser, indicando come mostrare l’esperienza dell’add to home screen all’utente.

ll manifest è un file JSON contenente una serie di proprietà utilizzate per descrivere la PWA al brower. La piattaforma sa come trovare il manifest perché è referenziato nel HEAD dell’HTML.

Ecco una panoramica sulle proprietà del Manifest:

  • short_name: nome breve della tua app
  • name: nome completo del tuo sito web
  • icons: riferimento ad almeno una icona. Quando si salva una PWA nella schermata iniziale, Chrome cerca innanzitutto le icone che corrispondono alla densità del display e hanno una densità di 48dp. Se nessuna icona corrispondente viene trovata, Chrome cerca l’icona più adatta alle caratteristiche del dispositivo. Nel mio manifest.json ho inserito l’icona con 5 risoluzioni differenti: 48×48, 96×96, 144×144, 192×192 e 512×512.
  • display: definisce il layout visivo della PWA. Le possibilità sono:
    • Standalone: apparirà come un’applicazione nativa. Possibile mantenere una barra di stato
    • FullScreen: viene utilizzata tutta l’area di visualizzazione disponibile. Non viene mostrato alcune elemento del browser
    • Browser: si apre in una scheda del browser convenzionale o in una nuova finestra. Questa è l’opzione di default.
  • background_color: imposta il colore di sfondo della splash screen (schermata di avvio) della tua app. La splash screen mostra l’icona in mezzo allo schermo mentre vengono caricati tutti gli asset necessari (prima del caricamento dei fogli di stile).
  • theme_color: questo valore imposta il colore della barra degli indirizzi se il campo display è impostato su browser.
  • orientation: imposta l’orientamento della tua app in verticale od orizzontale.
  • lang: la lingua usata nel tuo sito. Esempi: “en-US”, oppure “it-IT”.

PWA - Progressive Web Application 10

TIPS – Come permettere ad un browser di triggerare l’evento “Add to Homescreen”

Il primo browser ad adottare tale esperienza è stato Chrome.
Attivare tale esperienza avviene solo se vengono soddisfatti alcuni criteri. Allo stato attuale non esiste un file di specifiche per il web manifest, quindi ogni browser può decidere di adottare i propri criteri (che fortunatamente sono molto simili tra loro).

Chrome  ha le seguenti regole:

  • il manifest deve avere almeno le seguenti proprietà:
    • uno short_name (usato sulla home screen)
    • un name (usato nel banner)
    • un’icona png 144×144
    • uno start_url
  • un service worker registrato sul proprio sito
  • il sito deve essere servito su una connessione sicura HTTPS

 

Fondamentalmente, ogni piattaforma sta rivedendo in che modo i consumatori rispondono a tale esperienza in modo da  ottimizzare e massimizzare le risposte.

TIPS – Gestire ad hoc l’evento “Add to Homescreen”

Se vogliamo gestire la logica dell’Add to Homescreen in modo indipendente da come i browser fanno Chrome supporta l’evento ‘beforeinstallprompt’.

Un listener di eventi può essere utilizzato per intercettare il processo e arrestare, ritardare o semplicemente tracciare l’attività.

Se si desidera impedire il prompt e vi sono molti casi d’uso per questo. Ovviamente tutto dipende dalle esigenze della vostra applicazione.

 

SERVICE WORKER

In generale possiamo dire che un Service Worker è uno script che il browser esegue in background, separato da una pagina Web, aprendo la porta a funzionalità che non richiedono una pagina Web o l’interazione dell’utente. Oggi includono già funzionalità come le notifiche push e la sincronizzazione in background.

Il motivo per cui questa API è così interessante è che consente di supportare le esperienze offline, dando agli sviluppatori il controllo completo dell’esperienza.

Come funziona un service worker?

Il service worker interagisce con una pagina web e le richieste HTTP (get/post/set/patch/delete). Questo siginifca che è possibile intercettare queste richieste e permettere di eseguirle attraverso il loro endpont originale o alternando quest’ultimo in base all’esigenze.

A priori, il service worker controllerà se il client ha un accesso su Internet (connessione attiva).

Nel caso non è possible connettersi a Internet, il service worker può reindirizzare la richiesta URL su la versione memorizzata in cache. Siccome la PWA usa un app shell, qualsiasi cosa è memorizzata per noi.

Quindi potremmo sintetizzare così: il service worker può chiedere al client di recuperare le informazioni dalla versione in cache invece di mostrare una pagina di errore.

Vediamo sommariamente le funzionalità basi, intermedie ed avanzate che il SW ci mette a disposizione:

Funzioni di base

  • Caching: gestione del contenuto memorizzato nella cache è uno degli usi più comuni del SW.
  • Offline: l’abilitazione della funzionalità offline è probabilmente la funzione del SW più ricercata.

Funzioni intermedie

  • Push notifications: l’invio di notifiche push è un ottimo modo per interagire con clienti e visitatori
  • Caricamento del contenuto memorizzato nella cache per i nuovi utenti

Funzione avanzate

  • Sincronizzazione in background: la sincronizzazione in background è un’altra funzionalità estremamente potente. La sincronizzazione in background è una nuova API Web che consente di rinviare le azioni finché l’utente non ha una connettività stabile. Ciò è utile per garantire che qualsiasi cosa l’utente voglia inviare, sia effettivamente inviata.

 

PWA - Progressive Web Application 11

L’intento del ciclo di vita è:

  • lavorare in modalità offline-first quando possibile;
  • permettere ad un nuovo SW di prepararsi senza interrompere (disturbare) quello attuale;
  • garantire che una pagina sia controllata dallo stesso SW (o da nessun SW) per tutto il tempo.

 

 

 

 

 

Analizzeremo più nel dettaglio (con esempi di codice) il ciclo di vita di un SW in un successivo post.

 

COME TESTARE LA TUA PWA

Prima di testare la Progressive Web App cancellare la cache del browser (si consiglia di non usare la navigazione da incognito). Navigare il sito web via smartphone e verificare se la notifica per aggiungere alla home è visualizzata correttamente.

Esiste una magnifica estensione per Chrome, per testare le PWA: si chiama Lighthouse, è altamente consigliata.

Per maggiori informazioni su Lighthouse si consiglia di leggere i seguenti link:

Lighthouse

Lighthouse PWA Analysis Tool

Lab: Auditing with Lighthouse

 

CONCLUSIONI

Il mondo delle PWA sta diventando sempre più interessante e produttivo. Colossi come Twitter (giusto per fare un piccolo esempio) hanno investito su questa tecnologia raggiungendo notevoli successi.

Ci sono tanti case studies che mettono a “nudo” i vantaggi di questa innovativa tecnologia.

Con questo articolo ho voluto fare due piccole panoramiche:

  • i vantaggi che questo approccio può portare alle nostre applicazioni;
  • cosa definiamo un’applicazione PWA.

Le prossime puntate saranno più specifiche e dettagliate su questo meraviglioso mondo :).

Alcune anticipazioni (voglio essere bravo :)):

  • come costruire un service worker da zero seguendo il suo ciclo di vita;
  • lighthouse in tutto il suo splendore: tips e tricks su come ottenere un sito 100% PWA.

Intanto se siete curiosi di approfondire l’argomento vi lascio alcuni link molto utili:

Stay tuned

 

Leave a Response

Valerio Pisapia
Valerio Pisapia, 34 anni, laureato in Ingegneria Informatica all’Università di Napoli Federico II. Ha esperienza decennale nello sviluppo mobile e web in ambito internazionale. Fornisce training e mentoring per progetti di svariata natura. Founder di una startup IT in Svizzera che si occupa di consulenza specializzata in ambito Web.
Translate »

Su questo sito utilizziamo strumenti nostri o di terze parti che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie sono normalmente usati per permettere al sito di funzionare correttamente (cookie tecnici), per generare statistiche di uso/navigazione (cookie statistici) e per pubblicizzare opportunamente i nostri servizi/prodotti (cookie di profilazione). Possiamo usare direttamente i cookie tecnici, ma hai il diritto di scegliere se abilitare o meno i cookie statistici e di profilazioneAbilitando questi cookie, ci aiuti ad offrirti una esperienza migliore con noi. 

 

>> Cookie Policy <<