Latest web development tutorials

HTML5 Application Cache

Utilizzare HTML5, con la creazione di un file manifesto di cache, si può facilmente creare versioni offline di applicazioni web.


Qual è la cache di applicazione (Application Cache)?

HTML5 introduce cache dell'applicazione, il che significa che le applicazioni web possono essere memorizzati nella cache, e si può accedere senza una connessione Internet.

applicazione cache di applicazione comporta tre vantaggi:

  1. navigazione offline - gli utenti possono usarli in applicazione offline
  2. Velocità - cache risorse caricare più velocemente
  3. Ridurre il carico del server - il browser scaricherà solo le risorse aggiornati o modificati dal server.

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari e Opera supporta la cache dell'applicazione.


Esempi di HTML5 Cache Manifest

L'esempio seguente mostra il documento HTML con un manifesto di cache (per la visualizzazione offline):

Esempi

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

<body>
文档内容......
</body>

</html>

Prova »


base Cache manifesto

Per abilitare la cache dell'applicazione, l'etichetta contiene l'attributo manifesta nel documento <html>:

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

Il manifesto pagina specificata quando gli utenti accedono loro verrà memorizzata nella cache. Se l'attributo manifesto non è specificato, la pagina non verrà memorizzata nella cache (a meno che non specificare direttamente la pagina nel file manifesto).

Suggerita estensione del file manifesto: ". AppCache".

osservazione Si prega di notare, i file manifesto bisogno di configurare il tipo MIME corretto, vale a dire "text / cache-manifesto". Devi essere configurato sul server web.


file manifesto

file manifesto è un semplice file di testo che racconta il contenuto del browser della cache (e non memorizza nella cache il contenuto).

file manifesto possono essere divisi in tre parti:

  • CACHE MANIFEST - nel titolo di questo documento verrà memorizzato nella cache dopo il primo download
  • RETE - In questo titolo i seguenti documenti devono connettersi al server, e non saranno memorizzati nella cache
  • FALLBACK - In questo elencato sotto le pagine di intestazione documenti di rollback (ad esempio, pagina 404) quando la pagina non è accessibile

CACHE MANIFESTO

La prima linea, CACHE MANIFESTO, è necessario:

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

Il file manifesto sopra elencate tre risorse: un file CSS, un'immagine GIF, e un file JavaScript. Quando il file manifesto viene caricato, il browser scaricherà i tre file dalla directory principale del sito. Poi, ogni volta che l'utente si disconnette da Internet, queste risorse sono ancora disponibili.

RETE

Le seguenti disposizioni del file di sottosezioni RETE "login.php" non è mai memorizzati nella cache e disponibile non in linea non è disponibile:

NETWORK:
login.php

È possibile utilizzare un asterisco per indicare tutte le altre altre risorse / file richiedono una connessione a Internet:

NETWORK:
*

FALLBACK

sezioni di riserva di cui qui di seguito Se non è possibile stabilire una connessione Internet, con "offline.html" / HTML5 / directory alternativa di tutti i file:

FALLBACK:
/html/ /offline.html

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


Aggiornamento cache

Una volta che l'applicazione viene memorizzato nella cache, esso rimarrà nella cache fino a quando si verifica quanto segue:

  • Gli utenti Svuota la cache del browser
  • file manifesto viene modificato (vedi suggerimenti riportati di seguito)
  • Con il programma per aggiornare la cache dell'applicazione

Esempio - Completare il file manifesto

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

osservazioneTip: Il "#" all'inizio della linea di commento, ma anche per incontrare altri scopi.applicazione caching verrà aggiornato quando i suoi cambiamenti di file manifesto. Se si modifica una foto, o modificare una funzione JavaScript, questi cambiamenti non verranno nuovamente memorizzate nella cache. Aggiornamento riga di commento è una data e numero di versione del browser di ri-cache approccio file.


A proposito di istruzioni cache dell'applicazione

Si prega di prestare attenzione ai contenuti della cache.

Una volta che i file vengono memorizzati nella cache, il browser continua a visualizzare la versione in cache, anche se si modifica il file sul server. Per assicurarsi che il browser per aggiornare la cache, è necessario aggiornare il file manifesto.

Nota: il limite di capacità del browser per i dati memorizzati nella cache potrebbe non essere la stessa (alcune impostazioni del browser restrizioni è che ogni sito 5MB).