Con cache dell'applicazione è facile fare una versione offline di un'applicazione web, con la creazione di un file manifesto di cache.
Che cosa è Application Cache?
HTML5 introduce cache dell'applicazione, il che significa che un'applicazione web viene memorizzata nella cache, e accessibile senza una connessione ad internet.
cache dell'applicazione dà un'applicazione tre vantaggi:
- La navigazione offline - gli utenti possono utilizzare l'applicazione quando sono offline
- Velocità - cache risorse caricare più velocemente
- Riduzione del carico del server - il browser scaricherà aggiornati solo risorse / modificate dal server
sfondo
Le applicazioni Web sono costituiti da pagine web che hanno bisogno di essere scaricato da una rete. Perché ciò avvenga ci deve essere una connessione di rete. Tuttavia, ci sono molti casi in cui gli utenti non possono connettersi a una rete a causa di circostanze al di fuori del loro controllo. HTML5 offre la possibilità di accedere alle applicazioni web anche senza una connessione di rete utilizzando il manifesto della cache.
Le applicazioni Web sono costituite da risorse identificate da URL. Questi possono essere HTML, CSS, JavaScript, immagini o qualsiasi altra sorgente che è necessario per un'applicazione web per essere reso. I loro indirizzi possono essere copiati in un file manifesto, che può essere regolarmente aggiornato dall'autore dell'applicazione web, indicando eventuali nuovi indirizzi web che vengono aggiunti o eliminati. Quando ci si connette a una rete per la prima volta, un web browser leggerà il file manifesto HTML5, scarica le risorse date e memorizzarli localmente. Poi, in assenza di una connessione di rete, il browser web si sposterà alle copie locali invece e rendere la linea di applicazioni web.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente Application Cache.
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML cache Manifest Esempio
L'esempio seguente mostra un documento HTML con un manifesto di cache (for offline browsing) :
Esempio
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html> Prova tu stesso " Cache manifesto Basics
Affinché le applicazioni non in linea per lavorare, un file manifesto cache deve essere creata dallo sviluppatore web. Se l'applicazione Web è superiore a più di una pagina ogni pagina deve avere un attributo palese che punta al manifesto cache. Ogni pagina fa riferimento il manifesto verrà memorizzato localmente. Il file manifesto di cache è un file di testo che si trova in un'altra parte del server. Deve essere servito con il tipo di contenuto che segue:
text/cache-manifest
Per abilitare la cache dell'applicazione, includere il manifest attributo nel documento <html> tag:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Ogni pagina con il manifest attributo specificato verrà memorizzato nella cache quando l'utente lo visita. Se il manifest attributo non è specificato, la pagina non verrà memorizzata nella cache (unless the page is specified directly in the manifest file) .
L'estensione del file consigliata per i file manifesto è: ".appcache"
Un file manifesto deve essere servito con il correct media type , che è "text/cache-manifest" . Deve essere configurato sul server web.
Il file manifesto
Il file manifesto è un semplice file di testo, che dice al browser quali memorizzare nella cache (and what to never cache) .
Il file manifesto ha tre sezioni:
- CACHE MANIFEST - I file elencati sotto questa intestazione verrà memorizzata nella cache dopo che sono stati scaricati per la prima volta
- NETWORK - file elencati sotto questa intestazione richiede una connessione al server, e non sarà mai memorizzata nella cache
- FALLBACK - I file elencati sotto questa intestazione specifica pagine fallback se una pagina è inaccessibile
CACHE MANIFESTO
La prima linea, CACHE MANIFESTO, è necessario:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
Il file manifesto sopra elenca tre risorse: un file CSS, immagini GIF, e un file JavaScript. Quando il file manifesto viene caricato, il browser scaricherà i tre file dalla directory principale del sito web. Quindi, ogni volta che l'utente non è connesso a Internet, le risorse saranno ancora disponibili.
RETE
La sezione di rete sotto specifica che il file "login.asp" non dovrebbe mai essere messo in cache, e non sarà disponibile offline:
NETWORK:
login.asp
Un asterisco può essere utilizzato per indicare che tutte le altre risorse / file richiedono una connessione internet:
NETWORK:
*
RICADERCI
La sezione FALLBACK seguito specifica che "offline.html" sarà servita al posto di tutti i file nella / html / catalogo, nel caso in cui una connessione internet non è possibile stabilire:
FALLBACK:
/html/ /offline.html
Nota: Il primo URI è la risorsa, il secondo è il fallback.
Aggiornamento della cache
Una volta che un'applicazione viene memorizzato nella cache, esso rimane nella cache finché una delle seguenti circostanze:
- L'utente cancella la cache del browser
- Il file manifesto viene modificato (see tip below)
- La cache di applicazione è di programmazione aggiornato
Esempio - cache Complete File manifesto
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Tip: Le linee che iniziano con un "#" sono righe di commento, ma può anche servire un altro scopo. la cache di un'applicazione viene aggiornata solo quando il suo modifiche apportate ai file manifesto. Se si modifica un'immagine o modificare una funzione JavaScript, tali modifiche non verranno nuovamente memorizzate nella cache. Aggiornare la data e la versione in una riga di commento è un modo per rendere il browser ri-cache i file.
Note sulla Cache Application
Fate attenzione con quello che si memorizzare nella cache.
Una volta che un file viene memorizzato nella cache, il browser continuerà a mostrare la versione in cache, anche se si modifica il file sul server. Per garantire il browser aggiorna la cache, è necessario modificare il file manifesto.
Nota: I browser possono esistere limiti di dimensioni diverse per i dati memorizzati nella cache (some browsers have a 5MB limit per site) .