Html5 pt - Offline Apps
31
Offline Apps HTML5 PT Vasco Andrade e Silva
-
Upload
byclosure -
Category
Technology
-
view
2.769 -
download
2
description
A capacidade de aplicações web poderem ser corridas offline é uma das principais funcionalidades disponíveis na nova especificação HTML5. Esta apresentação foca-se em como fazer uma aplicação offline usando: application cache, local storage e webSQL (agora deprecated). Ao longo da apresentação será construída uma aplicação móvel que pode correr em múltiplos ambientes.
Transcript of Html5 pt - Offline Apps
Offline AppsHTML5 PT
Vasco Andrade e Silva
O que fazemos
Agenda
• HTML5 Spec• O que é uma aplicação?• Application Cache• Web Storage
o Local Storageo Session Storage
• Web SQL Database• Go Offline• Q & A
HTML5 Spec
Especificações novas do HTML5
• Offline (AppCache)o http://dev.w3.org/html5/spec/offline.html#offline
• Web Storage (Session Storage e Local Storage)o http://dev.w3.org/html5/webstorage/
• Indexed Database APIo 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/
O que é uma aplicação?
• Código "Executável" da aplicaçãoo JS + HTML
• Recursos estáticoso Exemplo: CSS, imagens da UI, etc.
• Dados dinâmicoso AJAX + Base de Dados
Application Cache
Serve para 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
browsero http://grinninggecko.com/developing-cross-platform-html5-offline-app-1/
Application Cache - Como usar?
1.Criar o ficheiro MANIFEST2.Referenciar o ficheiro MANIFEST no ficheiro html
principal da aplicação3.Configurar o servidor web para servir o ficheiro
MANIFEST correctamente4.Testar o funcionamento
Application Cache - Testar funcionamento
Application Cache - Criar o ficheiro MANIFEST (1/2)
Secções
• CACHEo lista de ficheiros vão ser "cachados" localmente
• NETWORKo lista de padrões prefixo para detectar recursos que o browser nunca deve
"cachar" e deve sempre transferir da rede
• FALLBACKo 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
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.phpFALLBACK:/counter.php /counter_offline.html
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.
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!
Eventos relevantes:• cached: depois de uma instalação;• updateready: depois de uma actualização• error: se o download de QUALQUER UM dos
recursos falhar
Application Cache - Testar funcionamento
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 peloque devemos detectar o evento e perguntar ao utilizador se quer usar a nova versão:
Application Cache - Suporte dos BrowsersLimite armazenamento
(Mac & Win) ilimitado
(iOS) 10 MB
(Mac & Win) 5 MB
ilimitado
ilimitado (com notificação)
(Android)
Não suportado
(Mac, Win & Linux)
(Win)
Web Storage - O que é?
Uma API do browser para guardar dados numa base de dados sob a forma de pares chave/valor.
• Característicaso API síncronao Chaves e valores devem ser stringso Bases de dados por domínioo Espaço de armazenamento limitadoo Especificação não está fechada e pode sofrer alterações o Implementado em "todos" os browsers
IE 8+, Safari 4+, Chrome 4+, Opera 10.5+ e Firefox 2+
Web Storage - Modelointerface 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
Web Storage - Restrições acesso (1/2)
Web Storage - Restrições acesso (2/2)
• É respeitada a Same-Origin Policy• Local Storage
o Cada domínio tem acesso à sua BD de forma isoladao Nota: Sub-domínios são domínios
• Session Storageo No Session Storage cada janela/tab do browser tem acesso a uma
área de armazenamento distinta
Local Storage - Como usar? (1/2)
ArmazenamentolocalStorage["key1"] = "string1"; localStorage.setItem("key1", "string1");
Consultavar value1 = localStorage["key1"]; // -> "string1" var value2 = localStorage.getItem("key2"); // -> "string2"
Armazenar/consultar dados complexoslocalStorage.setItem("key3", JSON.stringify({"prop1": "xpto", "prop2": 124}) var value3 = JSON.parse(localStorage["key3"]) // -> {prop1: "xpto", prop2: 124}
Local Storage - Como usar? (2/2)Verificar suporte antes de usarfunction supportsLocalStorage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; }}
Demo!
Local Storage - Limitações
Limites do espaço disponível para armazenamento• Não exisiste especificação para consultar quanto espaço temos
disponívelo 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:
1.Chamar localStorage.begin()2.Fazer as alterações3.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
Local Storage - Espaço disponívelDesktopChrome 2,5MB (UTF-16)Firefox 5MBSafari v4 ilimitadoSafari v5 2,5MB (UTF-16)IE 8 e IE 9 2,5MB (UTF-16)Opera ilimitado/definido pelo utilizador
MobileMobile 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
Session Storage
O Session Storage serve para armazenar (de forma persistente) dados específicos a uma janela/tab
• Não é partilhado entre janelas/tabso 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
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
o todos os dispositivos iOS e Android usam WebKit!• Única forma nativa de armazenar/operar sobre [muitos] dados
estruturadoso até que o IndexedBD esteja terminado/disseminado
• Interface assíncronao As interacções com a BD são feitas usando callbacks
• SQL do SQLite (http://www.sqlite.org/lang.html)
WebSQL - Storage Event
• Objecto window suporta evento 'storage'• Evento 'storage' é despoletado nas outras janelas do
browser quando se fazem operações sobre o Storage
WebSQL - Exemplo
Best 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!
5 MB (> 5 MB pedido ao utilizador)
WebSQL - Suporte dos BrowsersEspaç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
Desktop Offline 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
Go Offline
Por onde começar
AppCache• 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/
Q & A
Obrigado! :)
Dúvidas adicionais?• A Byclosure responde!• Mailing List http://html5pt.org
