Progressive Web App (PWA, in italiano applicazione web progressiva) è un termine, coniato in origine da Google, che si riferisce ad una applicazione web che viene sviluppata e caricata come una normale pagina web, ma che si comporta in modo simile alle applicazioni native quando utilizzata su un dispositivo mobile.[1]

Storia

Sin dal 2005 le tecnologie per lo sviluppo sul web si sono spostate dalla produzione di pagine statiche a pagine dinamiche attraverso l'uso di strumenti lato server (PHP, ASP.NET) e lato client (Javascript attraverso la nuova funzionalità Ajax[2]), e tramite il responsive web design.[3] Nonostante le iniziali spinte per la creazione di applicazioni web basate su queste tecnologie su terminali come l'iPhone del 2007, i tentativi con le web-app hanno fallito nei confronti rispetto alle app native. Le app native fornivano una user experience migliore e venivano caricate più velocemente in confronto al caricamento che doveva essere fatto dal browser. Il confezionamento in pacchetti di risorse e l'accesso diretto all'hardware consentiva alle applicazioni native di essere molto più veloci e di fornire maggiori funzionalità. Ma dalla metà del 2010, i continui miglioramenti nell'HTML5, CSS3, e JavaScript, i browser web sempre più performanti e rispondenti agli standard insieme a processori potenti come l'A10 di Apple e lo Snapdragon 821 hanno reso tali applicazioni una alternativa percorribile.

Nel 2015, Frances Berriman e lo sviluppatore Alex Russell di Google Chrome hanno coniato il termine "Progressive Web Apps"[4] per descrivere le app che sfruttavano le nuove funzionalità offerte dai moderni browser, inclusi Service Workers e Web App Manifests, che consentono agli utenti di promuovere le web app affinché si comportino come applicazioni di prima classe, ovvero come applicazioni native, nel sistema operativo dei loro dispositivi.

Descrizione

Diversamente dalle applicazioni tradizionali, le PWA sono un ibrido tra le normali pagine web (o siti web) e le applicazioni mobili. Questo modello di applicazioni cerca di combinare le possibilità offerte dalla maggior parte dei moderni browser con i benefici dell'utilizzo in mobilità.

Il termine Progressive si riferisce al fatto che, dal punto di vista dell'esperienza utente, queste applicazioni possono abilitare una serie di funzionalità aggiuntive alle relative pagine web a seconda delle funzionalità offerte dal dispositivo[5]. Ad esempio il browser può proporre all'utente di salvarle nella schermata home del terminale mobile, per essere percepite a tutti gli effetti come delle app native[6]. Diverse aziende hanno riscontrato[7] notevoli miglioramenti in diversi indicatori chiave di prestazione, come un aumento nel tempo speso nel sito o nelle conversioni dei nuovi utenti. In pratica, la pagina web creata come app la si ritrova come istanza presente nella lista delle app installate.

Aspetti tecnici

Secondo gli sviluppatori Google,[4][8][9] queste caratteristiche sono:

Le Progressive Web Apps descritte da Shoaib nel suo post:[11] sono un'evoluzione delle tecnologie web esistenti. Come tali, non richiedono implementazioni o installazioni separate. La pubblicazione di una Progressive Web App funziona allo stesso modo di un'altra pagina web. Dal 2016, le Progressive Web Apps vengono implementate nel browser Chrome, e gli altri browser hanno annunciato il supporto.

I criteri tecnici di base perché un sito venga considerato dal browser una Progressive Web App sono descritti nel post di Russell:[12]

Tecnologie impiegate per la creazione

Il manifesto principale

Il manifesto della web app è una specifica del W3C in formato JSON[10] che fornisce agli sviluppatori il posto dove mettere i metadata associati con l'applicazione web tra cui:

Impostando e modificando i metadata del file manifesto, gli sviluppatori consento agli user agent di creare delle modalità di fruizione per le Progressive Web App che hanno le stesse caratteristiche delle app native.

Service Workers

Le app mobili native forniscono una esperienza ricca e buone performance, al costo dell'occupazione di spazio nel terminale, mancanza di aggiornamenti in tempo reale e scarsa visibilità nei motori di ricerca. Le web app tradizionali al contrario sono carenti sugli altri aspetti: mancanza di eseguibile compilato nativamente, insieme alla dipendenza dalla connettività che potrebbe essere inaffidabile o lenta. I Service Worker vengono utilizzati nel tentativo di fornire il meglio di questi due mondi alle progressive web app.

Tecnicamente, i Service Worker forniscono un proxy di rete implementato come script in JavaScript nel browser web per gestire da programma le richieste web/HTTP. I Service Worker si interpongono tra la connessione di rete e il terminale che fornisce il contenuto. Sono capaci di utilizzare i meccanismi di cache in maniera efficiente e di consentire un comportamento privo di errori durante lunghi periodi di utilizzo off line.

Proprietà dei Service Worker

  1. Attivate e mantenute attive dalle relazioni con gli eventi, e non da quelle con i documenti
  2. Generiche nella loro natura
  3. Event-driven con un limite di tempo nel contesto dello scripting ed eseguite all'origine
  4. Con endpoint naturali per un ampio insieme di servizi runtime
  5. Hanno uno stato
  6. Con l'URL di uno script
  7. Contengono la registrazione
  8. ID o UUID allocati
  9. Con eventi con cicli di vita
  10. Hanno una mappa delle risorse degli script
  11. Possono saltare l'attesa

Benefici dei Service Worker

Architettura della Shell delle Applicazioni

Per il caricamento veloce, i service worker memorizzano l'interfaccia di base o la "shell" della web application in modalità Responsive Web Design. Questa shell fornisce un frame statico iniziale, un layout o un'architettura nella quale il contenuto può essere caricato sia progressivamente che dinamicamente, consentendo agli utenti di interagire con l'app nonostante i diversi livelli di qualità della connessione di cui dispongono. Tecnicamente, la shell è un codice che viene memorizzato localmente nella cache del browser del terminale mobile.

Note

  1. ^ (EN) Progressive Web Apps, su Google Developers. URL consultato il 6 ottobre 2018.
  2. ^ Jesse James Garrett, Ajax: A New Approach to Web Applications, su adaptivepath.org. URL consultato il 18 febbraio 2005 (archiviato dall'url originale il 7 maggio 2019).
  3. ^ Ethan Marcotte, Responsive Web Design, su alistapart.com. URL consultato il 25 maggio 2010.
  4. ^ a b Alex Russell, Progressive Web Apps: Escaping Tabs Without Losing Our Soul, su infrequently.org. URL consultato il 15 giugno 2015.
  5. ^ (EN) Introduction to Progressive Web App Architectures, su Google Developers. URL consultato il 6 ottobre 2018.
  6. ^ (EN) Progressive Web Apps 101: the What, Why and How – freeCodeCamp.org, su freeCodeCamp.org, 20 luglio 2018. URL consultato il 6 ottobre 2018.
  7. ^ Why Progressive Web Apps Are The Future of Mobile Web (2019 Research), su ymedialabs.com.
  8. ^ developers.google.com, https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en.
  9. ^ developers.google.com, https://developers.google.com/web/progressive-web-apps.
  10. ^ a b W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016
  11. ^ Copia archiviata, su addonsolutions.com. URL consultato l'11 dicembre 2016 (archiviato dall'url originale il 5 febbraio 2017).
  12. ^ infrequently.org, https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/.

Voci correlate

  Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica