HTML5 - Aplicações Offline

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:

<!DOCTYPE HTML>
<html>
<head>
<title>Clock</title>
<script src=”clock.js”></script>
<link rel=”stylesheet” href=”clock.css”>
</head>
<body>
<p>The time is:<outputid=”clock”></output></p>
</body>
</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 offline, 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:

<!DOCTYPE HTML>
<html manifest=”clock.manifest”>
<head>
<title>Clock</title>
<script src=”clock.js”></script>
<link rel=”stylesheet” href=”clock.css”>
</head>
<body>
<p>The time is:<outputid=”clock”></output></p>
</body>
</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

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:

  • onchecking
  • onerror
  • onnoupdate
  • ondownloading
  • onprogress
  • onupdateready
  • oncached
  • onobsolete

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.’
}

 

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.