PWA (Progressive Web App)
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 normali pagine web a seconda delle funzionalità offerte dal dispositivo. 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. Diverse aziende hanno riscontrato notevoli miglioramenti in diversi indicatori chiave di prestazione, come un aumento nel tempo speso nel sito o nelle conversioni dei nuovi utenti.
Nel 2015, Frances Berriman e lo sviluppatore Alex Russell di Google Chrome hanno coniato il termine "Progressive Web Apps" 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, 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 e al service worker registration scope che consente ai motori di ricerca di trovarle.
- Riattivabili - Rendono facile la riattivazione dell'applicazione grazie a capacità quali le notifiche push.
- Installabili - Consentono all'utente di "salvare" 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.
- Linkabili - Facilmente condivisibili tramite l'URL e non richiedono complesse installazioni.
Le Progressive Web Apps 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:
- Vengono esposte da una Sorgente Sicura https. Vengono servite su protocollo TLS con la visualizzazione del lucchetto verde nel browser .
- Possono essere caricate ed eseguite anche mentre il terminale dell'utente è offline (anche in caso si tratti solo di una pagina creata allo scopo). Per ottenere questa funzionalità 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 (il cui valore può 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" } ]
Per la creazione di una PWA occorre creare:
Json Manifest
Il manifesto della web app è una specifica del W3C in formato JSON che fornisce agli sviluppatori il posto dove mettere i metadata associati con l'applicazione web tra cui:
- 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 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
- Attivate e mantenute attive dalle relazioni con gli eventi, e non da quelle con i documenti
- Generiche nella loro natura
- Event-driven con un limite di tempo nel contesto dello scripting ed eseguite all'origine
- Con endpoint naturali per un ampio insieme di servizi runtime
- Hanno uno stato
- Con l'URL di uno script
- Contengono la registrazione
- 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
- 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 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.