Come impostare una pagina Web HTML5 per Offline Cache

La maggior parte delle applicazioni basate sul Web funzionano solo se si è in linea, che fa un certo tipo di senso. Ma HTML5 ha un meccanismo per forzare una parte di una pagina web e le sue risorse per essere memorizzati sul computer locale in modo da poterlo visualizzare in modalità offline. Si può avere una pagina si identifica per questo comportamento e tentare di salvare una copia sul computer locale automaticamente; per esempio:

<! DOCTYPE HTML>
<Html lang = "it"
manifesto = "cache.manifest">
<Head>
<Title> offline.html </ title>
<Meta charset = "UTF-8" />
<Link rel = "stylesheet"
type = "text / css"
href = "offline.css" />
<Script type = "text / javascript"
src = "offline.js">
</ Script>
</ Head>
<Body onload = "setCaption ()">
<H1> Offline bagagli Demo </ h1>
<Div>
<Img src = "pot.jpg"
alt = "ceramiche mano inciso" />
<P id = "caption"> </ p>
</ Div>
</ Body>
</ Html>

Mentre estremamente semplice, questa pagina riesce a richiamare le risorse da diversi file. Naturalmente, richiede l'pot.jpg dell'immagine, ma utilizza anche un file JavaScript esterno (offline.js) e un foglio di stile esterno (offline.css). HTML5 offre un meccanismo che consente al browser di salvare automaticamente non solo il file HTML, ma tutte le altre risorse di cui ha bisogno per visualizzare correttamente.

Tu non costruire una pagina così semplice con tante dipendenze esterne, ma questo è il punto di questo particolare esercizio.

Il segreto è in un file speciale denominato cache.manifest. Questo file speciale è semplicemente un file di testo che indica quali altri file sono necessari per la pagina. Ecco il contenuto della cache.manifest per questo particolare esempio:

CACHE MANIFESTO
offline.css
offline.js
pot.jpg

Il file deve iniziare con la frase CACHE MANIFEST (tutto in maiuscolo). Ogni riga successiva deve contenere il nome di un file richiesto per completare la pagina. E 'più facile se tutti i file sono nella stessa directory, ma i riferimenti relativi sono accettabili.

Seguire questa procedura per impostare una pagina per la cache non in linea:

  1. Configurare il server per la gestione cache.

    Il meccanismo di cache utilizza il / tipo MIME manifesto testo. Il server non può ancora essere predisposto per questo tipo di dati. Se si utilizza Apache, questo è facile da risolvere. Cercare (o creare) un file di testo chiamato .htaccess nella directory principale del server web. Aggiungere la seguente riga al file:

    AddType text / manifest cache-manifesto

    Se non hai il permesso di aggiungere o modificare .htaccess o si utilizza un altro server, potrebbe essere necessario chiedere all'amministratore del server per aggiungere questo tipo MIME.

  2. Crea il tuo file manifesto con la costruzione di un file di testo chiamato cache.manifest nella stessa directory del progetto.

    Effettuare la prima linea di lettura CACHE MANIFESTO. Su ogni linea successiva, elencare uno dei beni vostra pagina avrà bisogno. Potrebbe essere necessario guardare attraverso il codice sorgente per trovare i vari elementi (normalmente immagini, CSS e file JavaScript) che la pagina avrà bisogno.
  3. Costruire la pagina in modo normale.

    Tenere traccia delle eventuali risorse esterne potreste avere bisogno.
  4. Indicare che la pagina sarà richiesta di archiviazione locale aggiungendo l'attributo manifesto al tag <html> e un link al file cache.manifest.
  5. Carica la tua pagina.

    Ovviamente, non è possibile verificare la cache su un computer locale (a meno che non si sta eseguendo il vostro web server e di test proprio attraverso l'indirizzo http: // localhost). Avrai bisogno di caricare i file su un server. La prima volta che si tenta di accedere alla pagina, il browser probabilmente chiedere il permesso di salvare i dati in locale. Concedere il permesso di farlo.
  6. Prova in linea.

    Per vedere se la pagina funziona, disconnettersi da Internet (spegnendo il wireless o scollegare il cavo di rete). Provare a caricare nuovamente la pagina. Se hai successo, l'intera pagina verrà caricato.

I browser hanno già una forma di cache che memorizza automaticamente le pagine che l'utente ha visitato, ma questo tipo di cache è un diverso, forma più intenzionale di cache.

Si noti che non è possibile mettere i link alle attività lato server nella cache. Una cache locale non può memorizzare un programma PHP o database. Tuttavia, è possibile memorizzare tutti i dati che riguardano il client in modo che il progetto continuerà a funzionare senza una connessione al server.

Se si modifica il file cache.manifest e ripetere il test, il browser non si aggiorna immediatamente. Questo perché i browser sono impostati per mantenere la cache corrente per un paio d'ore. Se si prova dopo un paio di ore, potrete vedere le modifiche riflesse. Durante il test, è possibile attivare la memorizzazione nella cache del browser automatica off aggiungendo queste righe al file .htaccess:

ExpiresActive On
ExpiresDefault "accesso"

Ha senso solo per disattivare la cache del browser in un server di prova. Lasciare il comportamento della cache al suo livello di default per un server di produzione.

Se uno dei file cambia, ma il file cache.manifest non, il browser non sapere per ricaricare il file modificato. Se si desidera attivare una ricarica file completo, è necessario modificare almeno un carattere nel file cache.manifest. Questo può essere un commento, quindi si può semplicemente aggiungere un numero di versione come questo:

#version 3

Modifica del numero di versione attiverà il meccanismo di ricarica la prossima volta che siete in linea, quindi la versione offline sarà aggiornato.