Cache do aplicativo HTML5

Com o cache do aplicativo, criando um arquivo manifest de cache, é possível criar facilmente uma versão offline do aplicativo web.

O que é o cache do aplicativo?

O HTML5 introduziu o cache do aplicativo (Application Cache), o que significa que é possível armazenar em cache aplicativos web e acessá-los sem conexão com a Internet.

A cache do aplicativo traz três vantagens para o aplicativo:

  1. Navegação offline - os usuários podem usá-los quando o aplicativo estiver offline
  2. Velocidade - os recursos em cache são carregados mais rapidamente
  3. Reduza a carga do servidor - o navegador baixará apenas recursos atualizados ou alterados do servidor

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o cache da aplicação.

API
Cache de Aplicação 4.0 10.0 3.5 4.0 11.5

Exemplo de Manifesto de Cache HTML

O exemplo a seguir mostra um documento HTML com cache manifest (para navegação offline):

Exemplo

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Conteúdo do documento ......
</body>
</html>

Experimente você mesmo

Fundamentos do Cache Manifest

Para ativar o cache da aplicação, inclua o atributo manifest na tag <html> do documento:

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

Cada página que especifica um manifest será armazenada em cache quando o usuário acessá-la. Se não for especificado o atributo manifest, a página não será armazenada em cache (a menos que a página seja especificamente indicada no arquivo manifest).

A sugestão de extensão de arquivo para o arquivo manifest é: ".appcache".

Atenção:O arquivo manifest precisa ser configurado com o tipo MIME correto, ou seja, "text/cache-manifest". É necessário configurar no servidor web.

Manifesto de Aplicativo

O arquivo manifest é um arquivo de texto simples que informa ao navegador o conteúdo armazenado em cache (e o conteúdo que não deve ser armazenado em cache).

O arquivo manifest tem três partes:

  • CACHE MANIFEST - No título a seguir, os arquivos listados serão armazenados em cache após o download inicial
  • NETWORK - No título a seguir, os arquivos listados precisam de conexão com o servidor e não serão armazenados em cache
  • FALLBACK - No título a seguir, os arquivos listados definem a página de fallback quando a página não puder ser acessada (por exemplo, página 404)

CACHE MANIFEST

A primeira linha, CACHE MANIFEST, é necessária:

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

O arquivo manifest listado acima contém três recursos: um arquivo CSS, uma imagem GIF e um arquivo JavaScript. Após a carga do arquivo manifest, o navegador baixará esses três arquivos a partir do diretório raiz do site. Em seguida, esses recursos continuarão a estar disponíveis, independentemente de o usuário estar desconectado da Internet.

NETWORK

A seção NETWORK do arquivo "login.php" nunca será armazenada em cache e não estará disponível offline:

NETWORK:
login.asp

Pode usar o asterisco para indicar que todos os outros recursos/arquivos precisam de conexão com a Internet:

NETWORK:
*
FALLBACK

A parte FALLBACK abaixo especifica que, se não puder estabelecer uma conexão com a Internet, o "offline.html" substituirá todos os arquivos no diretório /html/:

FALLBACK:
/html/ /offline.html

Nota:O primeiro URI é o recurso, o segundo é o substituto.

Atualização do cache

A aplicação ficará em cache até que ocorra uma das seguintes situações:

  • O usuário limpa o cache do navegador
  • O arquivo manifest foi modificado (veja as dicas abaixo)
  • Atualização do cache da aplicação por meio de programa

Exemplo - Arquivo Manifesto de Cache Completo

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Dica:As linhas que começam com "#" são linhas de comentário, mas também podem satisfazer outros propósitos. O cache da aplicação só será atualizado quando o arquivo manifest mudar. Se você editar uma imagem ou modificar uma função JavaScript, essas mudanças não serão recarregadas no cache. Atualizar a data e o número da versão na linha de comentário é uma maneira de fazer o navegador recarregar o arquivo.

Considerações sobre o cache da aplicação

Fique atento ao conteúdo do cache.

Uma vez que o arquivo seja cacheado, o navegador continuará a exibir a versão em cache, mesmo que você modifique o arquivo no servidor. Para garantir que o navegador atualize o cache, você precisa atualizar o arquivo manifest.

Nota:Os limites de capacidade de dados em cache dos navegadores podem variar (alguns navegadores têm um limite de 5MB por site).