Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Upcoming SlideShare
Loading in …5
×

Html5 pt - Offline Apps

3,217 views

Published on

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.

Published in: Technology
  • Be the first to comment

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>

×