Progressive Web App: differenze tra le versioni

Versione delle 11:11, 12 dic 2016

Versione attuale delle 18:05, 20 mag 2024

(37 versioni intermedie di 24 utenti non mostrate)

Riga 1:

{{C|La voce—tradotta dalla Wikipedia in lingua inglese [[:en:Progressive Web Apps]] — potrebbe presentare il medesimo problema di [[Wikipedia:Ricerca originale]] presente sulla voce tradotta all'epoca, suggerita una ri-traduzione|informatica|aprile 2023}}

<span>Il termine </span>'''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à.

'''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 [[Applicazione mobile|applicazioni native]] quando utilizzata su un [[dispositivo mobile]].<ref>{{Cita web |url=https://developers.google.com/web/progressive-web-apps/ |titolo=Progressive Web Apps |4=Google Developers |sito=Google Developers |lingua=en |accesso=2018-10-06 }}</ref>

== PanoramicaStoria ==

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 side]] (e.g.[[Javascript]] attraverso la nuova funzionalità [[AJAX|Ajax]] <ref>{{Cita web|url=http://adaptivepath.org/ideas/ajax-new-approach-web-applications/|titolo=Ajax: A New Approach to Web Applications|cid=1|cognome1=Garrett|nome1=Jesse James|accesso=18 febbraio 2005|dataarchivio=297 gennaiomaggio 20162019|urlarchivio=https://web.archive.org/web/20190507051447/https://adaptivepath.org/ideas/ajax-new-approach-web-applications/|urlmorto=sì}}</ref>), e tramite il  [[Design responsivo|responsive web design]].<ref>{{Cita web|url=http://alistapart.com/article/responsive-web-design|titolo=Responsive Web Design|cid=2|cognome1=Marcotte|nome1=Ethan|accesso=25 maggio 2010|dataarchivio=29 gennaio 2016}}</ref>  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|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]], [[CSS|CSS3]], e [[JavaScript]], i browser web sempre più performanti e rispondenti agli standard insieme a processori potenti come l'[[Apple A10 Fusion|A10]] di Apple e lo  Snapdragon 821  hanno reso letali app ibrideapplicazioni una alternativa percorribile.

Nel 2015,  Frances Berriman  e lo sviluppatore   Alex Russell  di [[Google Chrome]] hanno coniato il termine   "Progressive Web Apps" <ref name="infrequently.org">{{Cita web|cognome1=Russell|nome1=Alex|titolo=Progressive Web Apps: Escaping Tabs Without Losing Our Soul|url=https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/|accesso=15 giugno 2015|cid=4|dataarchivio=29 gennaio 2016}}</ref> 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 devicedispositivi. Secondo gli sviluppatori Google,<ref name="infrequently.org"/><ref>{{Cita web|url=https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en}}</ref><ref>{{Cita web|url=https://developers.google.com/web/progressive-web-apps}}</ref> queste caratteristiche sono:

=== 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 [[Linguaggio di markup|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.

=== ProgressiveDescrizione Web Apps ===

<span>Il termine </span>'''Progressive Web App''' (PWA, applicazioni web progressive) viene utilizzato per indicare una nuova metodologia per sviluppare software. Diversamente dalle applicazioni  tradizionali, le progressive web appsPWA 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à.

Nel 2015, Frances Berriman e lo sviluppatore  Alex Russell di Google Chrome hanno coniato il termine  "Progressive Web Apps" <ref name="infrequently.org">{{Cita web|cognome1=Russell|nome1=Alex|titolo=Progressive Web Apps: Escaping Tabs Without Losing Our Soul|url=https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/|accesso=15 giugno 2015|cid=4|dataarchivio=29 gennaio 2016}}</ref> 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,<ref name="infrequently.org"/><ref>{{Cita web|url=https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en}}</ref><ref>{{Cita web|url=https://developers.google.com/web/progressive-web-apps}}</ref> queste caratteristiche sono:

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<ref>{{Cita web |url=https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures |titolo=Introduction to Progressive Web App Architectures |4=Google Developers |sito=Google Developers |lingua=en |accesso=2018-10-06 }}</ref>. 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<ref>{{Cita web |url=https://medium.freecodecamp.org/progressive-web-apps-101-the-what-why-and-how-4aa5e9065ac2 |titolo=Progressive Web Apps 101: the What, Why and How – freeCodeCamp.org |sito=freeCodeCamp.org |data=2018-07-20 |lingua=en |accesso=2018-10-06}}</ref>. Diverse aziende hanno riscontrato<ref>{{Cita web|url=https://ymedialabs.com/progressive-web-apps|titolo=Why Progressive Web Apps Are The Future of Mobile Web (2019 Research)}}</ref> notevoli miglioramenti in diversi [[Indicatore chiave di prestazione|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,<ref name="infrequently.org"/><ref>{{Cita web|url=https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en}}</ref><ref>{{Cita web|url=https://developers.google.com/web/progressive-web-apps}}</ref> queste caratteristiche sono:

* '''Progressive''' - Funzionano per ogni utente, a prescindere dal browser scelto perché sono costruite alla base con principi di miglioramento progressivo.

* '''[[Design responsivo|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  [[Progressive web app#Service Workers|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<ref name="w3cmanifest">W3C [https://www.w3.org/TR/appmanifest/ &#x201C;Web“Web App Manifest&#x201D;Manifest”, Working Draft], retrieved 12 September 2016</ref>  e al service worker registration scope che consente ai [[Motore di ricerca|motori di ricerca]] di trovarle.

* '''Ri-attivabiliRiattivabili'''  - RendereRendono facile la riattivazione dell'applicazione grazie a capacità quali le notifiche push.

* '''Installabili'''  - ConsentireConsentono all'utente di "manteneresalvare" le app che considera più utili con la corrispondente icona sullo schermo del proprio terminale mobile (home screen) senza che si debba affrontare tutti i passaggi e problemi legati all'uso dell'app store.

* '''Link-abiliLinkabili'''  - Facilmente condivisibili tramite l'URL e non richiedono complesse installazioni.

Le Progressive Web Apps descritte da Shoaib nel suo post:<ref>{{Cita web|url=https://www.addonsolutions.com/blog/is-it-right-time-to-go-for-progressive-mobile-web-app-development-2.html/|titolo=Copia archiviata|accesso=11 dicembre 2016|urlarchivio=https://web.archive.org/web/20170205200630/https://www.addonsolutions.com/blog/is-it-right-time-to-go-for-progressive-mobile-web-app-development-2.html|dataarchivio=5 febbraio 2017|urlmorto=sì}}</ref>  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. NelDal 2016, le Progressive Web Apps vengono implementate nel browser Chrome, mae gli altri browser lehanno supporterannoannunciato inil futurosupporto.

== Tecnologie ==

Le Progressive Web Apps descritte da Shoaib nel suo post:<ref>{{Cita web|url=https://www.addonsolutions.com/blog/is-it-right-time-to-go-for-progressive-mobile-web-app-development-2.html/}}</ref> 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:<ref>{{Cita web|url=https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/}}</ref>

* Vengono esposte da una Sorgente Sicura https. Vengono servite su protocollo  TLS con la visualizzazione del lucchetto verde nel browser .

* CaricatePossono essere caricate ed eseguite anche mentre sonoil terminale dell'utente è offline (anche sein caso si tratti solo dadi una pagina appositacreata allo scopo). Come conseguenza,Per questoottenere significaquesta chefunzionalità 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 (conil cui valore dipuò essere 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" } ]

== Tecnologie impiegate per la creazione ==

=== Manifesto ===

=== Il manifesto principale ===

Il manifesto della web app è una specifica del  [[World Wide Web Consortium|W3C]] in formato  [[JavaScript Object Notation|JSON]]<ref name="w3cmanifest"/>  che fornisce agli sviluppatori il posto dove mettere i  [[Metadato|metadata]]  associati con l'applicazione web inclusitra cui:

* Il nome della web application

* I link alle icone o alle immagini della web app

Riga 37 ⟶ 41:

* 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 perdelle lamodalità Progressivedi Webfruizione Appper dellele modalitàProgressive diWeb fruizioneApp 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 appsapp tradizionali al contrario sono carenti sugli altri aspetti: mancanza di eseguibile compilato nativmentenativamente, 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 pongonointerpongono 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

Riga 54 ⟶ 58:

# ID o UUID allocati

# Con eventi con cicli di vita

# Hanno una mappa delle risorse degli script 

# Possono saltare l'attesa

Benefici dei Service Worker

Riga 63 ⟶ 67:

=== Architettura della Shell delle Applicazioni ===

Per il caricamento veloce, i service worker memorizzano l'interfaccia di base o la "shell" della RWD 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 così comeche 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 llanella cache del browser del terminale mobile.

== Note ==

<references />

== Voci correlate ==

* [[Applicazione web]]

{{portale|informatica}}

== Riferimenti ==

{{Reflist|30em}}

[[Categoria:Applicazioni web]]