Versão Impressão

HTML5

Um guia de referência para os desenvolvedores web.

22. Aplicações offline

Caching

HTML5 provê uma maneira de se indicar ao navegador que elementos são necessários e devem ser postos em cache para que uma aplicação funcione offline. O exemplo da documentação oficial é bastante esclarecedor. Dê uma olhada na seguinte página:

Arquivo: exemplos/22/clock.html

1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Clock</title>
5 <script src="clock.js"></script>
6 <link rel="stylesheet" href="clock.css">
7 </head>
8 <body>
9 <p>The time is: <output id="clock"></output></p>
10 </body>
11 </html>

Trata-se de um widget de relógio. Para funcionar, este HTML depende dos arquivos "clock.js" e "clock.css". Para permitir que o usuário acesse esta página offile, precisamos escrever um arquivo de manifesto, indicando que URLs devem ser postas em cache. Vamos preparar uma nova versão do widget, contendo o manifesto, que é um arquivo com a extensão .manifest e que deve ser servido com o tipo MIME text/cache-manifest. Em nosso caso, o arquivo vai se chamar clock.manifest e terá o seguinte conteúdo:

CACHE MANIFEST
clock1.html
clock.css
clock.js

Agora veja o HTML com o arquivo de manifesto linkado:

Arquivo: exemplos/22/clock1.html

1 <!DOCTYPE HTML>
2 <html manifest="clock.manifest">
3 <head>
4 <title>Clock</title>
5 <script src="clock.js"></script>
6 <link rel="stylesheet" href="clock.css">
7 </head>
8 <body>
9 <p>The time is: <output id="clock"></output></p>
10 </body>
11 </html>

Note que é recomendado que você insira o próprio HTML principal na lista de URLs do arquivo de manifesto, embora não seja necessário. Ao encontrar uma página com um arquivo de manifesto vinculado, o navegador fará cache das URLs listadas no manifesto e da própria página.

Note também que não é necessário que todas as URLs para cache estejam importadas no documnto atual. O arquivo de manifesto pode contar todas as páginas de sua aplicação que forem necessárias para permitir o funcionamento offline, inclusive a navegação entre páginas.

O objeto ApplicationCache

O objeto ApplicationCache controla o status e operações de caching da página. Ele pode ser acessado via javascript, assim:

window.applicationCache

Seu método mais interessante é o update(), que faz com que o agente de usuário recarregue o cache da aplicação. Além disso, ele possui a propriedade status, cujo valor numérico pode ser um dos seguintes:

0 - UNCACHED
Não há um arquivo de manifesto nesta página ou apontando para ela
1 - IDLE
O objeto ApplicationCache está ocioso. O cache está atualizado.
2 CHECKING
O arquivo de manifesto está sendo baixado e conferido.
3 - DOWNLOADING
As URLs vinculadas no manifesto estão sendo baixadas.
4 - UPDATEREADY
O cache é antigo, mas ainda não foi marcado como obsoleto.
5 - OBSOLETE
O cache foi marcado como obsoleto e precisa ser atualizado assim que possível.

O objeto ApplicationCache também possui os seguintes eventos, relacionados a sua mudança de status:

Como você pode ver, além de onerror, temos um evento para cada um dos status da lista acima.

Controle de status da aplicação

No exemplo do relógio acima não há formulários ou submissões Ajax. O agente de usuários não troca dados com o servidor. Assim é muito fácil fazer sua aplicação rodar offline, mas essa não é a realidade da maioria das aplicações. Vimos no capítulo anterior como fazer armazenamento local de dados. Com isso, você pode armazenar os dados que o navegador deveria enviar para o servidor enquanto a aplicação estiver offline e, tão logo ela esteja online, enviar tudo.

Para saber se a aplicação está online, basta acessar a propriedade onLine do objeto window.navigator:

function salva(dados){
  if(window.navigator.onLine){
    enviaAjax(dados)
  }else{
    salvaLocal(dados)
  }
}

E para disparar o envio quando a aplicação estiver online e avisar o usuário quando ela estiver offline, usamos os eventos ononline e onoffline do objeto window:

window.ononline=function(){
  enviaAjax(obtemLocal())
  document.getElementById('warning').innerHTML=''
}

window.onoffline=function(){
  document.getElementById('warning').innerHTML='Aplicação offline.'
}