PWA – Progressive Web Application

PWA – Progressive Web Application

Spread the love

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.
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 vs Native Apps

Confrontiamo ora le native apps and web apps.

Bene, iniziamo con una statistica che potrebbe scoraggiare chiunque a optare per una soluzione web.

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

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

Scopriamo perchè un’app nativa è migliore di una web app:

Se potessimo “trasferire” queste feature sulle web app?

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

Per costruire un’app nativa  dobbiamo avere un conoscenza tecnica di differenti linguaggi, per sviluppare un’app sia per  la versione iOS che 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 all0 0%.


Statistica mensile di utenti attivi su 1000 app

Ci sono 3.3 milioni di utenti sulle webpage 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 sulle 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  bisogna  installare nulla dall’app store.

Usa google per ricercare e boom hai la ricerca che volevi in pochissimi secondi! Aggiungi tale ricerca nei bookmark e puoi tornarci quando vuoi. Così è come usare il web.

Se uniamo questo vantaggio e i vantaggi delle app native…ecco questa è la PWA. Quindi possiamo dire che non è male 🙂


PWAs Vs Native Apps Vs Traditional Web Apps

Compariamo ora in primis una native app e una web app tradizionale attraverso la capacità (abilità) e il raggiungimento.

Native apps hanno capacità eccezionali in quanto possono sfruttare il sistema operativo e accedere a tantissime funzionalità ma solo le top 3 avranno un reach importante mentre le altre no.

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 in tale senso perchè, a mio avviso, ben presto potrebbe guadagnarsi una buona fetta di mercato.

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.

Progressive: funzionano 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 che analizzeremo (velocemente) nel dettaglio successivamente.

Un Service worker è uno script che il browser esegue in background, separato da una pagina web, per utilizzare funzioni che non richiedono una pagina web o un’interazione da parte dell’utente. Oggi includono già funzioni quali le notifiche push e la sincronizzazione in background.

Application Manifest

Modulo altrettanto importante che ci permette di installare la nostra app sui device senza la necessità che essa sia presenta in un specifico store (applestore o playstore per intenderci).

Background sync è una nuova API che ci permette di prorogare un’azione finchè la connessione sia stabile. In questo modo assicuriamo che i dati da inviare saranno realmente inviati appena possibile.


Manifest

Modulo altrettanto importante che ci permette di installare la nostra app sui device senza la necessità che essa sia presenta in un specifico store (applestore o playstore per intenderci).

Andiamo a vedere nel dettaglio il file Manifest:

 

In questo file JSON trovi i seguenti campi da personalizzare:

short_name: inserisci il nome breve della tua app

name: inserisci il nome completo del tuo sito web

icons: inserisci il 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.

start_url: inserisci l’URL che verrà caricato quando viene lanciata l’app. E’ qui che devi usare il parametro UTM se vuoi tracciare le visite con Google Analytics.

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.

lang: inserisci la lingua usata nel tuo sito. Esempi: “en-US”, oppure “it-IT”.

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.

Quando hai finito di editare il tuo file manifest.json caricalo nella root del web server. Ora non ti resta che inserire il richiamo al tuo file manifest.json nell’head dell’HTML di tutte le pagine del sito web:

Per testare il file manifest.json pulisci il browser e apri una pagina del tuo sito. Avvia i Dev Tools di Chrome e naviga nella tab Application e poi clicca nel menu di sinistra su Manifest.

Verifica che a destra appaia il link Add to homescreen e le varie icone che hai inserito.


Per maggiori informazioni sul file
manifest.json  consiglio di leggere:



Service Worker

Un Service Worker è uno script che il browser esegue in background, separato da una pagina Web, aprendo la porta a funzionalità che non richiede una pagina Web o l’interazione dell’utente. Oggi, i service worker  includono già funzionalità come le notifiche push e la sincronizzazione in background. In futuro, i Service Worker potrebbero supportare altri aspetti come la sincronizzazione periodica o il geofencing. La caratteristica principale è la capacità di intercettare e gestire le richieste di rete, compresa la gestione a livello di codice di una cache di risposte.

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

Qui avviene la magia per la navigazione offline.

Creiamo un file sw.js.

Questo vuol dire che inserendo tutti i file critici si alleggerisce drasticamente la necessità di download per il browser e la pagina verrà caricata molto rapidamente.

Attenzione: se anche un solo file di quelli elencati nella lista cache non dovesse essere raggiungibile (errore 404), l’installazione della PWA fallirà e non verrà installato nessun file nel telefono.

Lascio due consigli che ho imparato con l’esperienza:

Più è complessa la PWA e più è difficile fare debugging.

Non esagerare con i file in cache, si potrebbe rendere troppo complesso il processo di manutenzione dell’app.

Dato che se l’installazione fallisce tu (sviluppatore) non puoi saperlo, testa la tua app con la Dev Console o Lighthouse almeno una volta al mese, o almeno dopo aver fatto modifiche importanti al sito web.

Carica il file sw.js nella root del web server. Ora non  resta che inserire il richiamo a questo file nell’head dell’HTML di tutte le pagine:

Questo script richiama nelle pagine web il file sw.js con il comando navigator.serviceWorker.register solo se il browser supporta questa funzione. Successivamente stampa nella console del browser il messaggio di conferma o di errore del caricamento del Service Worker con il comando console.log().

Per testare il Service Worker pulisci il browser, apri il tuo sito web e mostra i Dev Tools di Chrome. Naviga nella tab Application e poi nel menu a sinistra clicca Service Worker.

Verifica che il servizio sia installato e attivo (pallino verde). Eventuali errori vengono mostrati nella Console.

Per testare la cache pulisci il browser e naviga sul tuo sito. Mostra i Dev Tools di Chrome e seleziona la tab Application e poi nel menu a sinistra clicca su Cache Storage ed infine sul tuo URL. Se hai fatto tutto correttamente, nel riquadro a destra dovresti vedere la lista con tutti i file che hai inserito nella cache del Service Worker.

Per maggiori informazioni sul file sw.js consiglio di leggere:

Service Workers: an Introduction

Introduction to Service Worker

Adding a Service Worker and Offline into your Web App

Progressive Web Apps



Come testare la tua PWA

Prima di testare la Progressive Web App cancella la cache del browser (non usare la navigazione da incognito). Ora naviga il sito web via smartphone e vedi se esce la notifica per aggiungere alla home.

Da poco è stato rilasciato un piccolo tool, una estensione per Chrome, per testare le PWA: si chiama Lighthouse, ti consiglio di dargli un occhio.

Per maggiori informazioni sul Lighthouse ti consiglio di leggere:

Lighthouse

Lighthouse PWA Analysis Tool

Lab: Auditing with Lighthouse



Conclusioni

Fare una PWA implica avere anche un sito rapido per rispondere alle necessità di usabilità degli utenti da mobile. Quindi, in un modo o nell’altro, si dovrà lavorare molto per ottimizzare i tempi di caricamento portandoli sotto una certa soglia. A questo punto dovresti avere tutto: le idee chiare, i concetti di base ed i file necessari. Fammi sapere cosa sei riuscito a fare nei commenti, linka la tua PWA!

Give your comment here