API do Cache do Aplicativo ("AppCache")

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript são compatíveis com a API de Cache do Aplicativo (ou AppCache), conforme definido na Especificação HTML5, que permite criar aplicativos Web offline. O AppCache permite que as páginas da Web armazenem em cache (ou salvem) recursos localmente, incluindo imagens, bibliotecas de scripts, folhas de estilos etc.Além disso, o AppCache permite que as URLs sejam fornecidas a partir de conteúdo armazenado em cache usando a notação URI (Uniform Resource Identifier) padrão.

Ao usar o AppCache para salvar recursos localmente, você melhora o desempenho de uma página da Web reduzindo o número de solicitações feitas ao servidor de hospedagem; também permite o acesso offline aos recursos armazenados em cache.

Para armazenar os recursos em cache localmente:

1. Crie um arquivo de manifesto que defina os recursos que você deseja salvar.
2. Faça referência ao arquivo de manifesto em cada página da Web criada para usar recursos armazenados em cache.

Criando um arquivo de manifesto

O arquivo de manifesto é um arquivo de texto que define o comportamento de cache para recursos usados pela página da Web, conforme mostrado no exemplo a seguir.


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


Os arquivos de manifesto são divididos nas seguintes seções:
  • O CACHE: a seção define recursos que serão armazenados localmente. Neste exemplo, três arquivos são armazenados em cache.
  • O FALLBACK: a seção define recursos a serem usados quando outros recursos não estão disponíveis. Por exemplo, este exemplo define figure2.png como uma imagem de fallback para a pasta de fotos. Se o navegador não puder acessar imagens na pasta de fotos (porque o navegador está offline ou porque o servidor não pode ser alcançado), figure2.png substituirá as imagens indisponíveis na marcação renderizada. Como resultado, figure2.png será armazenado em cache localmente.
  • A REDE: a seção especifica os recursos a serem acessados quando há uma conexão de rede. Os recursos nesta seção não são armazenados em cache. Esta seção permite o uso do caractere curinga (*) para indicar que todos os outros recursos não devem ser armazenados em cache.
Arquivos de manifesto podem conter qualquer número dessas seções, e as seções podem ser repetidas; no entanto, novas seções devem começar com o cabeçalho de seção, seguido de dois-pontos, como mostrado no exemplo anterior. Se nenhum cabeçalho de seção for fornecido, o CACHE: cabeçalho será presumido. O próximo exemplo mostra um manifesto simplificado.

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


Além disso, os arquivos do manifesto:
  • Devem ser codificados com a codificação de caracteres UTF-8 (Unicode Transformation Format de 8 bits).
  • Devem ser servidos com um tipo MIME de texto/manifesto de cache.
  • Devem começar com a linha "MANIFESTO DE CACHE".
  • Podem conter comentários, precedidos pelo sinal de cerquilha (#).

Para saber mais, veja a sintaxe do manifesto de cache.

Declarando um manifesto

Para associar um manifesto a uma página da Web, atribua o nome do arquivo de manifesto ao atributo manifest do elemento html, conforme mostrado no exemplo a seguir.


<!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>


Nesse exemplo, a página da Web declara "appcache.manifest" como o arquivo de manifesto. A declaração de manifesto é interpretada como qualquer outro arquivo de referência. Como esse exemplo usa um nome de arquivo relativo, supõe-se que o manifesto esteja localizado no mesmo diretório que a própria página da Web.

Observação  Referências de arquivo no manifesto são interpretadas com relação à localização do arquivo de manifesto, não em relação a página da Web que a declara.
 

Não é necessário que o manifesto inclua o nome da página da Web que declara o manifesto; as páginas da Web que declaram o manifesto são armazenadas em cache automaticamente.

O objeto ApplicationCache

O Internet Explorer 10 também dá suporte ao objeto ApplicationCache, que oferece métodos e propriedades que permitem que você gerencie o cache do aplicativo. Além disso, é possível definir manipuladores de eventos que mostram o andamento do processo de cache.

Use a propriedade applicationCache de um objeto window (ou o objeto de trabalho) para acessar o objeto ApplicationCache, como mostrado no exemplo a seguir.


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;


Esse exemplo usa a propriedade status para determinar o status do cache do aplicativo para o documento atualmente carregado pela página da Web.

O objeto ApplicationCache fornece suporte para dois métodos para controlar o cache. O método update inicia uma verificação assíncrona para atualizações, semelhante à realizada quando uma página da Web é carregada pela primeira vez. Qualquer cache existente será usado até que a página da Web seja recarregada ou o método swapCache seja chamado. Para começar a usar um cache atualizado, recarregue a página da Web (manual ou programaticamente) ou chame o método swapCache. Como o cache é atualizado quando uma página da Web é recarregada, não é necessário chamar o método swapCache antes de recarregar ou atualizar uma página da Web.

Observação  O cache atualizado não é usado pela página da Web até que ela seja recarregada, quer manualmente pelo usuário ou programaticamente usando o método reload do objeto window.location.
 

O objeto ApplicationCache fornece suporte para os seguintes eventos:

  • O evento cached é acionado após o manifesto ser armazenado em cache.
  • O evento checking é acionado quando a presença de uma atualização está sendo verificada.
  • O evento downloading é acionado quando os recursos do manifesto estão sendo baixados.
  • O evento progress é acionado enquanto os recursos do manifesto estão sendo baixados.
  • O evento error é acionado quando ocorre um problema, como um código de resposta HTML 404 ou 410. O evento também é acionado quando o arquivo de manifesto não pode ser baixado.
  • O evento updateready é acionado quando uma versão mais recente do cache está disponível.
  • O evento noupdate é disparado quando uma atualização foi solicitada, mas o manifesto não foi alterado.
  • O evento obsolete é acionado quando o cache atual é marcado como obsoleto.

O exemplo a seguir mostra como registrar manipuladores de eventos para esses eventos.


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);
}


Referência de API

Application Cache API ("AppCache")

Demonstrações do Test Drive do Internet Explorer

Demonstração do guia
A Day in the Park

Postagens no blog do IE

Criando experiências offline com AppCache e IndexedDB do HTML5

Especificação

HTML5: Seção 5.7.2

 

 

Mostrar: