Comment Feed for Channel 9 - HTML5 - Aplicações Offline http://mschnlnine.vo.llnwd.net/d1/Dev/App_Themes/C9/images/feedimage.png Channel 9 - 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 en Tue, 21 May 2013 23:22:30 GMT Tue, 21 May 2013 23:22:30 GMT Rev9