Offline Apps HTML5 PT Vasco Andrade e Silva
Html5 pt - Offline Apps
Dec 24, 2014
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
