Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Risultati di ricerca

    Utilizzare l'application cache

    Introduzione

    HTML5 possiede un meccanismo di application caching che permette alle applicazioni web-based di funzionare anche offline. Gli sviluppatori possono utilizzare l'interfaccia Application Cache (AppCache)  per specificare le risorse che il browser deve memorizzare nella cache e rendere disponibili per gli utenti offline. Le applicazioni in cache si caricano e funzionano correttamente anche se gli utenti cliccano sul tasto refresh del browser quando sono offline.

    L'uso dell'application cache fornisce all'applicazione i seguenti benefici:

    • Navigazione offline: gli utenti possono navigare un sito anche se sono offline.
    • Velocità: le risorse sono memorizzate in locale, quindi si caricano più velocemente.
    • Riduzione del carico server: il browser scarica dal server solo le risorse che sono state modificate.

    Come funziona l'application cache

    Abilitare l'application cache

    Per abilitare l'application cache per un'applicazione, è necessario includere l'attributo manifest nell'elemento <html> delle pagine della tua applicazione, come mostrato nel seguente esempio:

    <html manifest="example.appcache">
  ...
</html>

    L'attributo manifest fa riferimento ad un cache manifest, un file di testo che elenca tutte le risorse (files) che il browser deve memorizzare per la tua applicazione.

    Bisogna includere l'attributo manifest in tutte le pagine dell'applicazione che vuoi memorizzare nella cache, il browser non memorizza le pagine che non contengono l'attributo manifest, a meno che tali pagine siano esplicitamente elencate nel file manifest stesso. Non c'è bisogno di elencare nel cache manifest tutte le pagine che si vogliono memorizzare nella cache, il browser implicitamente aggiunge ogni pagina che l'utente visita e che ha l'attributo manifest settato sull'application cache.

    Alcuni browser (es. Firefox) mostrano una barra di notifica la prima volta che un utente carica un'applicazione che usa l'application cache. La barra di notifica mostra un messaggio tipo:

    Questo sito web (www.example.com) richiede di salvare dati sul computer per l'utilizzo non in linea. [Permetti] [Mai per questo sito] [Non adesso]

    Il termine "offline(-enabled) applications" qualche volta fa riferimento alle applicazioni che l'utente ha esplicitamente abilitato ad utilizzare le capacità offline.

    Caricare documenti

    L'uso dell'application cache modifica il normale processo di caricamento del documento:

    • Se esiste un'application cache, il browser carica il documento e le sue risorse associate direttamente dalla cache, senza accedere alla rete. Ciò velocizza il tempo di caricamento del documento.
    • Il browser quindi controlla se il cache manifest è stato aggiornato sul server.
    • Se il cache manifest è stato aggiornato, il browser scarica la nuova versione e le risorse elencate. Quest'operazione viene eseguita in background e non influenza la performance significativamente.

    Il processo di caricamento del documento ed aggiornamento dell'application cache è specificato in maggior dettaglio qui sotto:

    1. Quando il browser visita un documento che include l'attributo manifest, se non esiste un application cache, il browser carica il documento e poi va a prendere tutte le risorse elencate nel file manifest, creando la prima versione dell'application cache.
    2. Nelle visite successive, il browser preleverà il documento e tutte le risorse specificate nel file manifest direttamente dall'applcation cache (non dal server). In più, il browser invia un evento checking all'oggetto window.applicationCache e processa il file manifest, seguendo le appropriate regole di chaching HTTP.
    3. Se la copia attualmente memorizzata del manifest è aggiornata, il browser invia un evento noupdate all'oggetto applicationCache, ed il processo di aggiornamento è completo. Da notare che se viene modificata una qualsiasi delle risorse sul server, bisogna modificare anche il file manifest, in maniera tale che il browser sappia che ha bisogno di processare tutte le risorse nuovamente.
    4. Se il file manifest è stato modificato, tutti i file elencati in esso - così come quelli aggiunti alla cache utilizzando applicationCache.add() - sono aggiunti ad una cache temporanea, seguendo le appropriate regole di caching HTTP. Per ogni file memorizzato in questa cache temporanea, il browser invia un evento progress all'oggetto applicationCache. In caso di errore, il browser invia un evento error e blocca l'aggiornamento dell'application cache.
    5. Una volta che tutti i files sono stati recuperati con successo, vengono automaticamente spostati nella vera cache offline, e viene inviato un evento cached all'oggetto applicationCache. Dato che il documento è stato già caricato nel browser prelevandolo dalla cache, il documento aggiornato non sarà renderizzato finchè non viene ricaricato (manualmente o attraverso la programmazione).

    Percorso di memorizzazione e cancellazione della cache offline

    Su Chrome è possibile cancellare la cache offline sia selezionando  "Clear browsing data..." dalle preferenze, oppure visitando  chrome://appcache-internals/. Safari ha una voce "Svuota cache" simile nelle sue preferenze, ma potrebbe essere necessario riavviare il browser.

    Su Firefox, i dati della cache offline vengono memorizzati separatamente dal profilo Firefox — insieme ai dati degli altri programmi installati:

    • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache

    Su Firefox è possibile ispezionare lo stato della cache offline sulla pagina about:cache (box "Offline cache device"). La cache offline può essere cancellata separatamente per ogni sito utilizzando il tasto "Rimuovi..." presente in:
    Firefox -> Opzioni -> Avanzate -> Rete -> Dati non in linea e informazioni utente.

    Nelle versioni precedenti a Firefox 11, l'application cache non poteva essere cancellata utilizzando
    Tools -> Clear Recent History
    oppure
    Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now Questo bug è stato fixato nelle versioni successive.

    Vedi anche clearing the DOM Storage data.

    Le application cache possono anche diventare obsolete. Se il un file manifest dell'applicazione viene rimosso dal server, il browser rimuove tutte le application cache che utilizzano quel manifest ed invia un evento "obsoleted" all'oggetto applicationCache. Questo imposta lo stato dell'application cache su OBSOLETE.

    Il file cache manifest

    Includere un file cache manifest

    L'attributo manifest in un'applicazione web può specificare sia il percorso relativo di un file cache manifest che un URL assoluto (gli URL assoluti devono provenire dalla stessa origine dell'applicazione). Un file cache manifest può avere diverse estensioni, ma come MIME type deve avere text/cache-manifest.

    Nota: Sui server Apache, il MIME type per i file manifest (.appcache) può essere impostato aggiungendo AddType text/cache-manifest .appcache ad un file .htaccess posizionato nella cartella root, oppure nella stessa cartella dell'applicazione.

    Le voci in un file cache manifest

    Il cache manifest è un semplice file di testo che elenca le risorse che il browser deve memorizzare per l'accesso offline. Le risorse sono identificate da un URI. Le voci elencate nel cache manifest devono avere lo stesso schema, host e porta come nel manifest.

    Esempio 1: un semplice cache manifest

    Il seguente è un semplice file di cache manifest, example.appcache, per un ipotetico sito web all'indirizzo www.example.com.

    CACHE MANIFEST
# v1 - 2011-08-13
# This is a comment.
https://www.example.com/index.html
https://www.example.com/header.png
https://www.example.com/blah/blah

    Un file cache manifest può includere 3 sezioni (CACHE, NETWORK, e FALLBACK, verranno discusse in seguito). Nell'esempio qui sopra, non c'è una sezione header, quindi si assume che tutte le risorse siano elencate nell'esplicita sezione (CACHE), intendendo che il browser deve memorizzare nell'application cache tutte le risorse elencate. Le risorse possono essere specificate utilizzando sia ULR assoluti che relativi (es. index.html).

    Il commento "v1" si trova lì per una buona ragione. I browser aggiornano  l'application cache solo se il file manifest viene modificato. Se una risorsa presente nella cache viene modificata (per esempio, viene aggiornata l'immagine header.png con un nuovo contenuto), bisogna anche cambiare il contenuto del file manifest per permettere ai browser di sapere che c'è bisogno di refreshare la cache. Si può effettuare qualsiasi modifica al file manifest, ma la best practice è modificare il numero di versione.

    Importante: Non includere mai il cache manifest tra le voci del file stesso, altrimenti verrà sempre prelevato dalla cache locale e sarà quasi impossibile informare il browser che un nuovo manifest è disponibile sul server.

    Le sezioni di un file cache manifest: CACHE, NETWORK, e FALLBACK

    Un manifest può avere 3 sezioni distine: CACHE, NETWORK, e FALLBACK.

    CACHE:
    Questa è la sezione di default per le voci in un cache manifest. I files elencati sotto l'header della sezione CACHE: (oppure subito dopo la riga CACHE MANIFEST) sono esplicitamente memorizzati nella cache dopo che vengono scaricati per la prima volta.
    NETWORK:
    I files elencati sotto l'header della sezione NETWORK: sono risorse inserite in una white-list che richiedono una connessione al server. Tutte le richieste a queste risorse bypassano la cache, anche se l'utente è offline. È possibile utilizzare wildcards.
    FALLBACK:
    Nella sezione FALLBACK: vengono specificate le pagine alternative che il browser deve utilizzare nel caso una risorsa non sia accessibile. Ogni voce in questa sezione è composta da 2 URI - il primo è la risorsa, il secondo il fallback. Entrambi gli URI devono essere relativi e provenienti dalla stessa origine del file manifest. È possibile utilizzare wildcards.

    Le sezioni CACHE, NETWORK, e FALLBACK possono essere elencate in qualsiasi ordine, ogni sezione può apparire più volte nello stesso cache manifest.

    Example 2: un cache manifest più completo

    Il seguente è un esempio più completo di un cache manifest per un ipotetico sito web all'indirizzo www.example.com.

    CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ fallback.html

    Questo esempio utilizza le sezioni  NETWORK e FALLBACK per specificare che la pagina network.html deve essere sempre prelevata dalla rete e che la pagina fallback.html deve essere servita nel caso una risorsa non sia disponibile (es. nel caso sia impossibile stabilire una connessione col server).

    Struttura di un file cache manifest

    Un cache manifest deve essere servito con il MIME type text/cache-manifest. Tutte le risorse servite utilizzando questo MIME type devono seguire la sintassi per l'application cache manifest, come definito in questa sezione.

    I cache manifest sono file di testo in formato UTF-8 e possono opzionalmente contenere un carattere BOM. Gli a capo possono essere rappresentati dal line feed (U+000A), dal carriage return (U+000D), o da entrambi i caratteri.

    La prima riga del cache manifest deve obbligatoriamente essere la stringa CACHE MANIFEST (con un singolo spazio U+0020 tra le due parole), seguita da zero o pià caratteri di tabulazione. Qualsiasi altro testo su questa riga verrà ignorato.

    Il resto del manifesto cache deve essere composto da zero o più delle seguenti righe:

    Righe vuote
    È possibile utilizzare righe vuote composte da zero o più spazi e/o caratteri di tabulazione (tab).
    Commenti
    I commenti consistono in zero o più tab e/o spazi seguiti da un singolo carattere #, seguito da zero o più caratteri che compongono il testo del commento. Ogni riga di commento deve essere composta in questa maniera, non esiste una coppia di delimitatori inizio/fine per wrappare intere porzioni di codice.
    Header della sezione
    Gli header di sezione specificano quale sezione del cache manifest stiamo per manipolare. Ci sono 3 possibili tipi di header:
    Header di sezione Descrizione
    CACHE: Sezione che definisce quali risorse memorizzare nella cache (questa è la sezione di default, se l'header non è specificato).
    NETWORK: Sezione che definisce quali risorse devono essere sempre scaricate dalla rete.
    FALLBACK: Sezione che definisce dei fallback nel caso una risorsa risulti non disponibile.
    L'header di sezione può includere spazi, ma deve includere i due punti (:) nel nome della sezione.
    dati della sezione
    Il formato per le righe di dati varia da sezione a sezione. In quella esplicita (CACHE:), ogni riga è un riferimento URI o IRI valido ad una risorsa da memorizzare nella cache (non è possibile utilizzare caretteri jolly in queste sezioni). Si possono inserire spazi vuoti prima o dopo l'URI o l'IRI. Nella sezione di fallback ogni riga è un riferimento URI o IRI valido ad una risorsa, seguito dalla risorsa di fallback che deve essere servita qualndo non si può stabilire una connessione col server. nella sezione network, ogni riga è un riferimento URI o IRI valido ad una risorsa da prelevare dalla rete. (In questa sezione è consentito utilizzare il carattere jolly *).
    Note: Gli URI relativi sono relativi all'URI del cache manifest, non all'URI del documento che fa riferimento al cache manifest.

    I file cache manifest possono passare da una sezione all'altra a piacimento (ogni header di sezione può essere utilizzato più di una volta), le sezioni possono anche essere vuote.

    Risorse nell'application cache

    Un application cache include sempre almeno una risorsa, identificata da un URI. Tutte le risorse rientrano in una delle seguenti categorie:

    Master entries
    Queste risorse sono aggiunte alla cache perchè sono legate ad una pagina che includeva l'attributo  manifest.
    Explicit entries
    Le risorse esplicitamente indicate nel cache manifest.
    Network entries
    Le risorse elencate nel file manifest dell'application cache che devono essere sempre recuperate dalla rete.
    Fallback entries
    Le risorse elencate nel file manifest che devono essere utilizzate come alternativa ad una risorsa non raggiungibile.
    Note: Una risorsa può rientrare in più categorie, per esempio può apparire sia nella sezione esplicita che in quella di fallback.

    Le categorie di risorse sono descritte in dettaglio qui di seguito.

    Master entries

    Le master entries sono un qualsiasi file HTML che include l'attributo manifest nell'elemento <html>. Per esempio, diciamo che abbiamo il file HTML https://www.example.com/entry.html, composto in questa maniera:

    <html manifest="example.appcache">
  <h1>Application Cache Example</h1>
</html>

    se entry.html non è elencato nel file cache manifest example.appcache, basta visitare la pagina per farla aggiungere all'application cache in qualità di master entry.

    Explicit entries

    Le Explicit entries sono le risorse esplicitamente elencate in una sezione CACHE del file cache manifest.

    Network entries

    La sezione NETWORK di un cache manifest, specifica le risorse dell'applicazione web che richiedono l'accesso online. Queste voci sono essenzialmente una "online whitelist" — le URI specificate nella sezione NETWORK sono sempre caricate dal server invece che dalla cache. In questo modo il modello di sicurezza del browser protegge l'utente da potenziali falle di sicurezza limitando l'accesso alle risorse approvate.

    Per esempio, si può utilizzare la lista delle risorse network per caricare ed eseguire script ed altro codice dal server invece che dalla cache:

    CACHE MANIFEST
NETWORK:
/api

    La sezione del cache manifest mostrata qui sopra assicura che tutte le richieste di files contenuti nella sottocartella https://www.example.com/api/ vengano sempre caricate dalla rete senza accedere alla cache.

    Note: Omettere semplicemente le master entries (i files che contengono l'attributo manifest nell'elemento html) dal file manifest potrebbe non avere lo stesso risultato, perchè le master entries sarebbero scaricate solo la prima volta dalla rete, per poi essere aggiunte e prelevate dalla cache ai successivi accessi.

    Fallback entries

    Fallback entries sono utilizzate quando fallisce il tentativo di caricare una risorsa. Per esempio, diciamo che il cache manifest https://www.example.com/example.appcache includa il seguente contenuto:

    CACHE MANIFEST
FALLBACK:
example/bar/ example.html

    Qualsiasi richiesta a https://www.example.com/example/bar/ o a una qualsiasi delle sue sottocartelle ed il loro contenuto fa partire una richiesta newtwork per caricare la risorsa richiesta. Se il tentativo fallisce, a causa della connessione o di un qualsiasi errore del server, il browser carica il file example.html al suo posto.

    Stati della cache

    Ogni application cache possiede uno stato, che indica la condizione corrente della cache. Le cache che condividono la stessa URI per il manifest, condividono anche lo stesso stato della cache, che può essere uno dei seguenti:

    UNCACHED
    Un valore speciale che indica che l'oggetto application cache non è inizializzato completamente.
    IDLE
    L'application cache non è attualmente in fase di aggiornamento.
    CHECKING
    Il manifest è in fase di prelievo e controllo aggiornamenti.
    DOWNLOADING
    Le risorse sono in fase di scaricamento per essere aggiunte alla cache, a causa di una risorsa modificata nel manifest.
    UPDATEREADY
    C'è una nuova versione dell'application cache disponibile. C'è un evento corrispondente updateready, che è lanciato al posto dell'evento cached quando un nuovo aggiornamento è stato scaricato ma non ancora attivato tramite il metodo swapCache().
    OBSOLETE
    Il gruppo application cache è obsoleto.

    Controllare gli aggiornamenti per il cache manifest

    Si può effettuare, attraverso JavaScript, un test per vedere se un'applicazione ha il cache manifest aggiornato. Dato che un cache manifest può essere stato aggiornato prima che uno script venga caricato ed attacchi un event listener per controllare gli aggiornamenti, gli script devono sempre utilizzare il test window.applicationCache.status.

    function onUpdateReady() {
  alert('found new version!');
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady();
}

    Per testare manualmente un nuovo file manifest, è possibile utilizzare window.applicationCache.update().

    Trappole da evitare (aka Gotchas)

    • Non accedere mai ai file nella cache utilizzando i parametri tradizionali della  GET (es. other-cached-page.html?parameterName=value). In questo modo il browser ignorerà la cache e andrà a prendere il file dalla rete. Per linkare risorse nella cache che hanno parametri parsati in Javascript, utilizzare i parametri dopo l'hash (#), come per esempio: other-cached-page.html#whatever?parameterName=value.
    • Quando le applicazioni sono memorizzate nella cache, non è sufficiente aggiornare i files nella cache che sono utilizzati nella pagina web per aggiornarli. E' necessario aggiornare anche il file cache manifest stesso prima che il browser prelevi ed utilizzi i files aggiornati. Si può fare tramite programmazione utilizzando  window.applicationCache.swapCache(), anche se le risorse che sono state già caricate non saranno interessate. Per assicurarsi che le risorse vengono caricate da una nuova versione della cache dell'applicazione, ricaricare la pagina è l'ideale.
    • Una buona prassi è quella di settare gli expires headers sul tuo web server per far sì che i files *.appcache scadano immediatamente. Questo evita il rischio di inserire nella cache il cache manifest stesso. Per esempio, su Apache è possibile impostare questo comportamento nella seguente:
      ExpiresByType text/cache-manifest "access plus 0 seconds"

    Compatibilità con i browser

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 4.0 3.5 10.0 10.6 4.0
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 (Yes) No support 11.0 3.2

    Nota: Le versioni di Firefox precedenti alla 3.5 ignorano le sezioni NETWORK e FALLBACK del file cache manifest.

    Vedi anche

    Tag del documento e collaboratori

     Hanno collaborato alla realizzazione di questa pagina: g4b0, teoli, pastorello
     Ultima modifica di: g4b0,