HTML5 - Aplicações Offline
- Posted: May 21, 2012 at 9:24 AM
- 3,678 Views
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
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.
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?