Baixado 66 vezes
![Quem sou Co-founder: Tecnologia: Contacto: [email_address] @vascoas Nome: Vasco Andrade e Silva](https://image.slidesharecdn.com/html5ptofflineapps-110718115009-phpapp01/85/Html5-pt-Offline-Apps-2-320.jpg)
![Local Storage - Como usar? (1/2) Armazenamento localStorage["key1"] = "string1"; localStorage.setItem("key1", "string1"); Consulta var value1 = localStorage["key1"]; // -> "string1" var value2 = localStorage.getItem("key2"); // -> "string2" Armazenar/consultar dados complexos localStorage.setItem("key3", JSON.stringify( {"prop1": "xpto", "prop2": 124} ) var value3 = JSON.parse( localStorage["key3"] ) // -> {prop1: "xpto", prop2: 124}](https://image.slidesharecdn.com/html5ptofflineapps-110718115009-phpapp01/85/Html5-pt-Offline-Apps-20-320.jpg)
![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!](https://image.slidesharecdn.com/html5ptofflineapps-110718115009-phpapp01/85/Html5-pt-Offline-Apps-21-320.jpg)
![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 )](https://image.slidesharecdn.com/html5ptofflineapps-110718115009-phpapp01/85/Html5-pt-Offline-Apps-25-320.jpg)
![Q & A Obrigado! :) [email_address] Dúvidas adicionais? A Byclosure responde! Mailing List http://html5pt.org](https://image.slidesharecdn.com/html5ptofflineapps-110718115009-phpapp01/85/Html5-pt-Offline-Apps-31-320.jpg)
Html5 pt - Offline Apps
- 1. Offline Apps HTML5PT Vasco Andrade e Silva
- 2. Quem sou Co-founder: Tecnologia: Contacto: [email_address] @vascoas Nome: Vasco Andrade e Silva
- 3.
- 4. Agenda HTML5 SpecO 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 Servepara 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= "example.manifest" > ... </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 "text/application-cache" Os headers "HTTP Expire" e "Cache-Control" 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 "todos" 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["key1"] = "string1"; localStorage.setItem("key1", "string1"); Consulta var value1 = localStorage["key1"]; // -> "string1" var value2 = localStorage.getItem("key2"); // -> "string2" Armazenar/consultar dados complexos localStorage.setItem("key3", JSON.stringify( {"prop1": "xpto", "prop2": 124} ) var value3 = JSON.parse( localStorage["key3"] ) // -> {prop1: "xpto", 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 " QUOTA_EXCEEDED_ERR " 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 OSession 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 - StorageEvent Objecto window suporta evento 'storage' Evento 'storage' é despoletado nas outras janelas do browser quando se fazem operações sobre o Storage
- 27. WebSQL - ExemploBest 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 - Suportedos 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 DesktopOffline 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çarAppCache 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 & AObrigado! :) [email_address] Dúvidas adicionais? A Byclosure responde! Mailing List http://html5pt.org
Notas do Editor
- #12 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.
- #18 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.
- #23 QUOTA_EXCEEDED_ERR: Um bloco try/catch à volta do código de armazenamento é suficiente para capturar este cenário e &quot;recuperar&quot; (a definição varia entre aplicações e pode passar por apagar dados desnecessários/antigos)
- #25 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 &quot;leak&quot; from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.
- #28 // 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, &quot;foobar&quot;)' ); alert('foo created and row inserted.'); } ); db.transaction( function (tx) { tx.executeSql( 'DROP TABLE foo' ); tx.executeSql( 'INSERT INTO foo (id, text) VALUES (1, &quot;foobar&quot;)' ); } , 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); } ); } );
- #29 Opera - 4MB/pedido para aumentar armazenamento