HTML5 Offline & Storage

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 & IntegrationSemantics

HTML5 - O que tem aqui?Connectivity / RealtimeCSS3Device Access3D, Graphics & EffectsMultimediaPerformance & IntegrationSemanticsOfﬂine & Storage

“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 B D F Client (browser)

HTTP Cache A C B D HTTP cache A C B D ServerA C E B D F Client (browser)

HTTP Cache A C B D HTTP cache ServerA C E B D F Client (browser)

HTTP Cache A C E B D F HTTP cache A E B F ServerA C E B D F Client (browser)

HTTP Cache A C E B D F HTTP cache ServerA C E B D F Client (browser)

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) WebView (Android)

... & STORAGEEvita full HTTProundtripsMenor consumo debandaSTANDALONE* HybridApps & Mobile

HTML5 AppCacheDefine recursos que DEVEM ser armazenados emcacheDefine recursos que NÃO DEVEM ser armazenados emcacheDefinição de recursos alternativos

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

AppCache Manifest ofﬂine.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...

AppCache ManifestCache de recursos distribuidosTem parâmetros na URL?Não funcionará.Encontre ou crie URLs sem parâmetro e tudo vai ﬁcarbem

AppCache Manifest ofﬂine.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

AppCache ManifestTem algum recurso que NÃO deve ser cacheado?Você pode deﬁnir recursos ou “preﬁxos” que nãodevem ser adicionados o AppCacheCom conexão, o navegador tentará obter o recurso damaneira tradicionalDeclare em um grupo NETWORK

AppCache Manifest ofﬂine.appcacheCACHE MANIFEST# Version 1CACHE:# ...# Ainda está tudo aqui :)NETWORK:# A ‘/’ no fim do caminho serve como ‘/*’ (wildcard)realtime/api/live/chat.phputils/sendmail.aspx

AppCache ManifestFeedback sobre o que não pode ser acessado ofﬂineDeclare recursos alternativos em um grupo FALLBACK:Qualquer recurso (HTML, CSS, JavaScript) pode teruma versão alternativaQualquer “preﬁxo” pode apontar para um recursoalternativo

AppCache Manifest ofﬂine.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

AppCache - Utilização Conﬁgure 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 ofﬂine Cuidado: algum recurso respondeu 404? Nada vai para o cache!

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"> ...

AppCache ServerA C E M* B D F Client (browser)

AppCache A C B D ServerA C E M* B D F M* Client (browser)

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)

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)

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)

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

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);

AppCache - ExpiraçãoCuidado: impeça que o navegador adicione oAppCache Manifesto ao HTTP Cache!“access plus 0 seconds”

Online & Ofﬂine 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

Online & Ofﬂine 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);

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 ≠ http://exemplo.com:8080

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’}));

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 conﬁgurações do navegador (limpar dados de aplicações)

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 schemaless NoSQL”

Indexed DB - Utilização Criaremos a “base” Criaremos um “Object Store” na “base”

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’}); } } };};

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 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 }};

Indexed DB - Utilizção Vamos fazer um “SELECT *”, mas usando um cursor

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 };};

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...

Perguntas? Eu tenho... Quanto posso armazenar? App Cache Indeterminado Local Storage 5MB mínimo Session Storage 5MB mínimo Indexed DB Indeterminado

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

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 -- * -- ? -- *

MUITO OBRIGADO! gabriel.oliveira@caelum.com.br @gabaiel

HTML5 Offline & Storage

by Gabriel Oliveira on Aug 09, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

HTML5 Offline & Storage Presentation Transcript