HTML 5: Sites e Aplicativos Web velozes com Application Cache

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:

Proporcionar aos visitantes do seu site ou usu�rios do seu aplicativo uma maneira de continuarem navegando mesmo estando off-line. A p�gina ser� carregada apenas na primeira visita ao site.
Aumentar a velocidade de seus aplicativos ou sites consideravelmente, j� que seu conte�do ou parte dele ficar� armazenado no computador local do usu�rio.
Evitar sobrecargas nos servidores: Como o navegador do usu�rio s� ir� baixar os arquivos novos e alterados a carga no servidor � menor.

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:

Um simples arquivo de texto com a extens�o �.appcache�,que � respons�vel por informar ao navegador quais arquivos ser�o armazenados em cache.
Cada p�gina que usar cache dever� ser devidamente habilitada, para isso inclu�mos o atributo manifest, na tag <html> da seguinte forma: <html manifest=�caminho do arquivo manifest�>

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:

CACHE MANIFEST � � a seç�o obrigat�ria do nosso arquivo, respons�vel por listar os recursos que estar�o dispon�veis em cache local ap�s a primeira vez que forem baixados.
NETWORK � Esta seç�o serve para listar arquivos que podem precisar de conex�o com o servidor e nunca ser�o armazenados em cache. Veja um exemplo na Listagem 4. Se quisermos que todos os arquivos precisem de uma conex�o com a internet usamos o caractere asterisco ou curinga �*�, conforme o exemplo da Listagem 5.
FALLBACK � Especifica p�ginas alternativas caso o recurso n�o possa ser acessado um bom exemplo disso � uma p�gina de erro 404, conforme exemplo da Listagem 6.

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

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.
Sempre que a mesma p�gina ou aplicativo for acessado n�o ser� mais necess�rio carregar os recursos que est�o em cache.
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.
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.