Wikipedia

Progressive Web App

Applicazioni Web Progressive
Versione del 12 dic 2016 alle 11:11 di RolloBot (discussione | contributi) (Bot: Correzione di uno o più errori comuni)

Il termine Progressive Web App (PWA, applicazioni web progressive) viene utilizzato per indicare una nuova metodologia per sviluppare software. Diversamente dalle applicazioni tradizionali, le progressive web apps sono un ibrido tra le normali pagine web (o siti web) e le applicazioni mobili. Questo nuovo modello di applicazioni cerca di combinare le possibilità offerte dalla maggior parte dei moderni browser con i benefici dell'utilizzo in mobilità.

Panoramica

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 client side (e.g. Ajax [1]), e tramite il responsive web design.[2] 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, 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 e lo Snapdragon 821 hanno reso le app ibride una alternativa percorribile.

App ibride

Le app ibride sono una fase intermedia verso le Progressive Web App: imitano l'esperienza utente delle app native su mobile, e hanno ancora la necessità di un App store per essere scaricate. Come tali consumano spazio di memoria sul terminale. La combinazione di markup, fogli di stile e script ha consentito la creazione di elementi interattivi personalizzati senza l'uso di sistemi chiusi come Flash. Pur essendo eseguiti parzialmente nel browser del terminale mobile, le applicazioni ibride non avevano un URL, avevano una interfaccia utente ricca, e accesso alle funzioni di sistema. Le nuove versioni del CSS3 e dei framework JavaScript consentivano l'uso di nuovi modelli di design come il box model seguito da griglie e flex, associato a trasformazioni e animazioni.

Progressive Web Apps

Nel 2015, Frances Berriman e lo sviluppatore  Alex Russell di Google Chrome hanno coniato il termine  "Progressive Web Apps" [3] 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 device. Secondo gli sviluppatori Google,[3][4][5] queste caratteristiche sono:

  • Progressive - Funzionano per ogni utente, a prescindere dal browser scelto perché sono costruite alla base con principi di miglioramento progressivo.
  • Responsive - Si adattano alle varie dimensioni dello schermo: desktop, mobile, tablet, o dimensioni che potranno in seguito rendersi disponibili.
  • Indipendenti dalla disponibilità della connessione - I Service worker consentono di far funzionare l'applicazione offline, in mancanza di connessione o con connessioni a bassa qualità.
  • App-like - Si comportano con l'utente come se fossero delle app native, in termini di interazione e navigazione.
  • Aggiornate - Le informazioni sono sempre aggiornate grazie al processo di aggiornamento dei dati offerto dai service worker.
  • Sicure - Vengono esposte su protocollo HTTPS  per evitare che la connessione esponga informazioni o che i contenuti vengano alterati.
  • Discoverable - Vengono identificate come  “applicazioni” grazie al manifesto W3C[6] e al service worker registration scope che consente ai motori di ricerca di trovarle.
  • Ri-attivabili - Rendere facile la riattivazione dell'applicazione grazie a capacità quali le notifiche push.
  • Installabili - Consentire all'utente di "mantenere" le app che considera più utili sullo schermo del terminale (home screen) senza tutti i problemi legati all'app store.
  • Link-abili - Facilmente condivisibili tramite l'URL e non richiedono complesse installazioni.

Tecnologie

Le Progressive Web Apps descritte da Shoaib nel suo post:[7] 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. Nel 2016, Progressive Web Apps vengono implementate nel browser Chrome, ma altri browser le supporteranno in futuro.

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

  • Vengono esposte da una Sorgente Sicura. Vengono servite su protocollo TLS.
  • Caricate mentre sono offline (anche se solo da una pagina apposita). Come conseguenza, questo significa che le Progressive Web Apps richiedono i Service Workers.
  • Abbiano un Web App Manifest di riferimento con almeno quattro proprietà chiave: name, short_name, start_url, e display (con valore di standalone o fullscreen)
  • Una icona grande almeno 144×144 pixel in formato png . Es..: "icons": [ { "src": "/images/icon-144.png", "sizes": "144x144", "type": "image/png" } ]

Manifesto

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

  • Il nome della web application
  • I link alle icone o alle immagini della web app
  • L'URL preferito per lanciare o aprire la web app
  • La configurazione dei dati della web app per un certo numero di caratteristiche
  • La dichiarazione dell'orientamento di default della web app
  • L'abilitazione a impostare la modalità dello schermo, ad esempio in full screen

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

Service Workers

Le app mobili native mobile forniscono una esperienza ricca e delle 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 apps tradizionali al contrario sono carenti sugli altri aspetti: mancanza di eseguibile compilato nativmente, 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 pongono tra la connessione di rete e il terminale che fornisce il contenuto. Sono capaci di utilizzare i meccanismi di cache in maniera efficiente e 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

  • Sono capaci di gestire facilmente le notifiche push
  • Sincronizzano i dati in background
  • Sono capaci di rispondere alle richieste di risorse che sono state generate da altre parti
  • Ricevono aggiornamenti centralizzati

Architettura della Shell delle Applicazioni

Per il caricamento veloce, i service worker memorizzano l'interfaccia di base o la "shell" della RWD web application. Questa shell fornisce un frame statico iniziale, un layout o un'architettura nella quale il contenuto può essere caricato progressivamente così come 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 lla cache del browser del terminale mobile.

Riferimenti

  1. ^ Jesse James Garrett, Ajax: A New Approach to Web Applications, su adaptivepath.org. URL consultato il 18 febbraio 2005.
  2. ^ Ethan Marcotte, Responsive Web Design, su alistapart.com. URL consultato il 25 maggio 2010.
  3. ^ a b Alex Russell, Progressive Web Apps: Escaping Tabs Without Losing Our Soul, su infrequently.org. URL consultato il 15 giugno 2015.
  4. ^ developers.google.com, https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en.
  5. ^ developers.google.com, https://developers.google.com/web/progressive-web-apps.
  6. ^ a b W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016
  7. ^ addonsolutions.com, https://www.addonsolutions.com/blog/is-it-right-time-to-go-for-progressive-mobile-web-app-development-2.html/.
  8. ^ infrequently.org, https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/.
Estratto da "https://it.wikipedia.org/w/index.php?title=Progressive_Web_App&oldid=84737335"