Le Progressive Web App (PWA): il futuro è già qui?

A Progressive Web App is an app that can provide additional features based on the device support, including offline capabilities, push notifications and almost native app look and speed, and local caching of resources.

In questo post analizzerò questa “nuova” metodologia di sviluppo SW, sperando possa servire per evidenziare quelli che sono i punti a suo favore e che fanno presupporre che nei prossimi anni possa quasi sostituirsi al paradigma delle attuali app scaricate/acquistate da uno store ed installate su un proprio device. Si basa sul meglio delle tecnologie attualmente in circolazione del web da un lato e delle applicazioni native dall’altro, riducendo così un divario epocale. In poche parole, questa tecnologia permette di effettuare un cache nel telefono di un sito o parte di esso per poter essere fruito con particolari vantaggi in termini di usabilità, con UI adaptive e responsive, e potenzialmente anche offline utilizzando le funzionalità offerte da un Service Worker, mantenendo la sua capacità di indicizzazione (SEO), con conseguenti vantaggi di “reperibilità”, senza necessità di una installazione da ripetersi ad ogni suo aggiornamento. Personalmente non credo che, almeno nel breve periodo, soppianteranno del tutto le applicazioni native, seppure siano già una realtà molto interessante da considerare per certi scenari dove l’applicazione è principalmente di front-end e non richiede una grande integrazione con il sistema operativo. Perciò nell’immediato futuro probabilmente coesisteranno entrambe le modalità, ma i vantaggi economici propri dello sviluppo di PWA e le sue probabili future evoluzioni pilotate appunto dalla richiesta, fanno pensare ad una loro  significativa e progressiva sempre maggior diffusione in diversi contesti. Si noti comunque che una PWA può coesistere senza alcun problema con l’equivalente app nativa.

Inoltre, la maggiore potenza elaborativa dei dispositivi, anche quelli mobili, e la sempre più capillare e continua presenza di una connessione alla Rete, sono e saranno sempre più fattori che faciliteranno la diffusione delle PWA, soprattutto per quelle app che non si usano continuamente. Infatti, soprattutto per le piccole organizzazioni, realizzare e mantenere un’app nativa è costoso, ancor più se si desidera renderla disponibile su più piattaforme, per cui la modalità proposta dalle PWA può essere sicuramente la soluzione per loro più opportuna.

Perciò, probabilmente nel prossimo futuro saranno proprio le PWA a dominare, in sinergia con l’intelligenza artificiale,  un hardware locale sempre più potente (non solo su smartphone ma anche su PC Windows cellulare), il cloud computing e una onnipresente connessione dati ad elevata banda.

Le WPA sono ben più che i tradizionali “web wrapper”, cioè semplici browser inseriti all’interno di una app,  seppure non siano neppure app native seppure le API di Cache e di Push abbiano già ampliato di molto i loro ambiti di utilizzo. Grazie al web Service Worker e al Caching hanno una maggiore integrazione con il sistema operativo (e.g. notification), consentono la sincronizzazione dei dati in background, ricevono aggiornamenti live e possono anche funzionare offline.

============================================================

In questo post (per ora) non dirò nulla di nuovo rispetto a quanto già si può leggere in molti articoli, per cui se credi puoi andare direttamente ad approfondire ai seguenti link o in molti altri articoli che sempre più spesso escono anche sulle maggiori testate Web:

Molto interessante è anche questo video su YouTube: All you need to know about PWA, oltre ai molteplici tutorial presenti sul Channel YouTube per gli sviluppatori di Google. (e.g. Progressive Web Apps courseGetting Started With PWA; Progressive Web App tutorial – learn to build a PWA from scratch). Inoltre, esiste nel sito di Google per gli sviluppatori una sezione apposita di Get Started dove, passo-passo, viene indicato come effettuare lo sviluppo di una PWA di esempio, partendo dai suoi componenti minimali, a livello di HTML, CSS e JavaScript. In particolare, sempre in quel sito, esiste una sezione in cui viene fornito una checklist di tutte le funzionalità che una PWA deve avere, sia quelle base (Baseline Progressive Web App Checklist, verificabili automaticamente tramite un tool open-source Lighthouse) sia quelle avanzate (Exemplary Progressive Web App Checklist, il cui check si deve effettuare manualmente in quanto non ancora implementati in quel tool) che consentono di ottenere una più significativa esperienza offline, raggiungendo una interattività ancora più veloce e prestando anche attenzione ad ulteriori dettagli.

Da tempo lo sviluppo sul web ha fatto uso di tecnologie e metodologie che consentono di avere pagine dinamiche (e.g. Ajax, jQuery, responsive web design), ma solo negli ultimi anni i miglioramenti nell’HTML5, CSS3, e JavaScript, hanno reso possibile realizzare le cosiddette app ibride che imitano l’esperienza utente delle app native su mobile. Tuttavia queste ultime hanno ancora la necessità di un App Store per essere scaricate e, in quanto app, consumano spazio di memoria sul terminale utente. Inoltre, fino a poco tempo fa, le app native hanno fornito una user experience migliore, una maggiore velocità di esecuzione, caricandosi più velocemente rispetto all’uso del browser, oltre a poter fornire funzionalità che richiedono un accesso diretto all’hardware. Con le PWA il mondo del Web fa un ulteriore passo avanti … potendo funzionare anche offline e in background, potendo avere anche requisiti per poter ottenere, dal Sistema Operativo, concessioni di accesso a funzionalità presenti sul dispositivo (e.g. telecamera, come fa attualmente la PWA di Instagram). Il comportamento previsto è conforme con i requisiti del modello RAIL introdotto da Google stesso (Response, Animation, Idle, Load), cioè deve rispondere subito alla richiesta dell’utente, facendogli visualizzare un’animazione durante l’attesa, utilizzando questo momento di inattività (Idle) per immagazzinare più contenuti possibili e poi caricare il tutto in meno di un secondo.

Parlandone anche con alcuni colleghi, penso che il termine Progressive Web App (PWA) non sia ancora sufficientemente conosciuto anche dagli addetti ai lavori, seppure sia stato coniato da Frances Berriman e dallo sviluppatore Alex Russell di Google Chrome nell’ormai lontano 2015: tuttavia, qualunque tecnico si soffermi a conoscerlo, anche superficialmente, non può che condividere quelli che sono i vantaggi che un utilizzo delle PWA comporta per tutti gli attori in gioco! In alcuni articoli si parla infatti delle PWA come di una tecnologia win-win, cioè dove tutti sono i vincitori e nessuno risulta perdente … ed è proprio per questa ragione che penso, come molti altri, che avrà un sicuro futuro. Vediamo quindi nel seguito quali sono i vantaggi considerando uno per uno gli attori coinvolti.

Le ditte, soprattutto quelle piccole, troppo spesso attualmente non investono nel realizzare un’app in quanto troppo costoso è il suo sviluppo e soprattutto la sua manutenzione su più piattaforme. Per  loro risulta più vantaggioso chiedere ad un Web developer di trasformare in PWA il sito che comunque generalmente la ditta possiede. Inoltre, le app PWA hanno maggiore visibilità in quanto possono essere trovata non solo cercandole negli Store ma anche tramite i motori di ricerca. Risulta plausibile che anche i sistemi di Banking online presto si appoggeranno alle PWA, in quanto tipicamente mantenere una app bancaria risulta dispendioso per via dei requirement di sicurezza e di rispetto di requisiti di legge: molto più agevole è invece mantenere semplicemente solo un sito Web nuovo, PWA-enabled, estendendo le funzionalità già presenti nei siti bancari che si collegano direttamente ai loro servizi di backend, presenti da ben prima che le app prendessero piede.

Anche per uno sviluppatore di applicazioni, il più grande vantaggio è il risparmio di costi in termini di sviluppo e di manutenzione: non deve più preoccuparsi di sviluppare e gestire la stessa app per più piattaforme o utilizzare framework per sviluppi multipiattaforma che, in generale, non risultano di facile utilizzo. Molte delle competenze proprie degli sviluppatori di siti web dinamici, possono essere inoltre riutilizzate anche in questo contesto di sviluppo. Le app PWA hanno maggiore visibilità in quanto possono essere trovata non solo cercandole negli Store ma anche tramite i motori di ricerca. Una PWA può essere condivisa fornendo semplicemente la sua URL. Una informazione contenuta in un’app nativa risulta più difficile da trovare, non potendo a tale scopo essere sfruttata la potenza dei motori di ricerca: si rischia quindi di “perdere” traffico Web. Avendo poi pubblicato la PWA anche in uno Store, lo sviluppatore può comunque ricevere dagli utilizzatori dei commenti, assai utili per eventualmente migliorare il sito associato.
Il lato negativo, tuttavia, è che la professionalità degli sviluppatori di codice nativo risulta penalizzata, in quanto per realizzare PWA quella competenza non risulta più così essenziale e quindi potrà non essere così richiesta.
L’articolo Why your web project should be a PWA elenca, in particolare, le seguenti indicazioni che in parte sintetizzano quanto già da me indicato:

  • Non è più necessario creare applicazioni per ciascuna delle piattaforme mobili, nessun codice separato da sviluppare e da dover gestire. Risulta relativamente più economico rispetto allo sviluppo di applicazioni native.
  • Funziona su tutte le piattaforme e su tutti i dispositivi, massimizzando così la sua diffusione con conseguente vantaggio commerciale.
  • A differenza delle sue controparti native, funzionando all’interno del browser dell’utente, non richiede un’installazione prima del suo primo utilizzo.
  • È notevolmente migliorata la cross-funzionalità di un’app, il passaggio tra le applicazioni è molto più veloce ed intuitivo (e.g. Instant Articles di Facebook, in-app  browser per Slack). Per maggiori informazioni su Instant Articles, vedere i video tutorial presenti in Facebook Blueprint eLearning. Per informazioni sulle app collegate con Slack vederne l’elenco nell’App directory e la sezione per gli sviluppatori. Tool e servizi possono essere integrati con Slack in modo che il team può rimanere coordinato, lavorare più velocemente, mantenere le conversazioni e il contesto tutto in un unico luogo.
  • La user experience è unificata in quanto tutti gli utenti agiscono sull’unica ultima versione dell’app, che quindi avrà ovunque lo stesso aspetto, le medesime funzionalità, gli ultimi aggiornamenti di protezione, senza necessità di scaricarla ed installarla ad ogni modifica. Tutti gli utenti hanno perciò accesso alla stessa versione dell’app, fornendo costantemente la migliore esperienza utente, ottimizzata per l’intero parco di utenza.
  • Offre un grado di libertà maggiore dal sistema operativo utilizzato sulla piattaforma. Si è liberi di sviluppare una funzionalità come la si desidera, senza eventuali vincoli dettati dal sistema operativo (e.g. iOS, Android, Windows).

Tuttavia, almeno per ora le PWA hanno alcuni aspetti negativi da considerare:

  • Limitate capacità di integrazione con le funzionalità HW del dispositivo su cui girano (e.g. smartphone, tablet). Questo ne impedisce l’utilizzo per lo sviluppo di PWA che debbano interagire con gli accessori mobili ed i “wearable” (e.g. smartwatch, fitness tracker, auricolari wireless).
  • Necessità di una connessione Internet, sebbene in molti casi il Cashing e le pagine custom “offline” possano sopperire bene tale limitazione per cui molte PWA si comportano già egregiamente anche in condizioni di scarsa connettività.

È importante poi che le PWA siano presenti anche negli Store (e.g. MS Store, App Store, Google Play) per una loro categorizzazione. Microsoft si sta infatti già muovendo per inserire, anche in modo automatico, le PWA nel suo Store, effettuandone una ricerca su Web, una loro selezione e quindi una loro conversione nel formato appx proprio delle app UWP.

Ci sono solo tre requisiti tecnici per lo sviluppo di una PWA:

  • Deve essere eseguita utilizzando connessioni su HTTPS per garantire una connessione sicura con il server Web. Ciò garantisce una più sicura navigazione sul Web ed è necessario in quanto può essere concesso ad una PWA tutta una serie di privilegi extra in un sistema operativo e quindi deve essere garantita l’origine del server che genera il codice eseguito. L’uso dell’HTTPS è comunque diventato da tempo un requisito anche per tutte le comunicazione delle app iOS
  • Deve esporre un manifesto (Web App Manifest), cioè un file JSON con informazioni sul sito a cui si deve fare riferimento nell’Header delle sue pagine Web, in modo tale che possa essere trovato sia dai motori di ricerca sia dai browser. Il manifest consente di controllare come la PWA viene visualizzata ed avviata: ad esempio è possibile specificare le icone della schermata iniziale, la pagina da caricare quando l’app viene avviata, l’orientamento dello schermo e anche se deve essere visualizzata in una finestra indipendente o internamente al browser.
  • Deve avere un Service Worker che può essere creato su misura per l’attività che intende svolgere, partendo dalle indicazioni e dagli esempi presenti nelle guide per lo sviluppo. Elemento chiave che rappresenta il meglio della rivoluzione delle PWA, un Service Worker consente di gestire sia le notifiche push con i suoi task in background, sia di usufruire di contenuti offline tramite un meccanismo di cache delle risorse chiave, eliminando la dipendenza dalla rete e di fare funzionare l’app anche offline o con reti di bassa qualità. Un service worker, scritto in JavaScript,  è come un proxy client-side che gestisce la cache e come rispondere alla richieste di risorse.

Per l’utente finale le PWA si comportano e si mostrano con un look & feel tipico delle app native. Hanno per di più il vantaggio che non occupano necessariamente spazio in memoria per cui si possono utilizzare moltissime app PWA anche su telefoni con poca memoria, analogamente a come si può accedere ad innumerevoli siti con il suo browser: infatti, di fatto sono siti web che si possono “installare” nello smartphone con una modalità simile alle app native.  Inoltre l’utente si ritrova la medesima interfaccia, indipendentemente dal dispositivo usato, del suo sistema operativo e dal tipo di browser. Può trovarle più agevolmente potendole ricercare sia da un motore di ricerca sia negli Store.

Per i grandi attori Google, Microsoft ed Apple i motivi di interesse sono probabilmente differenti ma di fatto tutti si stanno impegnando per rendere i loro browser PWA-enabled. Chrome, Firefox, Opera, Safari, tra pochissimo Edge, supportano le PWA anche con le loro relative push notification. Per ora l’unico browser che supporti ufficialmente le PWA è Chrome, anche se anche Firefox ed Opera in parte lo supportino. Tra qualche settimana, con l’importante aggiornamento di Windows 10 denominato Spring Creators Update, anche Edge risulterà più compatibile con le PWA che, tra l’altro, incominceranno ad essere elencate all’interno del MS Store: un supporto più completo di Edge si avrà poi con update autunnale.

Google è stata la prima a crederci e ad implementarla nel suo browser Chrome. Alex Russell, l’ingegnere di Google Chrome, ha scritto in un articolo intitolato “Progressive Web Apps: escaping tabs without loosing our soul“, ciò che è considerato essere il ground zero per il movimento PWA: Google ha poi solidificato l’iniziativa con una sezione specifica nel portale developers.google.com, spingendo ulteriormente in avanti il concetto là espresso. Quindi, ironicamente, non è stata Microsoft il principale fautore delle PWA e questo, di primo acchito, può sorprendere in quanto Google non ha certo il problema dell’app gap. I motivi della scelta di Google sono legati ovviamente alla pubblicità ed alla indicizzazione delle informazioni: il suo modello di business è sicuramente nel Web e non nella vendita di app dal suo Store o di device Android. Quest’ultimo S.O. è stato supportato solo perché l’utente usi i Servizi Google preinstallati che operano appunto sul Web. Ciò che non interessa a Google è avere app native che inviano i dati direttamente ad un loro server, senza utilizzare le funzionalità del Web, in quanto ciò non le porta alcun vantaggio:  Google è interessata invece ad un utilizzo del Web, agli analytics, al Search Engine Optimization, per i vantaggi pubblicitari che ne derivano. Un ritorno massivo al Web anche delle app non può quindi che far comodo a Google! Le PWA consentono pienamente il tracciamento e l’engagement degli utenti: tutte le pageviews provenienti dalle app PWA installate sono tracciabili in Google Analytics. Per Google i benefici derivano perciò dal fatto che le PWA sono trattate come qualsiasi sito JavaScript il che significa che quando Google “crawl” il Web, anche per le PWA possono essere utilizzate le specifiche ottimizzazione dei motori di ricerca (SEO), cioè quelle attività volte a migliorare la visibilità di un sito web sul suo motore di ricerca, migliorandone il ranking.

Microsoft ne ha compreso un suo vantaggio non da molto, dopo avere tentato diverse strade per incrementare il popolamento del suo Store. Oltre ad avere supportato sistemi di sviluppo multipiattaforma (e.g. Xamarin), creato un Desktop Bridge per la conversione a UWP di applicazioni win32 (vedere Come convertire i programmi win32 in UWP utilizzando Desktop Bridge), ora sta vedendo nelle PWA una nuova possibilità per superare il gap attuale che il MS Store ha e con quelli della concorrenza (i.e. App Store, Google Play). Perciò Microsoft incomincerà a supportare le PWA già nella prossima release primaverile di Windows 10 e ancor più in quella autunnale.
Le PWA potranno essere introdotte nel Microsoft Store tramite due meccanismi:

  • Gli sviluppatori le inseriscono manualmente, analogamente a quanto avviene già per le altre tipologie di app. Anche se un’app PWA-UWP  può essere aggiornata in qualsiasi momento nel Windows Store, molti dei suoi contenuti sono dinamici per cui le aziende possono semplicemente apportare modifiche al backend, riducendo così il tempo di consegna ai clienti. Inoltre, per i principi su cui si basano le PWA, come il supporto per HTTPS e la presenza in uno Store che ne individua la provenienza (“siloed apps“), l’utente sa che l’applicazione è sicura.
  • Microsoft le aggiunge  automaticamente ricercandole nel Web con un suo motore di ricerca specifico (Bing Clawler), filtrando quelle PWAs che soddisfano i requisiti tecnici e di qualità richiesti, nel rispetto dei requisiti propri del MS Store. Utilizzando un Bridge specifico, se ne effettua il wrapping in contenitori appx, convertendole in UWP, inseribili perciò nello Store in modo analogo a quando già avviene con le app native. Così facendo, queste PWA acquistano anche ulteriori funzionalità, quali le live tile, l’uso di Cortana, consentire di effettuare in-app purchase per avere funzionalità aggiuntive, avere analytics più approfonditi oltre che ampliare la discoverability del sito e per di più quell’app UWP non necessita di essere più ripubblicata in quanto tutti i futuri aggiornamenti possono essere effettuati direttamente solo agendo sul sito stesso puntato. Inoltre, in questo modo una PWA non si apre nel browser bensì gira in un suo container, comportandosi proprio come un’app nativa. Questo packaging effettuato dal Bing Crawler viene effettuato gratuitamente e non c’è alcuno scambio di denaro. Poiché non si aggiunge pubblicità per avere introiti ed essendo questi siti pubblici, Microsoft non ha neppure necessità di chiedere il permesso per questa loro pubblicazione nel suo Store: nell’app generata viene messo principalmente solo un semplice link al sito.
    Già ora MS sta scandagliando il Web alla ricerca di web-app e le sta compilando come .appx in modo da poterle caricare nel suo Store, secondo quanto affermato in un post di WindowsBlogItalia. In questo modo nel MS Store si potrà presto avere il debutto di app mai arrivate nel MS Store, quali quelle di Google.
    Per queste app PWA presenti nello Store, non comporteranno una vera installazione che ruba memoria al dispositivo sebbene, da un punto di vista dell’utente finale, non cambi nulla: anzi … l’utente potrà riutilizzare  persino dispositivi con poca memoria (e.g. quelli con soli 8GB), forse abbandonati solo perché saturi dopo l’installazione di poche app.

Le PWA in Windows 10 avranno presto tutti i vantaggi delle app UWP native e l’unica infrastruttura necessaria sarà quella fornita da un qualsiasi browser idoneo a supportarle: gestiscono le notifiche, tramite sia banners sia Action Center, funzionano anche offline, si adattano ai diversi formati e alle dimensioni dello schermo, possono essere eseguite su tutte piattaforme Windows 10, non solo i PC, ma anche su Xbox One, HoloLens etc…
Utilizzando il nuovo browser Edge, Project Andromeda (nome in codice del Surface Phone) potrebbe perciò consentire di avere già anche tutte le app PWA, incluso Google Maps. Infine, c’è da aspettarsi che anche Google adotti presto una medesima politica di inserimento delle PWA nel suo store , Google Play.
Si noti invece che nel caso dell’utilizzo del Desktop Bridge per convertire le applicazioni win32, le app risultanti non sono reali UWP, ma girano all’interno di quel suo container: di conseguenza, piattaforme come Xbox, Windows Phone o HoloLens non hanno tutta l’infrastruttura necessaria e il supporto alle API Win32 che, invece, consente anche ad un sistema operativo nuovo come Windows 10 di continuare a supportare applicazioni scritte 10 anni fa con tecnologie ormai legacy.

Lo step “Install” può anche essere abilitato in una app PWA attraverso il suo manifest, che fornisce al browser tutte le informazioni necessarie (e.g. l’icona per ogni tipo di dispositivo, lo splash screen, la visualizzazione portrait/landscape e se l’app sta operando autonomamente dal browser).

Con Google Chrome si può già effettuarne il pin di un sito nel desktop e nella barra di Start: lo screenshot seguente  mostra come farlo nel caso della PWA Twitter Lite, sebbene lo si possa fare con qualsiasi sito, ad esempio quello di questo blog. Questo da già un’idea di come le PWA 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.

Pin a site to desktop/Start: … -> More tools -> Add to desktop

Set Open as a window to run the site outside Chrome browser

Si noti tuttavia che l’icona associata a quell’app, quando inserita come tile, risulta quella generica di una Google app e non è specifica dell’app. Diversamente avviene già qualora si utilizzi Edge che mostra nel live tile già una icona specifica del sito.

The site is pinned in the Start menu and can be added also as a live tile

Attualmente l’icona con il link al sito viene inserito nel menu di Start nella cartella Chrome Apps (e.g. C:\Users\Enzo\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Chrome Apps).

Il link al sito viene inserito nella cartella Chrome Apps (1)

Avendo indicato Open as window nella popup di Add to desktop, cliccando sull’icona di Twitter Lite presente nel menù di Start, si apre il sito in una finestra a parte, svincolata dal browser che comunque in background fornisce le funzionalità di base.

Il sito si apre in una finestra svincolate da Chrome, apparendo come fosse un’app.

Analogamente si ottiene se si effettua un Add to desktop di un qualsiasi sito anche non PWA, quale ad esempio questo blog.
Si noti che se poi uno cerca di disinstallare da quell’icona l’app, viene subito aperta da Windows 10 automaticamente il Control Panel\Programs\Programs and Features come se si trattasse di una disinstallazione di un’applicazione win32 … ma ovviamente non risulta presente quell’app tra la lista delle app disinstallabili da quella sezione del Control Panel: evidentemente questa parte non è ancora correttamente gestita da Windows 10 nella sua attuale release e probabilmente lo sarà presto in quella primaverile!

Add to desktop di un qualsiasi sito anche non PWA, quale ad esempio questo blog.

Si può aprire anche esternamente al browser, similmente ad un’app.

Già oggi, gli sviluppatori interessati a testare una PWA in Windows 10 possono già abilitare in Microsoft Edge una sua funzionalità “nascosta” che supporta la tecnologia dei Service Worker, appunto richiesta dai PWA.
Si può effettuare questa abilitazione è sufficiente navigare in about: flags, per visualizzare alcune opzioni in preview, specialmente utili agli sviluppatori.
In particolare, scorrendo in basso nell’area di anteprima standard, è possibile attivare l’opzione “Abilita i processi di lavoro dei servizi“, vale a dire i Service Worker.
In realtà questa abilitazione non fornisce ancora, per ora, le funzionalità di notifica ed altro previsto dalle PWA, ma semplicemente consente ad uno sviluppatore di testare una sua PWA affinché possa essere pronta per una sua sottomissione nel Microsoft Store tra poche settimane/giorni …

Navigando in about: flags, nell’area di anteprima standard si può attivare l’opzione “Abilita i processi di lavoro dei servizi“, vale a dire i Service Worker

Essendo il browser Edge una UWP, la medesima funzionalità relativa all’URL about:flags esiste anche sugli altri device Windows 10, quale Windows 10 Mobile, dove risulta avere addirittura più voci abilitabili: anche qui si può notare una sezione dedicata ai Service Workers, Push Notifications, Background Sync, Cache Storage).

about:flags settings page in Edge for Windows 10 Mobile (1)

about:flags settings page in Edge for Windows 10 Mobile (2)

about:flags settings page in Edge for Windows 10 Mobile (3)

about:flags settings page in Edge for Windows 10 Mobile (4)

Nel prossimo futuro, quindi non ci sarà più bisogno necessariamente di interagire con l’interfaccia utente del browser Web, ma basterà installare la PWA dallo Store analogamente a quanto avviene per qualsiasi altre UWP.

Già ora  dal browser Edge, nel caso si richieda per un sito qualsiasi il Pin this page to Start, questa viene inserita con una opportuna icona (e.g. nel caso di un blog di WordPress è l’icona del profilo dell’utente): tuttavia per ora cliccando su quella icona viene aperto il sito internamente ad Edge e non è ancora possibile svincolarlo in una window a parte, come invece è già ora possibile con Chrome selezionando l’apposita checkbox.

Pin this page to Start con il browser Edge (1)

Pin this page to Start con il browser Edge (2)

Pin this page to Start con il browser Edge (3)

solo Apple ha tardato a prendere una sua decisione in merito alle PWA, in quanto confidava nelle sue app e del suo App Store, essendo stata lei la prima a promuovere questa tipologia di diffusione delle applicazioni. Ma avere Samsung, Google e Microsoft che implementano tale funzionalità che consente un più agevole singolo punto di contatto con il mondo consumer, ha fatto propendere anche lei ad accettare tale metodologia: perciò recentemente (febbraio 2018) ha dichiarato che il supporto per le PWA ci sarà presto in iOS 11.3 e macOS 10.13.4 perciò entro la fine di dell’anno, sebbene già ad ottobre 2017 c’erano stati segnali positivi (e.g. Work on Web App Manifest in WebKit has Begun).

Si noti che, anche se un browser specifico attualmente non supporta tutte le features previste da una PWA, vale a dire non supporta i Service Worker e/o i Web App Manifest, ciò non significa che un sito sviluppato con quella tecnologia non possa essere navigato utilizzandolo,  … anzi, magari anche solo con quello ha performance migliori  a quelle che si ottenevano con il precedente sito, sviluppato con tecnologie più tradizionali ed ora soppiantato: vuole solo dire che la PWA non può magari ricevere push notification, essere inserita automaticamente nella schermata di Start/Home e funzionare anche offline. Comunque, anche ora persino in ambito Apple, in attesa di nuove versione del browser Safari, anche sulla versione attuale è comunque sempre possibile aggiungere manualmente l’installazione di un sito nella homescreen (e.g. utilizzando ember-web-app) ed anche implementare le notifiche push di OS X dal sito Web o effettuando un wrapping della PWA in un’applicazione nativa per ottenere l’approvazione iniziale per le notifiche; il funzionamento anche offline risulta invece difficilmente percorribile senza uno specifico supporto del browser.

Come giustamente viene detto qui, “A Progressive Web App done right doesn’t leave anyone out.

Effettuando ricerche su Internet, ho  trovato il sito pwa.rocks, progetto opensource presente su GitHub (List of Progressive Web Apps), che racchiude un elenco di icone relative ad alcune PWA esistenti, suddividendole per categoria e consentendo a chiunque di suggerirne una ulteriore, previa autenticazione in GitHub ed tramite un inserimento manuale del codice indicato, da specializzare per puntare anche ad un ulteriore sito nuovo: insomma non certo una procedura agevole quanto una agevole pubblicazione in uno Store! Comunque, nel suo piccolo, già anche questo sito realizza una funzionalità simile a quella di uno Store, vale a dire una categorizzazione e la possibilità di effettuare un’agevole ricerca per argomenti di ciò che si desidera.

PWA rocks: lista di Progressive Web App suddivise per categorie

Un qualcosa di analogo viene fornito anche nel sito https://www.progressivewebapproom.com.

Oltre ad Apple, Microsoft e Google che mettono o metteranno il supporto per PWAs nei loro rispettivi browser, molte sono poi le aziende che stanno già modificando i loro siti Web per renderli PWA, perché in fondo sono solo siti che possono fornire una migliore user experience già ora, anche utilizzando un browser classico.
Anche su Wikipedia esiste un elenco, non certo esaustivo, di alcune PWA, così come anche in questo post di Windows Central dove sono indicati alcuni siti PWA-Enabled:

… il loro numero è in continua crescita e tutte le major company stanno abbracciando questa tecnologiaAlibaba, Trivago (ditta leader nella prenotazione di hotel), Weather Channel, The Financial Times, Offline Wikipedia, Medium, Flipboard, Snapdeal, Pokedex.org, Flipkart, Forbes, Lancôme , BookMyShowVoot.com, MakeMyTrip.com, George.com

Alcune PWA sono in preview, come Twitter che ha Twitter Lite. Per averla come app sul proprio smartphone è sufficiente andare sul sito Twitter: se non appare la richiesta di installazione, si può usare l’opzione Add to home screen presente nel menu in alto.

L’implementazione della tecnologia PWA ha portato a Twitter:

  • 65% aumento pagine per sessione.
  • 75% aumento dei Tweets inviati.
  • 20% riduzione del bounce rate ( percentuale di visitatori che entrano nel sito e poi lo lasciano, piuttosto che continuare a visualizzare altre pagine all’interno dello stesso sito).
  • 70% riduzione della banda utilizzata nella normale navigazione. Da considerare inoltre il saving sul download dell’app che pesa 23.5 MB contro l’installazione della PWA che pesa soltanto 600K.

Lancôme ha registrato, con il nuovo sito PWA:

  • un incremento delle prestazioni dell’84% (tempi di caricamento minori),
  • un incremento del 17% delle conversioni
  • un incremento dell’8% sui carrelli abbandonati grazie alle notifiche push.

La PWA di Instagram è già molto performante e gestisce diverse modalità di interazione (e.g. accede alla telecamera; gestisce il double-tap per inserire un like) e anche se non ha ancora tutte le funzionalità presenti nell’app nativa, sicuramente evolverà anche grazie al probabile progredire della tecnologia PWA, attualmente solo alla versione 1.0.

C’è anche da aspettarsi che alcune compagnie, ad esempio Twitter ed Instagram, nel prossimo futuro sostituiscano negli Store le loro app native con le loro rispettive PWA, attualmente in Beta: Twitter ha già attualmente deprecato la sua app su Mac OS.

Così come ha fatto per Outlook.com, Microsoft probabilmente renderà PWA-compliant tutti gli altri suoi servizi sul Web, quindi è lecito supporre anche OneDrive.

Esistono inoltre alcuni tool opensource che consentono di realizzare PWA da propri siti, come ed esempio il plugin “Super Progressive Web Apps” di WordPress.

In un post di WindowsBlogItalia viene mostrato come usare Google Maps su un device con Windows 10 Mobile con la PWA ufficiale: per ora questa PWA realizzata da Google non supporta ancora la navigazione turn-by-turn, ma è solo questione di tempo e già ora è molto performante per cui l’esperienza utente risulta analoga a quella che si ha tramite l’omonima app.
Si noti che, in quel caso specifico, esiste anche nel MS Store anche un’app UWP di terze parti, quindi non una web-app, che implementa il client per Google Maps: attualmente è in fase di sviluppo ma risulta comunque installabile attivando sul proprio smartphone la modalità sviluppatore.

=======================================

Per chi vuole poi cimentarsi a provare a sviluppare una semplice PWA di esempio, suggerisco di vedere questi siti, oltre che ovviamente il Getting Started With PWA nel sito Google dedicato agli sviluppatori:

Informazioni su Enzo Contini

Electronic engineer
Questa voce è stata pubblicata in Aziendali, Java, Review e test, Tecnologia, Windows, Windows Phone/Mobile. Contrassegna il permalink.

Lascia un Commento/Leave a comment

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

w

Connessione a %s...