HTML5 OFFLINE & STORAGESoluções para um mundo sem conexão permanente.
Gabriel Oliveira   gabriel.oliveira@caelum.com.br   @gabaiel UI, UX, IxD designer Front-end Back-end Instrutor na Caelum
HTML5 - O que tem aqui?Connectivity / Realtime
HTML5 - O que tem aqui?Connectivity / RealtimeCSS3
HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access
HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & Effects
HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimedia
HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimediaPerformance & Integration
HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimediaPerformance & IntegrationSe...
HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimediaPerformance & IntegrationSe...
“Deixa eu te mostrar esse site...”
WWW - Distributed PlatformOs recursos DEVEM estar “espalhados”Por que todo mundo fala de “cloud computing”mesmo?
HTTP Cache        ServerA       C        E    B       D        F                         Client (browser)
HTTP Cache                           A       C                               B       D        ServerA       C        E    ...
HTTP Cache                                      A       C                                          B       D              ...
HTTP Cache                                      A       C                                          B       D              ...
HTTP Cache                                      A    C       E                                      B        D       F    ...
HTTP Cache                                      A       C       E                                          B       D      ...
Sem HTTP, sem HTTP Cache
“Só preciso REGISTRAR SEU CONTRATO...”
OFFLINE ... Armazenamento de recursos no cliente Permite obtê-los sem conexão Hybrid Apps & Mobile   UIWebView (iOS)   Web...
... & STORAGEEvita full HTTProundtripsMenor consumo debandaSTANDALONE* HybridApps & Mobile
HTML5 AppCacheDefine recursos que DEVEM ser armazenados emcacheDefine recursos que NÃO DEVEM ser armazenados emcacheDefinição...
AppCache ManifestArquivo “plain text”Começa com CACHE MANIFESTOs recursos podem ser declarados diretamente na“raiz” ou em ...
AppCache Manifest                                                           offline.appcacheCACHE MANIFEST# Version 1CACHE:...
AppCache ManifestCache de recursos distribuidosTem parâmetros na URL?Não funcionará.Encontre ou crie URLs sem parâmetro e ...
AppCache Manifest                                                           offline.appcacheCACHE MANIFEST# Version 1CACHE:...
AppCache ManifestTem algum recurso que NÃO deve ser cacheado?Você pode definir recursos ou “prefixos” que nãodevem ser adici...
AppCache Manifest                                                       offline.appcacheCACHE MANIFEST# Version 1CACHE:# .....
AppCache ManifestFeedback sobre o que não pode ser acessado offlineDeclare recursos alternativos em um grupo FALLBACK:Qualq...
AppCache Manifest                                                     offline.appcacheCACHE MANIFEST# Version 1CACHE:# ...#...
AppCache - Utilização Configure seu servidor para responder o manifesto com MIME text/cache-manifest - *.appcache Adicione ...
AppCache - Utilização                                                                     index.html<!doctype html><html m...
AppCache        ServerA       C        E       M*    B       D        F                              Client (browser)
AppCache                                A       C                                    B       D        ServerA       C     ...
AppCache                                           A           C                                                   B      ...
AppCache                                           A           C                                                   B      ...
AppCache                                           A       C                                               B       D      ...
AppCache - ExpiraçãoMudou uma imagem? Incremente o número de versãono comentárioDetecte alterações no AppCache Manifest e ...
AppCache - Expiração                                                            js/cachecontrol.jswindow.applicationCache....
AppCache - ExpiraçãoCuidado: impeça que o navegador adicione oAppCache Manifesto ao HTTP Cache!“access plus 0 seconds”
Online & Offline Events Agumas coisas só devem funcionar com uma conexão ativa. E se a conexão cair? A mudança de status na...
Online & Offline Events                                                          js/cachecontrol.js// Aquele código ainda e...
Client-side Storage Local Storage Session Storage Indexed DB
Local Storage É como um cookie, só que melhor Para guardar dados não-estruturados “Same origin” http://exemplo.com:80 ≠ ht...
Local Storage                                                          js/cachecontrol.js// Aquele código ainda está por a...
Local Storage - API .setItem ( key, value ); .getItem( key ); .removeItem( key ); .clear( );
Local Storage Use .clear( ) e .removeItem( key ) somente se necessário Usuário pode descartar dados armazenados pelas confi...
Session StorageIdêntico ao Local Storage, só que persiste por uma“sessão”Fechou a janela, acabouFechou a aba, acabou (*)
Indexed DBFeito para armazenar dados estruturados (object store)Assíncrono e transacional“Full-featured document based sch...
Indexed DB - Utilização Criaremos a “base” Criaremos um “Object Store” na “base”
Indexed DB - Utilização                                                              js/cachecontrol.js// Aquele código ai...
Indexed DB - Utilização Abriremos a base Vamos inserer um objeto no Object Store
Indexed DB - Utilização                                                          js/cachecontrol.js// Aquele código ainda ...
Indexed DB - Utilizção Vamos fazer um “SELECT *”, mas usando um cursor
Indexed DB - Utilização                                                              js/cachecontrol.js// Aquele código ai...
E quando a conexão voltar?Mande os dados nos callbacks por XHR, por exemploCuidado: leitura assíncrona, requisições XHR,ca...
Perguntas? Eu tenho... Quanto posso armazenar?      App Cache            Indeterminado     Local Storage         5MB mínim...
Perguntas? Eu tenho... Funciona em que navegador?                             Internet          Chrome   Firefox          ...
Perguntas? Eu tenho... Mas você citou “MOBILE”                                            Android                iOS (Safa...
MUITO OBRIGADO! gabriel.oliveira@caelum.com.br @gabaiel
Upcoming SlideShare
Loading in …5
×

HTML5 Offline & Storage

3,270 views

Published on

Palestra sobre HTML5 Offline & Storage, como permitir que sua aplicação ou website seja acessível pelo navegador mesmo sem uma conexão com a internet.

AppCache Manifest, OnLine & OffLine Events, LocalStorage, SessionStorage e Indexed DB com exemplos simples de código.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,270
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
50
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • Web Sockets\nServer-side Events (push)\n
  • gradients\nborder-radius\nbox-shadow\ntext-shadow\ntransform\ntransition\nflexible box\nmedia queries\n
  • Geolocation\nAudio input\nVideo input\nLocal data (contacts, events)\nTilt orientation\n
  • SVG\nCanvas\nWebGL\nCSS 3D\nKeyframe animations\n
  • Audio\nVideo\n
  • Web workers\nXMLHttpRequest 2\n
  • &lt;article&gt;\n&lt;section&gt;\n&lt;header&gt;\n&lt;hgroup&gt;\n&lt;footer&gt;\n&lt;nav&gt;\n&lt;aside&gt;\n&lt;figure&gt;\nRDFa\nMicrodata\nMicroformats\n
  • App Cache\nLocal storage\nIndexed DB\nFile API\n
  • Mesmo tendo sido visitado antes, com recursos no cache do navegador, a inexist&amp;#xEA;ncia da conex&amp;#xE3;o impede a exibi&amp;#xE7;&amp;#xE3;o da p&amp;#xE1;gina\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Mesmo com recursos em cache &amp;#xE9; imposs&amp;#xED;vel obt&amp;#xEA;-los para exibi&amp;#xE7;&amp;#xE3;o, &amp;#xE9; preciso uma conex&amp;#xE3;o ativa para que o navegador fa&amp;#xE7;a a requisi&amp;#xE7;&amp;#xE3;o e s&amp;#xF3; ent&amp;#xE3;o o navegador verifica se o recurso armazenado est&amp;#xE1; em cache para utiliz&amp;#xE1;-lo\n
  • Quando imaginamos a WWW como a plataforma de aplica&amp;#xE7;&amp;#xF5;es ENTERPRISE do futuro, temos que contornar essa situa&amp;#xE7;&amp;#xE3;o de alguma maneira\nAt&amp;#xE9; aplica&amp;#xE7;&amp;#xF5;es desktop client/server sofrem com isso: &amp;#x201C;Desculpa senhor, estamos sem sistema&amp;#x201D;\n
  • Viagens, conex&amp;#xF5;es ruins, blind spots\nApps que devem carregar uma p&amp;#xE1;gina mesmo sem conex&amp;#xE3;o\n
  • Armazenamento local\n
  • \n
  • \n
  • Declare todos as p&amp;#xE1;ginas no manifesto, assim toda sua app &amp;#xE9; cacheada a partir da home\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Mesmo com o cache atualizado, a aplica&amp;#xE7;&amp;#xE3;o ainda utilizar&amp;#xE1; o cache antigo se n&amp;#xE3;o chamarmos swapCache\n
  • \n
  • \n
  • \n
  • \n
  • Cookie 4095 bytes, enviado em todas requisi&amp;#xE7;&amp;#xF5;es\nlocalStorage no m&amp;#xED;nimo 5MB, n&amp;#xE3;o &amp;#xE9; enviado\n
  • Foi feito para salvar Strings, mas podemos abusar do JSON Parsing\n
  • \n
  • \n
  • N&amp;#xE3;o &amp;#xE9; consistente at&amp;#xE9; mesmo em um mesmo navegador\n
  • \n
  • \n
  • indexedDB.open(nome, descri&amp;#xE7;&amp;#xE3;o), onsuccess para usar a base\nObject Store +- tabela\nPrecisa mudar a vers&amp;#xE3;o do idb para criar uma\n
  • \n
  • indexedDB.open(nome, descri&amp;#xE7;&amp;#xE3;o), onsuccess para usar a base\nObject Store +- tabela\nPrecisa mudar a vers&amp;#xE3;o do idb para criar uma\n
  • \n
  • \n
  • \n
  • App Cache pode ser limitado a 10% do espa&amp;#xE7;o em disco dispon&amp;#xED;vel\nIndexed DB &amp;#xE9; indeterminado por defini&amp;#xE7;&amp;#xE3;o\n
  • \n
  • Voc&amp;#xEA; pode usar UIWebView / WebView e armazenar no device? WebSQL?\n
  • \n
  • HTML5 Offline & Storage

    1. 1. HTML5 OFFLINE & STORAGESoluções para um mundo sem conexão permanente.
    2. 2. Gabriel Oliveira gabriel.oliveira@caelum.com.br @gabaiel UI, UX, IxD designer Front-end Back-end Instrutor na Caelum
    3. 3. HTML5 - O que tem aqui?Connectivity / Realtime
    4. 4. HTML5 - O que tem aqui?Connectivity / RealtimeCSS3
    5. 5. HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access
    6. 6. HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & Effects
    7. 7. HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimedia
    8. 8. HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimediaPerformance & Integration
    9. 9. HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimediaPerformance & IntegrationSemantics
    10. 10. HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimediaPerformance & IntegrationSemanticsOffline & Storage
    11. 11. “Deixa eu te mostrar esse site...”
    12. 12. WWW - Distributed PlatformOs recursos DEVEM estar “espalhados”Por que todo mundo fala de “cloud computing”mesmo?
    13. 13. HTTP Cache ServerA C E B D F Client (browser)
    14. 14. HTTP Cache A C B D ServerA C E B D F Client (browser)
    15. 15. HTTP Cache A C B D HTTP cache A C B D ServerA C E B D F Client (browser)
    16. 16. HTTP Cache A C B D HTTP cache ServerA C E B D F Client (browser)
    17. 17. HTTP Cache A C E B D F HTTP cache A E B F ServerA C E B D F Client (browser)
    18. 18. HTTP Cache A C E B D F HTTP cache ServerA C E B D F Client (browser)
    19. 19. Sem HTTP, sem HTTP Cache
    20. 20. “Só preciso REGISTRAR SEU CONTRATO...”
    21. 21. OFFLINE ... Armazenamento de recursos no cliente Permite obtê-los sem conexão Hybrid Apps & Mobile UIWebView (iOS) WebView (Android)
    22. 22. ... & STORAGEEvita full HTTProundtripsMenor consumo debandaSTANDALONE* HybridApps & Mobile
    23. 23. HTML5 AppCacheDefine recursos que DEVEM ser armazenados emcacheDefine recursos que NÃO DEVEM ser armazenados emcacheDefinição de recursos alternativos
    24. 24. AppCache ManifestArquivo “plain text”Começa com CACHE MANIFESTOs recursos podem ser declarados diretamente na“raiz” ou em um grupo CACHEAdicione um comentário para versionamento e controlede expiração
    25. 25. AppCache Manifest offline.appcacheCACHE MANIFEST# Version 1CACHE:# Todas as páginas aqui, por favorimg/logo.pngcss/index.cssjs/index.jsjs/cachecontrol.js# Cache de recursos distribuidos (CDN)http://code.jquery.com/jquery.min.jshttp://yui.yahooapis.com/combo?3.6.0/build/cssfonts/cssfonts-min.css&3.6.0/build...
    26. 26. AppCache ManifestCache de recursos distribuidosTem parâmetros na URL?Não funcionará.Encontre ou crie URLs sem parâmetro e tudo vai ficarbem
    27. 27. AppCache Manifest offline.appcacheCACHE MANIFEST# Version 1CACHE:# Todas as páginas aqui, por favorimg/logo.pngcss/index.cssjs/index.js# Cache de recursos distribuidos (CDN)http://code.jquery.com/jquery.min.jshttp://yui.yahooapis.com/3.6.0/build/cssreset/cssreset-min.csshttp://yui.yahooapis.com/3.6.0/build/cssfonts/cssfonts-min.csshttp://yui.yahooapis.com/3.6.0/build/cssbase/cssbase-min.css
    28. 28. AppCache ManifestTem algum recurso que NÃO deve ser cacheado?Você pode definir recursos ou “prefixos” que nãodevem ser adicionados o AppCacheCom conexão, o navegador tentará obter o recurso damaneira tradicionalDeclare em um grupo NETWORK
    29. 29. AppCache Manifest offline.appcacheCACHE MANIFEST# Version 1CACHE:# ...# Ainda está tudo aqui :)NETWORK:# A ‘/’ no fim do caminho serve como ‘/*’ (wildcard)realtime/api/live/chat.phputils/sendmail.aspx
    30. 30. AppCache ManifestFeedback sobre o que não pode ser acessado offlineDeclare recursos alternativos em um grupo FALLBACK:Qualquer recurso (HTML, CSS, JavaScript) pode teruma versão alternativaQualquer “prefixo” pode apontar para um recursoalternativo
    31. 31. AppCache Manifest offline.appcacheCACHE MANIFEST# Version 1CACHE:# ...# Ainda está tudo aqui :)NETWORK:# ...# Ainda está tudo aqui :)FALLBACK:chat.jsp offline.htmlimg/top.jpg img/offline_badge_top.jpgevents/ notconnected.htmlhttp://www.facebook.com/plugins/ notconnected.htmlhttp://platform.twitter.com/ notconnected.html
    32. 32. AppCache - Utilização Configure seu servidor para responder o manifesto com MIME text/cache-manifest - *.appcache Adicione o atributo “manifest” em todos os HTMLs que devem estar disponíveis offline Cuidado: algum recurso respondeu 404? Nada vai para o cache!
    33. 33. AppCache - Utilização index.html<!doctype html><html manifest="offline.appcache"> <head> <title>QCon 2012 - Offline</title> <link rel="styesheet" href="css/index.min.css"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ...
    34. 34. AppCache ServerA C E M* B D F Client (browser)
    35. 35. AppCache A C B D ServerA C E M* B D F M* Client (browser)
    36. 36. AppCache A C B D HTTP cache A C E B D F A C App Cache B D ServerA C E M* B D F M* Client (browser)
    37. 37. AppCache A C B D HTTP cache A C E B D F App Cache ServerA C E M* B D F M* Client (browser)
    38. 38. AppCache A C B D HTTP cache A E C B F D A E App Cache B F ServerA C E M* B D F M* Client (browser)
    39. 39. AppCache - ExpiraçãoMudou uma imagem? Incremente o número de versãono comentárioDetecte alterações no AppCache Manifest e reconstruao cacheFaça isso com JavaScriptAssegure-se de recarregar a página para obter osnovos recursos
    40. 40. AppCache - Expiração js/cachecontrol.jswindow.applicationCache.addEventListener(‘updateready’, function(event) { if(window.applicationCache.status == window.applicationCache.UPDATEREADY) { // Um novo manifesto foi detectado, vamos pegar os recursos de novo: window.applicationCache.swapCache(); // Já temos os novos recursos. Vamos mostrá-los: if(confirm(‘Nova versão online. Deseja carregar agora?’)) { window.location.reload(); } else { // Merece uma mensagem avisando que a versão é obsoleta, não acham? } }}, false);
    41. 41. AppCache - ExpiraçãoCuidado: impeça que o navegador adicione oAppCache Manifesto ao HTTP Cache!“access plus 0 seconds”
    42. 42. Online & Offline Events Agumas coisas só devem funcionar com uma conexão ativa. E se a conexão cair? A mudança de status na atividade da conexão deve disparar um evento no navegador Podemos capturar esse evento com JavaScript
    43. 43. Online & Offline Events js/cachecontrol.js// Aquele código ainda está por aqui :)window.addEventListener(‘offline’ function(event) { // Event Listeners impedindo novos requests // salvaremos tudo localmente}, false);window.addEventListener(‘online’ function(event) { // Enviar o que está no armazenamento local para o servidor. SYNC! // Remover Event Listeners e deixar novos requests serem feitos}, false);
    44. 44. Client-side Storage Local Storage Session Storage Indexed DB
    45. 45. Local Storage É como um cookie, só que melhor Para guardar dados não-estruturados “Same origin” http://exemplo.com:80 ≠ http://exemplo.com:8080
    46. 46. Local Storage js/cachecontrol.js// Aquele código ainda está por aqui :)// salvaremos tudo localmente COM LOCAL STORAGE// Só podemos salvar Strings (DOMString)localStorage.setItem(‘userId’, ‘77634810’);// Mas isso é uma String não?localStorage.setItem(‘newContractFormData20120605091422’, JSON.stringify({ email : ‘bla@foo.com’, company: ‘Foo Enterprises LLC’, createdAt: ‘2012-6-5 09:14:22’}));
    47. 47. Local Storage - API .setItem ( key, value ); .getItem( key ); .removeItem( key ); .clear( );
    48. 48. Local Storage Use .clear( ) e .removeItem( key ) somente se necessário Usuário pode descartar dados armazenados pelas configurações do navegador (limpar dados de aplicações)
    49. 49. Session StorageIdêntico ao Local Storage, só que persiste por uma“sessão”Fechou a janela, acabouFechou a aba, acabou (*)
    50. 50. Indexed DBFeito para armazenar dados estruturados (object store)Assíncrono e transacional“Full-featured document based schemaless NoSQL”
    51. 51. Indexed DB - Utilização Criaremos a “base” Criaremos um “Object Store” na “base”
    52. 52. Indexed DB - Utilização js/cachecontrol.js// Aquele código ainda está por aqui :)var idb = {};idb.db = null;idb.open = function() { var idbDatabase = indexedDB.open(‘caelum’, ‘Indexed DB Caelum Online’); idbDatabase.onsuccess = function(event) { idb.db = event.target.result; var v = ‘1.0’; if (v != idb.db.version) { var setVersionTransaction = idb.db.setVersion(v); setVersionTransaction.onsuccess = function(event) { var store = idb.db.createObjectStore(‘comentarios’, { keyPath: ‘createdAt’}); } } };};
    53. 53. Indexed DB - Utilização Abriremos a base Vamos inserer um objeto no Object Store
    54. 54. Indexed DB - Utilização js/cachecontrol.js// Aquele código ainda está por aqui :)idb.createComentario = function(comentario) { var transaction = idb.db.transaction([‘caelum’], IDBTransaction.READ_WRITE, 0); var store = transaction.objectStore(‘comentarios’); var commit = store.put({ content : comentario, createdAt : new Date().getTime() }); commit.onsuccess = function(event) { // callback }};
    55. 55. Indexed DB - Utilizção Vamos fazer um “SELECT *”, mas usando um cursor
    56. 56. Indexed DB - Utilização js/cachecontrol.js// Aquele código ainda está por aqui :)idb.getComentarios = function() { var transaction = idb.db.transaction([‘caelum’], IDBTransaction.READ_WRITE, 0); var store = transaction.objectStore(‘comentarios’); var keyRange = IDBKeyRange.lowerBound(0); var cursor = store.openCursos(keyRange); cursor.onsuccess = function(event) { var current = e.target.result; // Paramos o cursor com Explicit Boolean Comparison // para evitar outros valores válidos if(!!current == false) { return; } // callback };};
    57. 57. E quando a conexão voltar?Mande os dados nos callbacks por XHR, por exemploCuidado: leitura assíncrona, requisições XHR,callbacks, você sabe onde isso vai parar se não soubermuito bem o que está fazendo...
    58. 58. Perguntas? Eu tenho... Quanto posso armazenar? App Cache Indeterminado Local Storage 5MB mínimo Session Storage 5MB mínimo Indexed DB Indeterminado
    59. 59. Perguntas? Eu tenho... Funciona em que navegador? Internet Chrome Firefox Opera Safari Explorer App 4 3.5 10 10.60 4Cache Local 4 3.5 8 10.50 4StorageSession 5 2 8 10.50 4StorageIndexed 12 16 10 -- -- DB
    60. 60. Perguntas? Eu tenho... Mas você citou “MOBILE” Android iOS (Safari) Opera Mini Browser App Cache 3.2 -- 2.1Local Storage 3.2 -- 2.1 Session 3.2 -- 2.1 Storage Indexed DB -- * -- ? -- *
    61. 61. MUITO OBRIGADO! gabriel.oliveira@caelum.com.br @gabaiel

    ×