Application Cache HTML5

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

Cos'è l'Application Cache?

HTML5 ha introdotto l'Application Cache, il che significa che è possibile memorizzare in cache le applicazioni web e accedervi senza connessione a 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 dei 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 tu stesso

Fondamenti di 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 la pagina non sia specificata direttamente nel file manifest).

La suggerita estensione di file per il file manifest è: ".appcache".

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

Manifesto 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 - I file elencati sotto questo titolo verranno memorizzati nella cache dopo il primo download
  • NETWORK - I file elencati sotto questo titolo necessitano di una connessione al server e non verranno memorizzati nella cache
  • FALLBACK - Nella sezione di questo titolo, i file elencati definiscono le pagine di fallback quando la pagina non è accessibile (ad esempio, la pagina 404)

CACHE MANIFEST

La prima riga, CACHE MANIFEST, è necessaria:

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

Il file manifest elencato sopra 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. Poi, indipendentemente dal momento in cui l'utente si disconnette dalla rete, queste risorse rimarranno 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

Puoi usare l'asterisco per indicare che tutti gli altri risorse/file necessitano di una connessione Internet:

NETWORK:
*
FALLBACK

La sezione FALLBACK di seguito 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 verificano una delle seguenti condizioni:

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

Esempio - File Cache Manifest completo

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 servire ad altri scopi. La cache applicativa viene aggiornata solo quando il file manifest cambia. Se editi un'immagine o modifici una funzione JavaScript, queste modifiche non verranno ricalcate nella cache. Aggiornare la data e il numero di versione nella riga di commento è un modo per far aggiornare la cache del 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 hai modificato il file sul server. Per garantire che il browser aggiorni la cache, devi aggiornare il file manifest.

Nota:I limiti di capacità della cache dei dati del browser possono variare (alcuni browser limitano a 5MB per sito).