Cache do aplicativo HTML5

Usando o cache do aplicativo, é possível criar facilmente uma versão offline da aplicação web ao criar um arquivo manifest do cache.

O que é o cache do aplicativo?

O HTML5 introduziu o cache do aplicativo (Application Cache), o que significa que é possível fazer cache de aplicações web e acessá-las 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 só baixará 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 da 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.

Arquivo Manifest

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 necessitam de conexão com o servidor e não serão armazenados em cache
  • FALLBACK - No título a seguir, os arquivos listados especificam 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 a conexão com a Internet ser cortada.

NETWORK

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

NETWORK:
login.asp

Pode-se 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 ser estabelecida uma conexão com a Internet, o "offline.html" substituirá todos os arquivos no diretório /html/:

FALLBACK:
/html/ /offline.html

Notas: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 (ver 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:Linhas que começam com "#" são linhas de comentário, mas também podem ser usadas para 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

Atenção 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.

Notas:Os limites de capacidade de dados em cache dos navegadores podem variar (alguns navegadores limitam a cada site a 5MB).