Cache dell'applicazione HTML5

Utilizzando la cache dell'applicazione, è possibile creare facilmente una versione offline dell'applicazione web creando un file manifest cache.

Cos'è la cache dell'applicazione?

HTML5 ha introdotto la cache dell'applicazione (Application Cache), il che significa che è possibile memorizzare in cache le applicazioni web e accedervi senza connessione internet.

La cache dell'applicazione offre tre vantaggi all'applicazione:

  1. Navigazione offline - gli utenti possono usarle quando l'applicazione è offline
  2. Velocità - le risorse in cache si caricano più rapidamente
  3. Ridurre il carico del server - il browser scaricherà solo le risorse aggiornate o modificate dal server

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente la cache dell'applicazione.

API
Cache dell'applicazione 4.0 10.0 3.5 4.0 11.5

Esempio di HTML Cache Manifest

L'esempio seguente mostra un documento HTML con cache manifest (per navigazione offline):

Esempio

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Contenuto del documento ......
</body>
</html>

Prova a te stesso

Fondamenti del Cache Manifest

Per abilitare la cache dell'applicazione, includi l'attributo manifest nel tag <html> del documento:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Ogni pagina specificata con il manifest viene memorizzata nella cache ogni volta che l'utente la visita. Se non viene specificato l'attributo manifest, la pagina non verrà memorizzata nella cache (a meno che non venga specificata direttamente nella pagina del file manifest).

La suggerita estensione del file manifest è: ".appcache".

Attenzione:Il file manifest deve avere il corretto MIME-type, ovvero "text/cache-manifest". Deve essere configurato sul server web.

Manifesto del file

Il file manifest è un semplice file di testo che informa il browser dei contenuti memorizzati nella cache (e dei contenuti non memorizzati nella cache).

Il file manifest ha tre parti:

  • CACHE MANIFEST - Sotto questo titolo, i file elencati verranno memorizzati nella cache dopo il primo download.
  • NETWORK - Sotto questo titolo, i file elencati necessitano di una connessione al server e non verranno memorizzati nella cache.
  • FALLBACK - Sotto questo titolo, i file elencati specificano le pagine di fallback quando la pagina non è accessibile (ad esempio, la pagina 404).

CACHE MANIFEST

La prima riga, CACHE MANIFEST, è obbligatoria:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Il file manifest elenca tre risorse: un file CSS, un'immagine GIF e un file JavaScript. Dopo che il file manifest è stato caricato, il browser scaricherà questi tre file dal directory root del sito. Successivamente, indipendentemente dal momento in cui l'utente si disconnette dalla rete, queste risorse resteranno disponibili.

NETWORK

La sezione NETWORK del documento specifica che il file "login.php" non verrà mai memorizzato nella cache e non sarà disponibile offline:

NETWORK:
login.asp

È possibile utilizzare l'asterisco per indicare che tutti gli altri risorse/file necessitano di una connessione Internet:

NETWORK:
*
FALLBACK

La parte FALLBACK sottostante stabilisce che se non è possibile stabilire una connessione Internet, utilizzare "offline.html" per sostituire tutti i file nella directory /html/:

FALLBACK:
/html/ /offline.html

Nota:Il primo URI è la risorsa, il secondo è il sostituto.

Aggiornamento della cache

Una volta che l'app è stata cacheata, rimarrà nella cache fino a che non si verifica una delle seguenti condizioni:

  • L'utente svuota la cache del browser
  • Il file manifest è stato modificato (vedi suggerimenti di seguito)
  • Aggiornamento dell'app cache tramite programma

Esempio - Manuale completo del file Cache Manifest

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Suggerimento:Le righe che iniziano con "#" sono righe di commento, ma possono anche soddisfare altri scopi. La cache applicativa viene aggiornata solo quando il file manifest cambia. Se editi un'immagine o modifichi una funzione JavaScript, queste modifiche non verranno ricacheate. Aggiornare la data e il numero di versione nella riga di commento è un modo per far ricacheare i file dal browser.

Considerazioni sull'app cache

Attenzione al contenuto della cache.

Una volta che il file è stato cacheato, il browser continuerà a visualizzare la versione cacheata, anche se avete modificato il file sul server. Per garantire che il browser aggiorni la cache, è necessario aggiornare il file manifest.

Nota:La capacità di capacità di cache dei browser può variare (alcuni browser limitano ciascun sito a 5MB).