HTML 5: Sites e Aplicativos Web velozes com Application Cache

Veja nesse artigo como funciona o Application Cache do HTML 5.

Veja neste artigo como desenvolver sites e aplicativos web mais rápidos usando o Application Cache do HTML 5, tecnologia esta ainda pouco conhecida por muitos desenvolvedores web.

Embora o HTML 5 já funcione nos navegadores mais atuais, de acordo com a comunidade WHATWG, que hoje junto com a W3C de Tim Berners-Lee (criador da Web) mantém e evolui o HTML, ainda existem muitos “segredinhos” desconhecidos por uma parte dos programadores web, dentre estes os quais está o appcache.

Mas o que é Application Cache?

É uma forma de manter seu site ou aplicativo web disponível mesmo quando não houver uma conexão com a internet. As principais vantagens de se usar esta tecnologia estão em:

Para especificação completa da API visite: http://www.whatwg.org/specs/web-apps/current-work/#applicationcache

Application Cache na prática

Primeiro vamos criar uma página simples em HTML. Não devemos esquecer de declarar o tipo do nosso documento como HTML 5. Para isso, usamos a declaração: <!DOCTYPE html>. Salve a sua página como index.html. Veja como fica no código da Listagem 1.

Listagem 1. Uma página simples em HTML 5.

<!DOCTYPE html> <html manifest="manifest.appcache"> <head> <title>App Cache HTML 5</title> <meta charset="iso-8859-1"> </head> <body> <h1>Application Cache - Exemplo de Uso</h1> <img src="logo.png" alt=”Imagem do Logo”> </body> </html>

O atributo Manifest do HTML 5

O atributo manifest é exclusivo do HTML 5, ou seja, não é possível o seu uso em versões anteriores do HTM. A sua sintaxe é: <html manifest=”url”> e o valor do atributo é o caminho para o arquivo de manifesto do cache.

Entendendo o arquivo de manifesto

A primeira coisa que devemos entender aqui é o que é exatamente o arquivo de manifesto:

Criando nosso arquivo de manifesto

Criaremos um arquivo de texto chamado manifest.appcache. Nele especificaremos quais recursos devem ser armazenados em cache pelo nosso navegador, conforme podemos ver na Listagem 2.

Listagem 2. Arquivo de manifesto

CACHE MANIFEST # 24/04/2012 v1.0 index.html logo.png NETWORK: login.php FALLBACK: #a primeira URL é o recurso a segunda o substituto /public_html /404.html

Armazenaremos em cache uma imagem (logo.png) e a própria página. Não devemos esquecer que o limite de cache da maioria dos navegadores é de 5MB e linhas de comentários podem ser criadas usando o caractere #, conforme a Listagem 3.

Listagem 3. Comentário em um arquivo manifest.

# 24/04/2012 v1.0

O arquivo de Manifesto

Um arquivo de manifesto pode possuir três seções, mas apenas CACHE MANIFEST é obrigatória:

Listagem 4. Seção NETWORK.

NETWORK: login.php

Listagem 5. Seção NETWORK requerendo uma conexão com a internet para todos os arquivos ou recursos.

NETWORK: *

Listagem 6. Seção FALLBACK.

FALLBACK: /public_html /404.html

Na listagem acima, o /public_html é a URL do nosso site e /404.html é o arquivo substituto para o caso do usuário não estar conectado a internet no momento, ai então está página será exibida em lugar da página índex.html.

Processo detalhado sobre funcionamento do Application Check

  1. Usuário acessa o site ou aplicativo web a primeira vez, os arquivos especificados no documento de manifesto são então armazenados em cache no computador dele.
  2. Sempre que a mesma página ou aplicativo for acessado não será mais necessário carregar os recursos que estão em cache.
  3. Caso o usuário fique sem conexão por algum motivo, a página ou aplicativo estará disponível para navegação, ou ainda se você especificou uma página substituta na seção FALLBACK ela será carregada neste momento.
  4. Se o usuário limpar o cache do navegador ou o arquivo de manifesto ser atualizado os recursos não mais ficarão armazenados até que a página seja carregada novamente.

Um grande abraço a todos e fiquem a vontade para tirar dúvidas sobre o tema.

Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Artigos relacionados