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

  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.