Progressive Web App: cosa sono e come fare?

Ormai è risaputo che la fruizione di contenuti web avviene sempre più su dispositivi di tipo Mobile a discapito dell’utilizzo di dispositivi Desktop con una tendenza sempre più marcata. La diffusione di smartphone e  tablet ha profondamente modificato le abitudini dei navigatori e parallelamente ha scatenato una vera e propria guerra sul fronte della programmazione per fornire applicazioni veloci e complete, con un’ottima User Experience, in grado di funzionare anche offline.

App native VS. App ibride, questo è stato il “Leitmotiv” degli ultimi anni, senza che si siano ancora affermati dei veri vincitori e in questa battaglia, commerciale e per certi versi anche ideologica, si è affacciato un terzo competitor: la Progressive Web App. Il termine è stato coniato da Google nel 2015 e questo a mio avviso la dice lunga sulla competitività che questo attore andrà ad assumere nel vicino futuro, anche in considerazione della definizione che trova sulle pagine stesse di Google

“Le Progressive Web App (PWA) sono moderne applicazioni web offline, pensate inizialmente per i dispositivi mobili, che possono competere con le migliori applicazioni native. Sono il nuovo standard del web per dispositivi mobili.” ( https://support.google.com/google-ads/answer/7336532?hl=it&ref_topic=7327985)

Come si definisce una PWA .

Concettualmente la PWA non è altro che un sito web dotato di alcune caratteristiche peculiari e imprescindibili: Affidabilità, Rapidità, Coinvolgimento.

A differenza delle “App Native” o delle “Hybrid App”  le progressive web app non si scaricano da Google Play o Apple Store ma si navigano esattamente come un qualsiasi sito web digitando un indirizzo o arrivando ad esse tramite link e ricerche in rete. Sono però “installabili” come le  app native tramite un solo click che consente di aggiungere alla schermata home l’icona dell’applicazione senza necessità di ricordare l’indirizzo del sito o salvarlo nei preferiti del browser, questa caratteristica è disponibile anche su dispositivi Desktop tramite i principali browser moderni. Il termine “progressive” stabilisce appunto un legame con i browser nel senso che le funzionalità di questo tipo di app per ciò che riguarda le interazioni col dispositivo saranno progressivamente  adeguate a ciò che le evoluzioni del browser consentiranno nel tempo. Una panoramica completa dello “stato dell’arte” delle funzionalità delle PWA si può trovare qui: https://whatwebcando.today/

Tornando alle peculiarità:

Affidabilità: ovvero garanzia di navigazione sicura su server  dotati di certificato SSL in protocollo HTTPS, caricamento istantaneo e funzionalità anche in assenza di rete

Rapidità: in grado di fornire rapidamente ( con tempi di risposta intorno al secondo) i contenuti richiesti, grazie a sistemi di caching, ottimizzazione degli script e dei CSS e utilizzo di server performanti.

Coinvolgimento: processo di installazione “easy” senza necessità del reperimento dell’App sugli store, possibilità di ricevere notifiche push, ottima user experience con transizioni rapide e “smooth” fra le pagine. Layout responsive / adaptive per la miglior fruizione possibile su schermi di qualsiasi dimensione.

Le caratteristiche tecniche di una Progressive Web App

Dal punto di vista tecnico, per implementare una PWA occorre disporre di un server con certificato SSL installato per essere chiamato in protocollo HTTPS. Oltre a questa caratteristica imprescindibile sono necessari alcuni files specifici:

  • un file “manifest” ( https://developer.mozilla.org/en-US/docs/Web/Manifest )  in formato json ( il file header è Content-Type: application/manifest+json ma viene raccomandato di utilizzare l’estensione .webmanifest invece di .json) che “istruisce” il dispositivo fornendo informazioni sull’app. I parametri minimi necessari sono “name” ( il nome dell’applicazione che verrà mostrato agli utenti in fase di installazione, start_url ovvero l’url ( relativo al file .manifest) che verrà attivato dall’icona una volta installata l’app e icons che istruiscono il browser sui percorsi dell’icona da mostrare dopo l’installazione.
    Es di file .webmanifest :
    Il parametro di configurazione “standalone” istruisce il browser a mostrare la pagina in modalità “app”, quindi senza barra indirizzi, in una modalità “app-like” a tutti gli effetti.
    Il file deve essere richiamato con un link nella sez. <head> del sito :
  • Un “service-worker” ( https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) ovvero un file javascript che, indipendentemente dalla finestra principale gestisce processi in background  rispetto alla pagina / sito a cui è associato, in maniera del tutto indipendente dai processi principali; pertanto non è bloccante e non rallenta l’esecuzione del thread principale. Le sue limitazioni sono che non ha accesso al DOM, è completametne asincrono per design e quindi non si possono utilizzare chiamate di tipo XHR e non ha accesso a localStorage; inoltre deve necessariamente essere utilizzato in protocollo HTTPS.
    I compiti principali del service-worker sono quelli di velocizzare i caricamenti dei contenuti sfruttando un sistema di caching e migliorare la User Experience in caso di mancanza di connessione, fornendo uno o più contenuti ( a condizione che siano almeno stati caricati una prima volta in presenza di rete) in modalità OFFLINE.
    Un’ulteriore importantissima feature dei servivce-worker è la gestione delle notifiche push per le Progressive Web App.
    Il ciclo di vita di un service-worker si riassume in:
    – Download – contestuale al caricamento del file
    – Installazione -L’installazione viene tentata quando viene trovato un nuovo file diverso da un service-worker esistente (confrontato in termini di byte) o il primo service-worker rilevato per questa pagina / sito.
    – AttivazioneSuccessivamente all’attivazione il service worker può rispondere alle richieste http utilizzando l’evento FetchEvent. È possibile modificare la risposta a queste richieste nel modo desiderato, utilizzando il metodo FetchEvent.respondWith.
    Nell’esempio di service-worker  seguente, le varie fasi del service-worker  vengono utilizzate:
    install: per  caricare le risorse  della variabile urlsToCache  nella cache con namespace “PWA-cache-v1
    activate: per la cancellazione di vecchi elementi della cache
    fetch: ad ogni richiesta di tipo “GET” controllare se la risorsa esiste nella cache e restituirla, in caso non ci sia prelevare la risorsa dal server e in caso di assenza di rete restituire una pagina”modalità offline” precedentemente messa in cache all’installazione.

  • Un gestore di eventi che consente l’installabilità della PWA.
    Nell’esempio sottostante, il click sull’elemento del dom
    farà comparire il popup per l’installazione della PWA, che mostrerà  l’icona indicata nel file .webmanifest, il nome dell’app che richiede l’installazione e i pulsanti di scelta. Se accettata aggiungerà alla “homescreeen” del dispositivo l’icona tramite la quale si potrà lanciare l’app esattamente come un’app nativa, anche da dispositivi desktop.
     

Test e strumenti di debug.

Uno degli strumenti messi a disposizione da Google per testare una pwa è Lighthouse ( https://developers.google.com/web/tools/lighthouse/) attivabile anche da Chrome con la console sviluppatori aperta nel tab “audits”:

Cliccando su “Run audits” otterrete tutte le informazioni relative alla pagina web che state visualizzando.

2019-05-22T22:24:21+00:00

Leave A Comment

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.