API della cache dell'applicazione ("AppCache")

Internet Explorer 10 e le app di Windows Store scritte in JavaScript supportano l'API della cache dell'applicazione (o AppCache), come definito nella specifica HTML5 e questo consente la creazione di applicazioni Web offline. AppCache consente alle pagine Web di memorizzare nella cache (o salvare) le risorse localmente, inclusi fogli di stile, immagini, librerie di script e così via.AppCache consente anche agli URL di essere serviti dal contenuto memorizzato nella cache con la notazione URI standard.

Se usi AppCache per salvare le risorse localmente, puoi migliorare le prestazioni di una pagina Web riducendo il numero delle richieste effettuate al server di hosting. Puoi anche abilitare l'accesso offline alle risorse memorizzate nella cache.

Per memorizzare le risorse localmente nella cache:

1. Crea un file manifesto che definisca le risorse da salvare.
2. Fa riferimento al file manifesto in ogni pagina Web progettata per l'uso di risorse memorizzate nella cache.

Creazione di un file manifesto

Il file manifesto è un file di testo che definisce il comportamento di memorizzazione nella cache per le risorse usate dalla pagina Web, come illustrato nell'esempio seguente.


CACHE MANIFEST

CACHE:
# Defines resources to be cached.
script/library.js
css/stylesheet.css
images/figure1.png

FALLBACK:
# Defines resources to be used if non-cached
# resources cannot be downloaded, for example
# when the browser is offline..
photos/ figure2.png

NETWORK:
# Defines resources that will not be cached.
figure3.png


I file manifesto sono suddivisi nelle seguenti sezioni:
  • La sezione CACHE: definisce le risorse che saranno archiviate localmente. In questo esempio tre file vengono memorizzati nella cache.
  • La sezione FALLBACK: definisce le risorse da usare quando altre risorse non sono disponibili. Questo esempio definisce, ad esempio, figure2.png come immagine di fallback per la cartella delle foto. Se il browser non può accedere alle immagini contenute in questa cartella (perché il browser è offline o perché il server non può essere raggiunto), figure2.png sostituirà le immagini non disponibili nel markup visualizzato. Di conseguenza, figure2.png sarà memorizzato nella cache localmente.
  • La sezione NETWORK: definisce le risorse a cui accedere quando è disponibile una connessione di rete. Le risorse in questa sezione non sono memorizzate nella cache. Questa sezione consente di usare il carattere jolly (*) per indicare che tutte le altre risorse non dovranno essere memorizzate nella cache.
I file manifesto possono contenere un numero illimitato di sezioni e le sezioni possono essere ripetute, tuttavia, le nuove sezioni devono iniziare con l'intestazione di sezione seguita da due punti, come illustrato nell'esempio precedente. Se non viene fornita un'intestazione di sezione, verrà usata l'intestazione CACHE:. Nell'esempio seguente viene mostrato un manifesto semplificato.

CACHE MANIFEST
script/library.js
css/stylesheet.css
images/figure1.png


Inoltre i file manifesto:
  • Devono essere codificati con la codifica dei caratteri Unicode Transformation Format 8 bit (UTF-8).
  • Devono essere presentati con un tipo MIME per manifesti di testo/cache.
  • Deve iniziare con la riga "CACHE MANIFEST".
  • Può contenere commenti, preceduti dal cancelletto (#).

Per altre informazioni, vedi la sintassi dei manifesti della cache.

Dichiarazione di un manifesto

Per associare un manifesto a una pagina Web, assegna il nome del file manifesto all'attributo manifest dell'elemento html, come illustrato nell'esempio seguente.


<!doctype html>
<html manifest="appcache.manifest">
 <head>
  <title>A Web Page</title>
  <script src="library.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body onload="doSomething();">
  <p>Results go here: <span id="results">Unknown</span></p>
 </body>
</html>


in questo esempio, la pagina Web dichiara "appcache.manifest" come file manifesto. La dichiarazione del manifesto viene interpretata come qualsiasi altro riferimento a file. Poiché questo esempio usa un nome di file relativo, si presume che il manifesto si trovi nella stessa directory della pagina Web.

Nota  I riferimenti a file nel manifesto sono interpretati in relazione alla posizione del file manifesto, non alla pagina Web che lo dichiara.

Non è necessario che il manifesto includa il nome della pagina Web che lo dichiara; le pagine Web che dichiarano manifesti vengono memorizzate nella cache automaticamente.

Oggetto ApplicationCache

Internet Explorer 10 supporta anche l'oggetto ApplicationCache, che fornisce i metodi e le proprietà che ti permettono di gestire la cache dell'applicazione. Puoi anche definire gestori di eventi che mostrino lo stato del processo di memorizzazione nella cache.

Usa la proprietà applicationCache di un oggetto window (o di un oggetto worker ) per accedere all'oggetto ApplicationCache, come illustrato nell'esempio seguente.


var sCacheStatus = "Not supported";
if (window.applicationCache) 
{
   var oAppCache = window.applicationCache;
   switch ( oAppCache.status ) 
   {
      case oAppCache.UNCACHED : 
         sCacheStatus = "Not cached"; 
         break;
      case oAppCache.IDLE : 
         sCacheStatus = "Idle"; 
         break;
      case oAppCache.CHECKING : 
         sCacheStatus = "Checking"; 
         break;
      case oAppCache.DOWNLOADING : 
         sCacheStatus = "Downloading"; 
         break;
      case oAppCache.UPDATEREADY : 
         sCacheStatus = "Update ready"; 
         break;
      case oAppCache.OBSOLETE : 
         sCacheStatus = "Obsolete"; 
         break;
      default : 
        sCacheStatus = "Unexpected Status ( " + 
                       oAppCache.status.toString() + ")";
        break;
   }
}
return sCacheStatus;


Questo esempio usa la proprietà status per determinare lo stato della cache dell'applicazione per il documento attualmente caricato dalla pagina Web.

L'oggetto ApplicationCache supporta due metodi per il controllo della cache. Il metodo update avvia un controllo asincrono degli aggiornamenti, in modo analogo al controllo eseguito quando una pagina Web viene caricata inizialmente. Verrà usata qualsiasi cache esistente finché la pagina Web non viene ricaricata o viene chiamato il metodo swapCache. Per iniziare a usare una cache aggiornata, ricaricare la pagina Web (manualmente o a livello di programmazione) o chiamare il metodo swapCache. Poiché la cache viene aggiornata quando si ricarica una pagina Web, non è necessario chiamare il metodo swapCache prima di ricaricare o aggiornare una pagina Web.

Nota  La cache aggiornata non viene usata dalla pagina Web finché non viene ricaricata, manualmente dall'utente o a livello di programmazione usando il metodo reload dell'oggetto window.location.

L'oggetto ApplicationCache supporta i seguenti eventi:

  • L'evento cached viene generato quando il manifesto è stato memorizzato nella cache.
  • L'evento checking quando viene controllata la presenza di un aggiornamento.
  • L'evento downloading viene generato quando vengono scaricate le risorse del manifesto.
  • L'evento progress viene generato mentre vengono scaricate le risorse del manifesto.
  • L'evento error viene generato quando si verifica un problema, ad esempio un codice di risposta HTML 404 o 410. L'evento viene generato anche quanto il file manifesto non può essere scaricato.
  • L'evento updateready viene generato quando è disponibile una versione più recente della cache.
  • L'evento noupdate viene generato quando è stato richiesto un aggiornamento, ma il manifesto non è stato modificato.
  • L'evento obsolete viene generato quando la cache corrente è contrassegnata come obsoleta.

Il seguente esempio mostra come registrare i gestori eventi per questi eventi.


if (window.applicationCache) {
  var appCache = window.applicationCache;
   appCache.addEventListener('error', appCacheError, false);
   appCache.addEventListener('checking', checkingEvent, false);
   appCache.addEventListener('noupdate', noUpdateEvent, false);
   appCache.addEventListener('downloading', downloadingEvent, false);
   appCache.addEventListener('progress', progressEvent, false);
   appCache.addEventListener('updateready', updateReadyEvent, false);
   appCache.addEventListener('cached', cachedEvent, false);
}


Informazioni di riferimento sulle API

Application Cache API ("AppCache")

Dimostrazioni di Internet Explorer Test Drive

Cookbook Demo
A Day in the Park

Post di IEBlog

Building Offline Experiences with HTML5 AppCache and IndexedDB

Specifica

HTML5: sezione 5.7.2

 

 

Mostra:
© 2014 Microsoft