Web Offline com HTML5
•
2 gostaram•927 visualizações
Descrição introdutória de uma arquitetura para o desenvolvimento de aplicações web com funcionalidades offline. Tecnologias envolvidas: HTML5, Javascript, Handlebards, etc.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Web Offline com HTML5
Semelhante a Web Offline com HTML5 (20)
Mais de Bruno Catão
Web Offline com HTML5
- 1. Web Offline Bruno Gama Catão
- 2. – Eu, quando meu cliente pediu isso ! “Hã ?!”
- 3. Qual o Problema ? Sistema da PCCG 70 delegacias com acesso à Internet SEM software
- 4. Requisitos do Sistema Quero ter acesso ao software em todas as delegacias Quero poder emitir relatórios em tempo real de qualquer local Características “especiais” Baixa qualificação dos usuários Frequente instabilidade da conexão com a Internet
- 5. Resumindo Baixa Qualificação dos Usuários Não dá para instalar aplicativos complicados Acessar de qualquer lugar Tem “cheiro” de Internet Instabilidade da conexão Ninguém costa de ouvir: “Desculpe senhor, mas o sistema está fora do ar"
- 6. “Quero algo que esteja na Internet, mas que funcione quando a Internet cair"
- 7. Alternativas Arquiteturas Cliente / Servidor: Delphi, Java Webstart, Adobe AIR, WPF, … Problema: - Alô, é do TI ? Então, o programa não tá abrindo ! - Você fez alguma coisa diferente ? - Não, só abri uma página dizendo que ganhei um ringtone …
- 10. Por que HTML5 ? HTML5 = HTML + CSS3 + JS AppCache + Web Storage !!! Não preciso instalar software no computador de ninguém ! Se a Internet não abrir chame o suporte e não o programador ;)
- 12. Vantagens Carregamento mais rápido Suporta instabilidades de conexão Bom para aplicativos móveis (o 3G não é tão bom assim) Coleta de dados …
- 13. –Clarice Lispector “Bora programar galera !”
- 14. AppCache 1/2 HTML Manifesto Browser 1 - Primeiro Acesso Eu tenho um manifesto ! 2 - Faz download Cache ————— arquivo 1 arquivo 2 …. 3 - Define 4 - Faz download Cache Local ————— arquivo 1 arquivo 2 …. 5 - Cria WEB LOCAL
- 15. AppCache 2/2 HTML Manifesto Browser 1 - Outros Acessos Eu tenho um manifesto ! Cache ————— arquivo 1 arquivo 2 …. Cache Local ————— arquivo 1 arquivo 2 …. 3 - Acessa arquivos locais WEB LOCAL 2 - Tem cache ? NÃO HÁ COMUNICAÇÃO !
- 16. Manifesto CACHE MANIFEST! ! /index.html! /imagens/logo.png! /javascript/script.js! /css/estilo.css
- 17. HTML <html manifest="minha_app.appcache"> HTML Manifesto Eu tenho um manifesto !
- 18. FIM
- 20. O que falta ? Mime-type Como atualizar o conteúdo ? E a comunicação cliente / servidor ? Posso ter dados mistos (online / offline) ? E o banco de dados ?
- 22. Mime-Type No Apache, adicionar ao .htaccess AddType text/cache-manifest .appcache! Em Java, criar um filtro (próximo slide) No IIS, Sei Lá !!!
- 24. Atualização de Conteúdo O conteúdo é atualizado se a cache for invalidada Coisas que NÃO invalidam a AppCache: F5, Control F5, limpar a cache e limpar dados offline Como invalidar a cache ? Alterando o manifesto Page miss (404 ou 500) No Chrome: chrome://appcache-internals/
- 25. Esqueci de Colocar um Arquivo no Manifesto
- 26. F5
- 27. – Dalai Lama “Tudo tem que estar no manifesto”
- 28. Atualização Controlada Colocar um número de versão no manifesto ajuda ;) # Versao 1.0! CACHE MANIFEST! ! /index.html! /imagens/logo.png! /javascript/script.js! /css/estilo.css
- 29. Dados Mistos Seção Network Recursos que estão na rede Seção Fallback Baixa da rede, mas se estiver offline usa esse arquivo
- 31. Seção Network ;) CACHE MANIFEST! ! /index.html! /imagens/logo.png! /javascript/script.js! /css/estilo.css! ! NETWORK:! *
- 32. Imagine o cenário … Seu aplicativo tem usuários Cada usuário tem sua fotografia Como seu sistema se comportará offline ? Você vai baixar todas as fotos ? Teria que atualizar o manifesto para cada nova foto
- 33. Online
- 34. Offline
- 35. Solução Seção Fallback Forneça uma foto padrão para quando estiver offline
- 36. Seção Fallback CACHE MANIFEST! ! /index.html! /imagens/logo.png! /javascript/script.js! /css/estilo.css! ! NETWORK:! *! ! FALLBACK:! /img/avatares/ /img/avatar-generico.png
- 37. Seção Fallback
- 38. Comunicação Cliente / Servidor Javascript !!! REST JSON Inversão de arquitetura
- 39. Arquitetura Inversa Normalmente Lógica no servidor Cliente possui lógica apenas de apresentação Porém, precisamos de uma arquitetura inversa Por quê ?
- 40. JavaScript Aprendam ! Javascript != Java Linguagem Funcional WEB => JavaScript node.js => Javascript server-side ! Vale a pena olhar …
- 41. E o Banco de Dados Web Storage Session Storage Local Storage temporário permanente (5 a 10mb por página)
- 42. PouchDB Dupla Dinâmica: PouchDB + CouchDB var db = new PouchDB('dbname'); ! db.put({ _id: 'dave@gmail.com', name: 'David', age: 67 }); ! db.changes().on('change', function() { console.log('Ch-Ch-Changes'); }); ! db.replicate.to('http://example.com/mydb');
- 43. Bibliotecas require.js - http://requirejs.org jquery - http://jquery.com handlebars - http://handlebarsjs.com
- 44. require.js
- 45. jQuery Uniformização Busca de elementos por seletores CSS Suporte a plugins Ex: $(‘a’).hide( ); // Esconde todos os links $(‘h1’).css(‘color’, ‘red’); // Todos os títulos ficam vermelho
- 46. Handlebars Templating Engine (ex: JSP, ASP, PHP, …) Facilita a produção de texto (normalmente HTML) TEMPLATE DADOS String+ = Normalmente HTML
- 47. PROBLEMAS
- 49. Problemas Muito inovador Falta de frameworks Falta de ferramentas
- 50. Vantagens Muito inovador Acelera muito a velocidade do acesso Diminui bastante o processamento no servidor Aumenta as possibilidades de interação com o aplicativo
- 51. Resultados
- 55. docx gerado 100% em JavaScript ! DocxGenJS https://github.com/edi9999/docxtemplater
- 56. Perguntas ?
- 57. Referências Sérgio Lopes - http://sergiolopes.org/palestra- appcache-html5-offline W3Schools - http://www.w3schools.com/html/ html5_app_cache.asp Zeno Rocha - http://zenorocha.com/html5-local- storage/