Esta é a aula 08 do curso de JSON – Veja 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
- Abra o NotePad ++ e crie um arquivo com o nome lista.appcache
- Na primeira linha do arquivo coloque otexto CACHE MANIFEST
- Na linha seguinte, comece a inserir o nome dos arquivos que poderão ficar em cache. Exemplo;
- 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;
- 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;
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.
