Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Trabalhe com aplicações offline com HTML5 - Kolaborativa

Trabalhe com aplicações offline com HTML5

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: 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.

Author Description

dukountra

There are 1 comments. Add yours

  1. 20th janeiro 2012 | pedro says: Responder
    muito bom site, gostei da lista do html5, muito bom para iniciantes que não tem conhecimento sobre tags, vcs estão de parabéns obrigado!!!

Join the Conversation