Post on 04-Jul-2015
description
Web OfflineBruno Gama Catão
– Eu, quando meu cliente pediu isso !
“Hã ?!”
Qual o Problema ?
Sistema da PCCG
70 delegacias com acesso à Internet
SEM software
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
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"
“Quero algo que esteja na Internet, mas que funcione quando a
Internet cair"
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 …
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 ;)
AppCache + Web Storage
=
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
…
–Clarice Lispector
“Bora programar galera !”
AppCache 1/2
HTMLManifesto
Browser
1 - Primeiro AcessoEu tenho um manifesto !
2 - Faz download
Cache —————
arquivo 1 arquivo 2
….
3 - Define4 - Faz download Cache Local
————— arquivo 1 arquivo 2
….
5 - Cria
WEB LOCAL
AppCache 2/2
HTMLManifesto
Browser
1 - Outros AcessosEu 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 !
Manifesto
CACHE MANIFEST!!/index.html!/imagens/logo.png!/javascript/script.js!/css/estilo.css
HTML
<html manifest="minha_app.appcache">
HTMLManifesto
Eu tenho um manifesto !
FIM
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 ?
text/cache-manifest
Mime-Type
No Apache, adicionar ao .htaccess
AddType text/cache-manifest .appcache!
Em Java, criar um filtro (próximo slide)
No IIS, Sei Lá !!!
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/
Esqueci de Colocar um Arquivo no Manifesto
F5
– Dalai Lama
“Tudo tem que estar no manifesto”
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
Dados Mistos
Seção Network
Recursos que estão na rede
Seção Fallback
Baixa da rede, mas se estiver offline usa esse arquivo
Seção Network
CACHE MANIFEST!!/index.html!/imagens/logo.png!/javascript/script.js!/css/estilo.css!!NETWORK:!http://www.google-analytics.com/ga.js
Seção Network ;)
CACHE MANIFEST!!/index.html!/imagens/logo.png!/javascript/script.js!/css/estilo.css!!NETWORK:!*
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
Online
Offline
Solução
Seção Fallback
Forneça uma foto padrão para quando estiver offline
Seção Fallback
CACHE MANIFEST!!/index.html!/imagens/logo.png!/javascript/script.js!/css/estilo.css!!NETWORK:!*!!FALLBACK:!/img/avatares/ /img/avatar-generico.png
Seção Fallback
Comunicação Cliente / Servidor
Javascript !!!
REST
JSON
Inversão de arquitetura
Arquitetura Inversa
Normalmente
Lógica no servidor
Cliente possui lógica apenas de apresentação
Porém, precisamos de uma arquitetura inversa
Por quê ?
JavaScript
Aprendam !
Javascript != Java
Linguagem Funcional
WEB => JavaScript
node.js => Javascript server-side !
Vale a pena olhar …
E o Banco de Dados
Web Storage
Session Storage
Local Storage
temporário
permanente (5 a 10mb por página)
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');
Bibliotecas
require.js - http://requirejs.org
jquery - http://jquery.com
handlebars - http://handlebarsjs.com
require.js
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
Handlebars
Templating Engine (ex: JSP, ASP, PHP, …)
Facilita a produção de texto (normalmente HTML)
TEMPLATE DADOS String+ =
Normalmente HTML
PROBLEMAS
Problemas
Cache-control:!no-store
Problemas
Muito inovador
Falta de frameworks
Falta de ferramentas
Vantagens
Muito inovador
Acelera muito a velocidade do acesso
Diminui bastante o processamento no servidor
Aumenta as possibilidades de interação com o aplicativo
Resultados
docx gerado 100% em JavaScript !
DocxGenJS https://github.com/edi9999/docxtemplater
Perguntas ?
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/