O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Offline Apps HTML5 PT Vasco Andrade e Silva
Quem sou Co-founder:  Tecnologia:  Contacto:  [email_address] @vascoas Nome:  Vasco Andrade e Silva
O que fazemos
Agenda <ul><ul><li>HTML5 Spec </li></ul></ul><ul><ul><li>O que é uma aplicação? </li></ul></ul><ul><ul><li>Application Cac...
HTML5 Spec <ul><li>Especificações  novas  do  HTML5 </li></ul><ul><ul><li>Offline (AppCache) </li></ul></ul><ul><ul><ul><l...
O que é uma aplicação? <ul><ul><li>Código &quot;Executável&quot; da aplicação </li></ul></ul><ul><ul><ul><li>JS + HTML </l...
Application Cache <ul><li>Serve para fazer CACHE de: </li></ul><ul><ul><li>código &quot;executável&quot; da aplicação </li...
Application Cache - Como usar? <ul><ul><li>Criar o ficheiro MANIFEST </li></ul></ul><ul><ul><li>Referenciar o ficheiro MAN...
Application Cache - Testar funcionamento
Application Cache -  Criar o ficheiro MANIFEST (1/2) <ul><li>Secções </li></ul><ul><ul><li>CACHE </li></ul></ul><ul><ul><u...
Application Cache -  Criar o ficheiro MANIFEST (2/2) <ul><li>Ficheiro example.manifest: </li></ul><ul><li>CACHE MANIFEST <...
Application Cache -  Referenciar o ficheiro MANIFEST <ul><li><!DOCTYPE html> </li></ul><ul><li><html manifest= &quot;examp...
Application Cache - Configurar o servidor Web <ul><ul><li>O MANIFEST deve ser servido com o mime/type &quot;text/applicati...
Application Cache - Testar funcionamento <ul><li>Eventos relevantes: </li></ul><ul><ul><li>cached: depois de uma instalaçã...
Application Cache - Suporte dos Browsers Limite armazenamento (Mac & Win) ilimitado (iOS) 10 MB (Mac & Win) 5 MB ilimitado...
Web Storage - O que é? <ul><li>Uma API do browser para guardar dados numa base de dados sob a forma de  pares chave/valor ...
Web Storage - Modelo interface Storage {    length ;    key (index);    getItem (key);    setItem (key, value);    removeI...
Web Storage - Restrições acesso (1/2)
Web Storage - Restrições acesso (2/2) <ul><ul><li>É respeitada a Same-Origin Policy </li></ul></ul><ul><ul><li>Local Stora...
Local Storage - Como usar? (1/2) <ul><li>Armazenamento </li></ul><ul><li>localStorage[&quot;key1&quot;] = &quot;string1&qu...
Local Storage - Como usar? (2/2) <ul><li>Verificar suporte antes de usar </li></ul><ul><li>function supportsLocalStorage()...
Local Storage - Limitações <ul><li>Limites do espaço disponível para armazenamento </li></ul><ul><ul><li>Não exisiste espe...
Local Storage - Espaço disponível <ul><li>Desktop </li></ul><ul><li>Chrome                                         2,5MB  ...
Session Storage <ul><li>O Session Storage serve para armazenar (de forma persistente) dados específicos a uma janela/tab <...
Web SQL Database - O que é? <ul><li>Uma API do browser para armazenar dados em bases de dados utilizando uma variante de S...
WebSQL - Storage Event <ul><ul><li>Objecto  window  suporta evento  'storage' </li></ul></ul><ul><ul><li>Evento 'storage' ...
WebSQL - Exemplo <ul><li>Best Practices: separar Schema e dados </li></ul><ul><ul><li>http://blog.maxaller.name/2010/03/ht...
WebSQL - Suporte dos Browsers 5 MB (> 5 MB pedido ao utilizador) Espaço Disponível (Mac & Win) 5 MB (> 5 MB pedido ao util...
Go Offline Desktop Offline Apps HTML5 Offline Apps <ul><li>Binários são distribuidos </li></ul><ul><li>Dados locais para o...
Por onde começar <ul><li>AppCache </li></ul><ul><ul><li>http://diveintohtml5.org/offline.html   </li></ul></ul><ul><ul><li...
Q & A <ul><li>Obrigado! :) </li></ul>[email_address] <ul><li>Dúvidas adicionais? </li></ul><ul><ul><li>A Byclosure respond...
Próximos SlideShares
Carregando em…5
×

Html5 pt - Offline Apps

3.210 visualizações

Publicada em

A capacidade de aplicações web poderem ser corridas offline é uma das principais funcionalidades disponíveis na nova especificação HTML5. Esta apresentação foca-se em como fazer uma aplicação offline usando: application cache, local storage e webSQL (agora deprecated). Ao longo da apresentação será construída uma aplicação móvel que pode correr em múltiplos ambientes.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Html5 pt - Offline Apps

  1. 1. Offline Apps HTML5 PT Vasco Andrade e Silva
  2. 2. Quem sou Co-founder:  Tecnologia:  Contacto:  [email_address] @vascoas Nome:  Vasco Andrade e Silva
  3. 3. O que fazemos
  4. 4. Agenda <ul><ul><li>HTML5 Spec </li></ul></ul><ul><ul><li>O que é uma aplicação? </li></ul></ul><ul><ul><li>Application Cache </li></ul></ul><ul><ul><li>Web Storage </li></ul></ul><ul><ul><ul><li>Local Storage </li></ul></ul></ul><ul><ul><ul><li>Session Storage </li></ul></ul></ul><ul><ul><li>Web SQL Database </li></ul></ul><ul><ul><li>Go Offline </li></ul></ul><ul><ul><li>Q & A </li></ul></ul>
  5. 5. HTML5 Spec <ul><li>Especificações novas  do HTML5 </li></ul><ul><ul><li>Offline (AppCache) </li></ul></ul><ul><ul><ul><li>http://dev.w3.org/html5/spec/offline.html#offline   </li></ul></ul></ul><ul><ul><li>Web Storage (Session Storage e Local Storage) </li></ul></ul><ul><ul><ul><li>http://dev.w3.org/html5/webstorage/   </li></ul></ul></ul><ul><ul><li>Indexed Database API </li></ul></ul><ul><ul><ul><li>http://www.w3.org/TR/IndexedDB/ </li></ul></ul></ul><ul><li>Nota:   as especificações estão escritas num formato para programadores do browser </li></ul><ul><li>Web SQL Database ( especificação W3C  suspensa ) </li></ul><ul><ul><li>http://www.w3.org/TR/webdatabase/ </li></ul></ul>
  6. 6. O que é uma aplicação? <ul><ul><li>Código &quot;Executável&quot; da aplicação </li></ul></ul><ul><ul><ul><li>JS + HTML </li></ul></ul></ul><ul><ul><li>Recursos estáticos </li></ul></ul><ul><ul><ul><li>Exemplo: CSS, imagens da UI, etc. </li></ul></ul></ul><ul><ul><li>Dados dinâmicos </li></ul></ul><ul><ul><ul><li>AJAX + Base de Dados </li></ul></ul></ul>
  7. 7. Application Cache <ul><li>Serve para fazer CACHE de: </li></ul><ul><ul><li>código &quot;executável&quot; da aplicação </li></ul></ul><ul><ul><li>recursos estáticos da aplicação </li></ul></ul><ul><li>Características: </li></ul><ul><ul><li>Oferece modelo de &quot;instalação&quot;/&quot;actualização&quot; de uma webapplication (normalmente &quot;single JS page&quot;) </li></ul></ul><ul><ul><li>Capacidade da aplicação computar e arrancar Offline (depois da aplicação estar &quot;instalada&quot;) </li></ul></ul><ul><ul><li>Limites máximos de espaço variam de browser para browser </li></ul></ul><ul><ul><ul><li>http://grinninggecko.com/developing-cross-platform-html5-offline-app-1/ </li></ul></ul></ul>
  8. 8. Application Cache - Como usar? <ul><ul><li>Criar o ficheiro MANIFEST </li></ul></ul><ul><ul><li>Referenciar o ficheiro MANIFEST no ficheiro html principal da aplicação </li></ul></ul><ul><ul><li>Configurar o servidor web para servir o ficheiro MANIFEST correctamente </li></ul></ul><ul><ul><li>Testar o funcionamento </li></ul></ul>
  9. 9. Application Cache - Testar funcionamento
  10. 10. Application Cache -  Criar o ficheiro MANIFEST (1/2) <ul><li>Secções </li></ul><ul><ul><li>CACHE </li></ul></ul><ul><ul><ul><li>lista de ficheiros vão ser &quot;cachados&quot; localmente </li></ul></ul></ul><ul><ul><li>NETWORK </li></ul></ul><ul><ul><ul><li>lista de padrões prefixo para detectar recursos que o browser nunca deve &quot;cachar&quot; e deve sempre transferir da rede </li></ul></ul></ul><ul><ul><li>FALLBACK </li></ul></ul><ul><ul><ul><li>lista de padrões prefixo para detectar recursos que devem ser transferidos ou se tal não for possível substituídos pela entrada especificada </li></ul></ul></ul>
  11. 11. Application Cache - Criar o ficheiro MANIFEST (2/2) <ul><li>Ficheiro example.manifest: </li></ul><ul><li>CACHE MANIFEST </li></ul><ul><li># 2011-07-07:v1 </li></ul><ul><li>CACHE: </li></ul><ul><li>/style.css </li></ul><ul><li>/code.js </li></ul><ul><li>/image1.jpg </li></ul><ul><li>/counter_offline.html </li></ul><ul><li>NETWORK: </li></ul><ul><li>/counter.php </li></ul><ul><li>FALLBACK: </li></ul><ul><li>/counter.php /counter_offline.html </li></ul>
  12. 12. Application Cache - Referenciar o ficheiro MANIFEST <ul><li><!DOCTYPE html> </li></ul><ul><li><html manifest= &quot;example.manifest&quot; > </li></ul><ul><li>... </li></ul><ul><li></html> </li></ul>Nota:  se a aplicação tiver vários ficheiros html todos devem referenciar o mesmo ficheiro manifest.
  13. 13. Application Cache - Configurar o servidor Web <ul><ul><li>O MANIFEST deve ser servido com o mime/type &quot;text/application-cache&quot; </li></ul></ul><ul><ul><li>Os headers &quot;HTTP Expire&quot; e &quot;Cache-Control&quot; devem estar correctos, caso contrário o browser não irá detectar actualizações ao ficheiro MANIFEST e a aplicação não é actualizada! </li></ul></ul>
  14. 14. Application Cache - Testar funcionamento <ul><li>Eventos relevantes: </li></ul><ul><ul><li>cached: depois de uma instalação; </li></ul></ul><ul><ul><li>updateready: depois de uma actualização </li></ul></ul><ul><ul><li>error: se o download de QUALQUER UM dos recursos falhar </li></ul></ul>if (window.applicationCache) {   applicationCache.addEventListener('updateready', function() {     if (confirm('An update is available. Reload now?'))       window.location.reload();   }); } Depois de uma actualização com sucesso a nova versão ainda  não está em uso  pelo que devemos detectar o evento e perguntar ao utilizador se quer usar a nova versão:
  15. 15. Application Cache - Suporte dos Browsers Limite armazenamento (Mac & Win) ilimitado (iOS) 10 MB (Mac & Win) 5 MB ilimitado ilimitado (com notificação) (Android) Não suportado (Mac, Win & Linux) (Win)
  16. 16. Web Storage - O que é? <ul><li>Uma API do browser para guardar dados numa base de dados sob a forma de  pares chave/valor . </li></ul><ul><ul><li>Características </li></ul></ul><ul><ul><ul><li>API síncrona </li></ul></ul></ul><ul><ul><ul><li>Chaves  e  valores  devem ser strings </li></ul></ul></ul><ul><ul><ul><li>Bases de dados por domínio </li></ul></ul></ul><ul><ul><ul><li>Espaço de armazenamento limitado </li></ul></ul></ul><ul><ul><ul><li> Especificação não está fechada e pode sofrer alterações  </li></ul></ul></ul><ul><ul><ul><li>Implementado em &quot;todos&quot; os browsers </li></ul></ul></ul><ul><ul><ul><ul><li>IE 8+, Safari 4+, Chrome 4+, Opera 10.5+ e Firefox 2+ </li></ul></ul></ul></ul>
  17. 17. Web Storage - Modelo interface Storage {   length ;   key (index);   getItem (key);   setItem (key, value);   removeItem (key);   clear (); }; Tempo de vida indeterminado Tempo de vida contexto de janela/tab do browser
  18. 18. Web Storage - Restrições acesso (1/2)
  19. 19. Web Storage - Restrições acesso (2/2) <ul><ul><li>É respeitada a Same-Origin Policy </li></ul></ul><ul><ul><li>Local Storage </li></ul></ul><ul><ul><ul><li>Cada domínio tem acesso à sua BD de forma isolada </li></ul></ul></ul><ul><ul><ul><li>Nota: Sub-domínios são domínios </li></ul></ul></ul><ul><ul><li>Session Storage </li></ul></ul><ul><ul><ul><li>No Session Storage cada janela/tab do browser tem acesso a uma área de armazenamento distinta </li></ul></ul></ul>
  20. 20. Local Storage - Como usar? (1/2) <ul><li>Armazenamento </li></ul><ul><li>localStorage[&quot;key1&quot;] = &quot;string1&quot;;   </li></ul><ul><li>localStorage.setItem(&quot;key1&quot;, &quot;string1&quot;);   </li></ul><ul><li>Consulta </li></ul><ul><li>var value1 = localStorage[&quot;key1&quot;];                     // -> &quot;string1&quot;   </li></ul><ul><li>var value2 = localStorage.getItem(&quot;key2&quot;);      // -> &quot;string2&quot;   </li></ul><ul><li>Armazenar/consultar dados complexos </li></ul><ul><li>localStorage.setItem(&quot;key3&quot;,  JSON.stringify( {&quot;prop1&quot;: &quot;xpto&quot;, &quot;prop2&quot;: 124} )   </li></ul><ul><li>var value3 =  JSON.parse( localStorage[&quot;key3&quot;] )  // -> {prop1: &quot;xpto&quot;, prop2: 124}   </li></ul>
  21. 21. Local Storage - Como usar? (2/2) <ul><li>Verificar suporte antes de usar </li></ul><ul><li>function supportsLocalStorage() { </li></ul><ul><li>  try { </li></ul><ul><li>     return 'localStorage' in window && window['localStorage'] !== null; </li></ul><ul><li>   } </li></ul><ul><li>  catch (e) { </li></ul><ul><li>     return false; </li></ul><ul><li>  } </li></ul><ul><li>} </li></ul>Demo!
  22. 22. Local Storage - Limitações <ul><li>Limites do espaço disponível para armazenamento </li></ul><ul><ul><li>Não exisiste especificação para consultar quanto espaço temos disponível </li></ul></ul><ul><ul><ul><li>Execepto em IE: localStorage.remainingSpace() </li></ul></ul></ul><ul><ul><li>Se a gravação falhar é lançada a excepção &quot; QUOTA_EXCEEDED_ERR &quot; </li></ul></ul><ul><li>No IE8 as alterações são persistidas assincronamente: </li></ul><ul><ul><li>Para forçar a escrita síncrona : </li></ul></ul><ul><ul><ul><li>Chamar localStorage. begin() </li></ul></ul></ul><ul><ul><ul><li>Fazer as alterações </li></ul></ul></ul><ul><ul><ul><li>Chamar localStorage. commit() </li></ul></ul></ul><ul><ul><li>http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx </li></ul></ul><ul><ul><li>http://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage </li></ul></ul>
  23. 23. Local Storage - Espaço disponível <ul><li>Desktop </li></ul><ul><li>Chrome                                         2,5MB (UTF-16) </li></ul><ul><li>Firefox                                           5MB Safari v4                                        ilimitado </li></ul><ul><li>Safari v5                                        2,5MB  (UTF-16) </li></ul><ul><li>IE 8 e IE 9                                      2,5MB (UTF-16) </li></ul><ul><li>Opera                                             ilimitado/definido pelo utilizador </li></ul><ul><li>Mobile </li></ul><ul><li>Mobile Safari (iPhone/iPad)        2,5MB  (UTF-16) Android 2.1                                    >2MB  (UTF-16) </li></ul><ul><li>Android 2.2+, bada                       2,5MB  (UTF-16) </li></ul><ul><li>Para aplicações distribuídas na web: </li></ul><ul><ul><li>contar apenas com 2MB </li></ul></ul><ul><ul><li>ou calcular o espaço disponível ( http://arty.name/localstorage.html ) </li></ul></ul><ul><li>Para distribuições controladas: </li></ul><ul><ul><li>Opera e Firefox permitem configurar o espaço de armazenamento </li></ul></ul>
  24. 24. Session Storage <ul><li>O Session Storage serve para armazenar (de forma persistente) dados específicos a uma janela/tab </li></ul><ul><ul><li>Não é partilhado entre janelas/tabs </li></ul></ul><ul><ul><ul><li>Como acontece com Local Storage e com Cookies </li></ul></ul></ul><ul><ul><li>Deve substituir o uso de Cookies para guardar informação de forma persistente numa sessão de browser </li></ul></ul>
  25. 25. Web SQL Database - O que é? <ul><li>Uma API do browser para armazenar dados em bases de dados utilizando uma variante de SQL </li></ul><ul><li>Especificação W3C Suspensa ! </li></ul><ul><ul><li>http://www.w3.org/TR/webdatabase/ </li></ul></ul><ul><ul><li>Working group está a trabalhar na especificação IndexedDB em alternativa </li></ul></ul><ul><li>Características: </li></ul><ul><ul><li>Disponível apenas em WebKit e Opera </li></ul></ul><ul><ul><ul><li>todos os dispositivos iOS e Android usam WebKit! </li></ul></ul></ul><ul><ul><li>Única forma nativa de armazenar/operar sobre [muitos] dados estruturados </li></ul></ul><ul><ul><ul><li>até que o IndexedBD esteja terminado/disseminado   </li></ul></ul></ul><ul><ul><li>Interface  assíncrona </li></ul></ul><ul><ul><ul><li>As interacções com a BD são feitas usando callbacks </li></ul></ul></ul><ul><ul><li>SQL do SQLite ( http://www.sqlite.org/lang.html ) </li></ul></ul>
  26. 26. WebSQL - Storage Event <ul><ul><li>Objecto window suporta evento 'storage' </li></ul></ul><ul><ul><li>Evento 'storage' é despoletado nas outras  janelas do browser quando se fazem operações sobre o Storage </li></ul></ul>
  27. 27. WebSQL - Exemplo <ul><li>Best Practices: separar Schema e dados </li></ul><ul><ul><li>http://blog.maxaller.name/2010/03/html5-web-sql-database-intro-to-versioning-and-migrations/   </li></ul></ul><ul><ul><li>https://github.com/nanodeath/JS-Migrator/ </li></ul></ul>Demo!
  28. 28. WebSQL - Suporte dos Browsers 5 MB (> 5 MB pedido ao utilizador) Espaço Disponível (Mac & Win) 5 MB (> 5 MB pedido ao utilizador) (iOS) (Mac, Win & Linux) 5MB (verificado na v12) 10MB (verificado na 2.3.4) (Android) Não suportado (Mac, Win & Linux) (Win) Não suportado
  29. 29. Go Offline Desktop Offline Apps HTML5 Offline Apps <ul><li>Binários são distribuidos </li></ul><ul><li>Dados locais para o funcionamento da aplicação </li></ul><ul><li>Sincronização de base de dados local com serviços web </li></ul><ul><li>Sistema de updates inexistente ou específico a um conjunto de aplicações (exemplo: pacotes debian, updates de windows, etc.) </li></ul><ul><li>Código fonte da aplicação (JS + HTML + CSS) em cache local </li></ul><ul><li>Dados locais para o funcionamento da aplicação </li></ul><ul><li>Sincronização de base de dados local com serviços web </li></ul><ul><li>Modelo de update/instalação especificado e standardizado suportado multi-plataforma e multi-dispositivo </li></ul>
  30. 30. Por onde começar <ul><li>AppCache </li></ul><ul><ul><li>http://diveintohtml5.org/offline.html   </li></ul></ul><ul><ul><li>http://appcachefacts.info/ </li></ul></ul><ul><li>LocalStorage </li></ul><ul><ul><li>http://diveintohtml5.org/storage.html   </li></ul></ul><ul><li>WebSQL   </li></ul><ul><ul><li>http://blog.maxaller.name/2010/03/html5-web-sql-database-intro-to-versioning-and-migrations/   </li></ul></ul><ul><ul><li>https://github.com/nanodeath/JS-Migrator/ </li></ul></ul>
  31. 31. Q & A <ul><li>Obrigado! :) </li></ul>[email_address] <ul><li>Dúvidas adicionais? </li></ul><ul><ul><li>A Byclosure responde! </li></ul></ul><ul><ul><li>Mailing List http://html5pt.org </li></ul></ul>

×