Usando aplicativos off-line (cache)

Esta é a aula 08 do curso de JSONVeja o cronograma completo aqui.

O HTML 5 oferece um recurso muito interessante chamado Application Cache  que consiste em um arquivo de texto contendo a lista de arquivos que podem ser executados offline e/ou on-line.

Preparando sua aplicação para trabalhar off-lline

Primeiro crie uma página HTML chamada de offline.html mostrando uma mensagem ao usuário de que seu dispositivo está sem conexão com a Internet, salve este arquivo junto com os demais arquivos do seu app.

Criando o arquivo cache manifest

Para que o navegador ou seu dispositivo móvel saiba quais páginas ele possa deixar em cache é necessário criar um arquivo texto com a extensão .appcache

  1. Abra o NotePad ++ e crie um arquivo com o nome lista.appcache
  2. Na primeira linha do arquivo coloque otexto CACHE MANIFEST
  3. Na linha seguinte, comece a inserir o nome dos arquivos que poderão ficar em cache. Exemplo; cache_manifest_01
  4. Agora precisamos passar para a nossa aplicação quais são as páginas que não podem trabalhar off-line. Para isso coloque o texto NETWORK e na linha seguinte os arquivos que devem trabalhar conectados. Exemplo; cache_manifest_02
  5. O cache manifest também permite que uma página de erro seja exibida caso o usuário esteja sem conexão com a Internet. Podemos chamar este arquivo através do texto FALLBACK.  Exemplo completo;

cache_manifest

Preparando o HTML

Para chamar o arquivo em suas páginas HTML, acrescente o atributo manifest na tag <HTML>

<html manifest="lista.appcache">
 ...
</html>

Você pode utilizar a seguinte função JS para verificar o estado do cache da sua aplicação;

<script>
 function onUpdateReady()
 {
       alert('Dados atualizados!');
 }
window.applicationCache.addEventListener('updateready', onUpdateReady); 
if(window.applicationCache.status === window.applicationCache.UPDATEREADY)
 {
       onUpdateReady();
 }
</script>

Você pode chamar esta função dentro do evento onclick de um button, ou no evento onload do body.

Deixe seu comentário