Your SlideShare is downloading. ×
Html5 pt - Offline Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Html5 pt - Offline Apps

2,804
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 …

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

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,804
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
64
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • As linhas de comentários começam por #. Quando se actualizam ficheiros é necessário criar uma nova versão do manifest. Para o fazer sem alterar a estrutura utiliza-se a linha de comentário: # 2011-07-07:v1 que deverá ser actualizada depois de actualizações aos ficheiros que fazem parte da cache da aplicação.
  • O Tempo de Vida de um contexto de browser não está bem definido, sendo que existe uma nota sobre sessões a que se possa fazer restart.
  • QUOTA_EXCEEDED_ERR: Um bloco try/catch à volta do código de armazenamento é suficiente para capturar este cenário e "recuperar" (a definição varia entre aplicações e pode passar por apagar dados desnecessários/antigos)
  • Caso de uso: [Session Storage] is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time. Cookies don't really handle this case well. For example, a user could be buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.
  • // Adaptado de  http://html5demos.com/database-rollback var db =  openDatabase( 'foo', '1.0', 'foo', 2 * 1024 ) ;  db.transaction( function (tx) {      tx.executeSql( 'CREATE TABLE IF NOT EXISTS foo (id unique, text)' );      tx.executeSql( 'INSERT INTO foo (id, text) VALUES (1, "foobar")' );     alert('foo created and row inserted.');    } ); db.transaction( function (tx) {      tx.executeSql( 'DROP TABLE foo' );      tx.executeSql( 'INSERT INTO foo (id, text) VALUES (1, "foobar")' );    } ,  function (err) {     alert('should be rolling back caused by: ' + err.message);    } ); db.transaction( function (tx) {    tx.executeSql( 'SELECT * FROM foo', [], function (tx, results) {       alert('found rows (should be 1): ' + results.rows.length);      } ,  function (tx, err) {       alert('failed (rollback failed): ' + err.message);      } );   } );
  • Opera - 4MB/pedido para aumentar armazenamento
  • Transcript

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