Bem pessoal, hoje vou explicar como é possível trabalhar com aplicações offline usando somente HTML5. É através do atributo “manifest”, da tag “html”.
Ele faz com que os arquivos discriminados fiquem no cache, no momento que o usuário acessa a página pela primeira vez. Isso possibilita o acesso ao conteúdo da página em modo offline.
Além disso, o carregamento da página fica mais rápido, pois o navegador não vai precisar fazer novamente o download dos arquivos, pois eles estarão no cache do navegador.

Clique no link abaixo:

http://bit.ly/zTG3oQ

Visualize o código fonte das páginas. Observe que em todas foi colocado o seguinte atributo na tag “html”: manifest=”exemplo_cache.manifest”

Este atributo faz referência ao arquivo manifest “exemplo_cache.manifest”. Vamos ver o código fonte dele para entendê-lo:

CACHE MANIFEST

#Isto é um comentário

CACHE:
index.html
index2.html
index3.html
index4.html
index5.html
index6.html
index7.html
index8.html
index9.html
index10.html
css/style1.css
css/style2.css
css/style3.css
css/style4.css
css/style5.css
css/style6.css
css/style7.css
css/style8.css
css/style9.css
css/style10.css
css/demo.css
css/reset.css

FALLBACK:
modo_offline.html

NETWORK:
*

CACHE MANIFEST: indica que o arquivo é um arquivo “manifest”. Seu uso é obrigatório.
CACHE: indica todos os arquivos vinculados à página que ficarão armazenados no cache do navegador, por ocasião do carregamento da página.
FALLBACK: indica o endereço de destino que o usuário será mandado, caso algum arquivo do CACHE não esteja disponível. Por exemplo, se o arquivo demo.css por algum motivo não for armazenado no cache do navegador, o usuário será redirecionado para o arquivo offline.html.
NETWORK: indica os arquivos que nunca deverão entrar no cache do navegador. No meu caso, eu coloquei “*”, que quer dizer que todos os arquivos que não estão no CACHE ou no FALLBACK nunca deverão entrar no armazenamento no cache do navegador.
#: indica que o texto contido na linha é um comentário.

Fiz aqui os meus testes e notei que este atributo funciona em todos os navegadores exceto o IE.

Baixe o arquivo zipado contendo todos os documentos do exemplo acima.

Confira aqui o Tutorial Completo HTML5 2012

Valeu gente.