Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sua Aplicação Offline

Sua Aplicação Offline

Maneiras de tornar seu conteúdo disponível enquanto o usuário não tem conexão com internet, persistindo apenas o necessário em ambiente local.

3f2ebf61315d43cae59e727dab091620?s=128

Daniel Filho

October 16, 2012
Tweet

Transcript

  1. SUA APLICAÇÃO. OFFLINE DANIEL FILHO danielfilho.info @daniel!lho

  2. @danielfilho

  3. ig.com.br front-end developer

  4. zofe.com.br co-host

  5. danielfilho.github.com eternal apprentice

  6. AGENDA

  7. None
  8. None
  9. AGENDA appCache Como usar Estrutura do arquivo de manifesto Cache

    States Checando status da conexão Links Referências
  10. IMPORTANTE appCache: tecnologia manifest : arquivo físico

  11. APPCACHE

  12. APPCACHE ERA UMA VEZ... Cookies Flash Storage Google Gears {...}

  13. None
  14. APPCACHE VANTAGENS Disponibilidade Mobilidade Otimização da banda

  15. APPCACHE O QUE É POSSÍVEL? Gravar dados em texto Gravar

    dados binários Sincronizar dados com o servidor Melhorar a performance da aplicação
  16. APPCACHE COMO FUNCIONA?

  17. example.com/page.html é digitado na barra de endereços carrega página, arquivos

    do cache e arquivo manifest carrega página da web a página já está no appCache? sim não baixa o arquivo manifest baixa e guarda em cache os arquivos apontados pelo manifest dispara evento ‘cached’ verifica manifest mudou não mudou 404 apagar todos os arquivos cacheados antes baixar e guardar todos os arquivos do manifest dispara evento ‘updateready’ dispara evento ‘obsolete’ dispara evento ‘noupdate’ Louis-Rémi: Offline Web Applications, we’re not there yet
  18. COMO USAR?

  19. COMO USAR? APACHE SERVER text/cache-manifest appcache mime-type

  20. COMO USAR? .HTACCESS AddType text/cache-manifest appcache mime-type

  21. COMO USAR? EXEMPLO DE CÓDIGO <!DOCTYPE html> <html manifest="manifest.appcache"> ...

  22. ANATOMIA DO ARQUIVO MANIFEST.APPCACHE

  23. MANIFEST.APPCACHE Cache Network Fallback

  24. EXEMPLO DE MANIFEST.APPCACHE

  25. CACHE MANIFEST # version 1.3 CACHE: #images /images/sprite.png /images/photo.png #pages

    /pages/page1.html /pages/page2.html {...} {...} #CSS /style/style.css #scripts /js/script.js FALLBACK: / /offline.html NETWORK: /join/signup.html /app/updateInfo.pl
  26. CACHE MANIFEST: DECLARANDO

  27. Todo arquivo .appcache necessita começar com a linha CACHE MANIFEST,

    validando a finalidade do arquivo para o servidor.
  28. CACHE MANIFEST: COMENTÁRIOS • Os comentários iniciam com o char

    “#” • É uma boa prática versionar o arquivo para certificar que o mesmo seja alterado enquanto desenvolve
  29. CACHE MANIFEST CACHE:

  30. CACHE: #images /images/sprite.png /images/photo.png #pages /pages/page1.html /pages/page2.html #CSS /style/style.css #scripts

    /js/script.js
  31. CACHE: • CACHE: define início da declaração dos arquivos que

    devem ser armazenados. • #images define o começo da declaração de imagens que serão armazenadas. • /images/image1.png mostra o caminho relativo para o arquivo
  32. CACHE MANIFEST NETWORK:

  33. NETWORK: signup.html updateInfo.pl

  34. NETWORK: • NETWORK: define a área que nunca deve ser

    armazenada. • O arquivo signup.html deve ser apenas acessado quando online.
  35. NETWORK: • É possível utilizar wildcards como /dynamic/*, assim, tudo

    que tentar ser acessado na pasta / dynamic/ estará disponível apenas quando conectado.
  36. ATENÇÃO Caso haja um erro 404 na seção NETWORK, todo

    o cache será ignorado.
  37. CACHE MANIFEST FALLBACK:

  38. FALLBACK: / /offline.html /users.pl /users.html

  39. FALLBACK: • FALLBACK: é usado para dar caminhos diferentes ao

    usuário quando ele está offline. • A primeira parte (no caso “/”) define o caminho ou arquivo a ser testado. • Separado por espaço, logo em seguida vem o arquivo ou caminho que deve ser carregado (no caso “/offline.html”)
  40. CACHE STATES

  41. CACHE STATES UNCACHED IDLE CHECKING DOWNLOADING UPDATEREADY OBSOLETE

  42. CACHE STATES Todos esses cache states são retornados através do

    window.applicationCache
  43. CACHE STATES: UNCACHED Indica quando um objeto do cache da

    aplicação não foi totalmente inicializado.
  44. CACHE STATES: IDLE O cache da aplicação está ocupado, em

    processo de atualização.
  45. CACHE STATES: CHECKING O arquivo .manifest está sendo obtido e/ou

    verificando se existe atualizações.
  46. CACHE STATES: DOWNLOADING Os recursos estão sendo carregados para serem

    incluidos no cache, devido a alteração no manifest.
  47. CACHE STATES: UPDATEREADY Indica a existência de uma nova versão

    do cache que já está pronta para ser usada.
  48. CACHE STATES: OBSOLETE O cache atual da aplicação tornou-se obsoleto.

  49. var appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED: //

    UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; break; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; };
  50. EVENTOS

  51. var appCache = window.appCache; appCache.addEventListener('cached', function(){...}, false); appCache.addEventListener('checking', function(){...}, false);

    appCache.addEventListener('downloading', function(){...}, false); appCache.addEventListener('error', function(){...}, false); appCache.addEventListener('noupdate', function(){...}, false); appCache.addEventListener('obsolete', function(){...}, false); appCache.addEventListener('progress', function(){...}, false); appCache.addEventListener('updateready', function(){...}, false);
  52. ATENÇÃO Se o appcache for atualizado, o navegador não irá

    atualizar os itens ou a página carregada.
  53. None
  54. if (window.applicationCache) { applicationCache.addEventListener('updateready', function() { if (confirm('Esta página foi

    atualizada. Deseja atualizar?')) { window.location.reload(); } }); }
  55. “E COMO SABER QUANDO A APLICAÇÃO ESTÁ ONLINE?“

  56. CHECANDO O STATUS DA CONEXÃO

  57. DEMO

  58. Ou seja: navigator.onLine navigator.onLine ? alert("ONLINE") : alert("OFFLINE"); Simples. Usa-se:

    Retorna true ou false.
  59. LINKS ÚTEIS Can I Use? caniuse.com Cache Manifest Validator manifest-validator.com

  60. DANIEL FILHO danielfilho.info danielfilho.info/@ danielfilho.info/+ danielfilho.info/g danielfilho.info/in Zone Of Front

    Enders zofe.com.br