WEB APP OFFLINE

WEB APP OFFLINE
11 marzo 2016 Marina Masi

Oggi, nell’era di Internet, comprare un’automobile, una borsa, un paio di pantaloni è un’operazione oltremodo semplice ed “a portata di click”, pagare un bollettino postale non richiede necessariamente ore di interminabile fila allo sportello, conoscere nuovi amici all’altro capo del mondo ed interagire con loro è quanto mai semplice ed immediato. Anche il concetto di Web App ha rivoluzionato il modo di gestire operazioni e processi altrimenti più lenti e molto più complessi, garantendo accessibilità da qualunque punto del mondo e con qualsiasi client si abbia a portata di mano, a patto ovviamente di poter usufruire di una connessione ad Internet.

Questa “condicio sine qua non” potrebbe a prima vista non apparire un grosso problema visto che siamo ormai perennemente on line, grazie anche alle sempre più diffuse connessioni a pacchetto. Nella pratica è però non inusuale ritrovarsi nelle condizioni in cui una mancanza di campo e di relativa connessione (soprattutto quando ci colleghiamo attraverso dispositivi mobili) possa metterci di fatto nell’impossibilità di utilizzare le nostre web app. Proprio per ovviare a questo tipo di problemi, si sta sempre più diffondendo l’idea di fare in modo che le applicazioni web siano in grado di funzionare anche in modalità offline. “Web” ed “online” sono due parole molto strettamente correlate l’una all’altra, se non addirittura sinonime.

Come è possibile dunque parlare di tecnologie web offline?

Innanzitutto è importante fare un distinguo tra applicazioni completamente offline ed applicazioni “online/offline”. Nel primo caso ci troviamo di fronte a degli applicativi che girano all’interno di un browser senza mai connettersi ad internet (ma rappresentano una rarità). Nella stragrande maggioranza dei casi, l’approccio utilizzato è infatti quello di fare in modo di conservare una copia locale dei dati che consenta all’applicazione di girare in maniera indipendente anche in assenza di connessione per periodi più o meno lunghi, per poi “sincronizzarsi” ed aggiornare i dati, non appena c’è la possibilità di entrare nuovamente in rete.

Le applicazioni online/offline pagano certamente il prezzo di una maggiore complessità implementativa ed è quindi importante chiedersi a priori se una scelta di questo tipo sia giustificata e per quali motivi.

HTML5 fornisce una serie di features che rendono il web offline una realtà: l’offline caching e l’offline storage (o “client-side” storage) innanzitutto. Gli sviluppatori possono utilizzare l’application cache (AppCache) per specificare le risorse che il browser deve memorizzare in cache e renderle poi disponibili all’eventuale utente offline. L’utilizzo dell’AppCache fornisce il beneficio di garantire che l’esperienza di navigazione possa continuare anche in modalità offline con prestazioni migliori (poiché le pagine sono memorizzate in locale e  vengono caricate con maggiore velocità) e notevole riduzione del carico sul server. Per abilitare l’application cache, è necessario includere l’attributo manifest nell’elemento <html> delle pagine dell’applicazione, come mostrato nella figura seguente:

L’attributo manifest fa riferimento ad un cache manifest all’interno del quale sono elencate tutte le pagine che il browser deve memorizzare. L’utilizzo di questo tipo di cache va a modificare il flusso del normale caricamento dei documenti: il documento e le risorse ad esso associate vengono infatti caricate direttamente dalla cache, senza accedere in rete. Contemporaneamente però il browser controlla se il cache manifest sul server è stato aggiornato ed in questo caso scarica la nuova versione e le risorse in esso elencate. Ma tutto questo potrebbe non essere sufficiente. HTML5 ha di fatto introdotto il concetto di “offline storage”, ovvero la possibilità di memorizzare e gestire le informazioni direttamente sul dispositivo dell’utente, con la possibilità di recuperare quanto salvato quando e come si desidera. Le “Storage APIs” messe a disposizione dai moderni browser sono di gran lunga superiori rispetto alle tecniche utilizzate in passato (potrebbero esserci però dei problemi in termini di retrocompatibilità per vecchi browser).

Tra le Web APIs più utilizzate abbiamo:

  • Web Storage: fornisce semplicemente un mapping di tipo key/value (localStorage[“name”] = username;).
  • Web SQL Database: Fornisce tutto il potere (e per contro anche la complessità) di un database relazionale SQL.
  • IndexedDB: E’ un ibrido tra il Web Storage ed il Web SQL Database. Come il Web Storage è un mapping di tipo chiave/valore ma supporta gli indici come i db relazionali e quindi introduce maggiore velocità.
  • File Access: E’ una API per la lettura di file Javascript. Dato un set di file, è possibile leggerne il contenuto o referenziarlo come un URL.

E’ importante dunque comprendere come l’app caching e l’offline storage lavorino in maniera complementare rispettivamente per memorizzare le pagine html e le risorse da queste utilizzate (css, javascript, immagini ..) e per mantenere i dati da queste visualizzate (all’interno di uno storage locale), aprendo nuove possibilità e scenari che, per quanto più complessi, danno vita a soluzioni di gran lunga più funzionali e performanti.