Post on 10-Jul-2015
description
Web Off-lineDesenvolvendo aplicações web com:Application Cache e Storage
Guilherme Visi Siquinelli
Como assim?!
+
===
Web Off-line
Pra que !@)#* isso serve?
Application Cache e Web Storage
Application Cache
Benefícios
● Navegação off-line● Velocidade● Redução de carga do servidor
Application Cache
Diferente da API Storage que falaremos a frente, o Application Cache armazena o aplicativo em sí, todos os arquivos HTML, CSS, JS, Imagens e etc exigidos para seu funcionamento, e também diferente da cache de navegador web normal, ele não é apagado quando o usuário limpa o cache, eles são instalados e permenecem ali até que eles mesmos se desintalem ou o usuário os exclua.
Application Cache
Para instalar um aplicativo na cache, precisamos criar um arquivo manifesto listando os URLs exigidos, e entáo vincular a página HTML principal ao manifesto configurando o atributo manifest da tag <html>
Application Cache
Um aplicativo web baixado pela primeira vez e colocado na cache, qualquer carregamento subsequente será feito a partir da cache. Então todos os arquivos exigidos devem estar listados na cache, caso contrário não serão carregados. Essa política simula o estado off-line.Em geral, aplicativos web mais complicados não podem colocar na cache todos os recursos que exigem, mas ainda podem usar a cache se tiverem um manifesto mais complexo.
Application Cache
Os arquivos manifesto tem uma sintaxe um pouco mais complicada do que esse exemplo que usamos, e existem outras duas maneiras de listar recursos em um manifesto. Além da seção "CACHE:" padrão, também temos as seções que começam com os cabeçalhos "NETWORK:" e "FALLBACK:"
Manifestos complexos
Application Cache
Esta seção especifica URLs que nunca devem ser colocados na cache e sempre devem ser recuperados da rede. Podemos usar prefixos de URL, cujo recurso comece com o prefixo será carregado da rede, nesta seção listamos scripts do lado do servidor, que usam linguagens de backend, como PHP, Ruby, NodeJS, Java e etc... Se estivermos off-line, evidentemente a tentativa de carregamento vai falhar. Então vamos a seção FALLBACK.
NETWORK:
Application Cache
Esse cabeçalho inclue dois URLs em cada linha, o segundo URL é carregado e armazenado na cache, o primeiro URL é um prefixo. Os URLs correspondentes a este prefixo não serão colocados na cache, mas vão ser carregados da rede, quando possível. Se a tentativa de carregamento falhar, o recurso especificado pelo segundo URL colocado na cache será usado em seu lugar.
FALLBACK:
Application Cache
Application Cache
Quando um aplicativo é carregado na cache, toda requisição busca diretamente da cache, mesmo se estivermos online, a verificação é feita de forma assíncrona. Se uma mudança é encontrada o arquivo de manifesto todos arquivos que ele faz referência são baixados e reinstalados na cache.
Atualização da cache
Importante!Note que o navegador não verifica se algum dos arquivos da cache mudou, somente o manifesto!
Application Cache
Eventos
Application Cache
Application Cache
Pense em um laço de repetição de eventos, que recebem repetidamente informações para processar e disparar uma função de resposta de acordo com o evento.
É bastante flexível e permite um sistema assíncrono.
Eventos
Application Cache
Comunicação assíncronaDe forma simples, podemos dizer que uma comunicação é assíncrona quando há mais de um canal enviando e recebendo informações em tempos diferentes, ou seja, não segue o workflow natural de um aplicativo.
Link de exemplo: http://nodejsreactions.tumblr.com/post/60458066021/when-i-forget-that-async-doesnt-work-everywhere
Application Cache
Com a API Application Cache podemos usar 8 eventos disparados assincronamente para monitoramento e tratamento da aplicação.
Vamos ver um pouquinho de cada um...
Application Cache
onchecking: sempre disparado primeiro, ele verifica seu arquivo manifesto.
onnoupdate: é disparado se estivermos usando a versão atualizada da aplicação.
Application Cache
ondownloading: se a aplicação ainda não estiver na cache ou o manifesto for atualizado, ele sinaliza o inicio do processo de download.
onprogress: disparado periodicamente durante o processo de download, normalmente para cada arquivo baixado.
Application Cache
oncached: é disparado na primeira vez que uma aplicação é colocada na cache.
onupdateready: após detecção e download de uma nova versão da aplicação, esse evento é disparado.
Application Cache
onerror: disparado para erros no carregamento do manifesto ou da aplicação em cache.
onobsolete: se o arquivo manifesto referenciado no html não existe, esse evento é disparado e a aplicação é removida da cache.
Application Cache
Outra alternativa é usar a propriedade status do objeto applicationCache, ela retorna 6 valores possíveis:
Também vamos ver um pouco de cada um ...
Application Cache
UNCACHED ou 0: aplicação não referencia um arquivo manifesto.
IDLE ou 1: manifesto verificado, está na cache e atualizado.
Application Cache
CHECKING ou 2: o navegador está verificando o arquivo de manifesto.
DOWNLOADING ou 3: o navegador está baixando os arquivos listados no manifesto.
Application Cache
UPDATEREADY ou 4: nova versão baixada e colocada na cache.
OBSOLETE ou 5: o manifesto não existe e a cache será excluída.
Application Cache
O objeto applicationCache também define 2 métodos, o update() e o swapCache().
… Sim, vamos...
Tem alguém dormindo aí já?
Application Cache
O método update() atualiza e procura uma nova versão do aplicativo, ou seja, ele força o navegador passar pela mesma verificação do manifesto, disparando os mesmos eventos que um aplicativo carregado pela primeira vez.
Application Cache
O método swapCache() diz ao navegador que pode descartar a cache antiga e atender a qualquer pedido futuro a partir da nova cache, isso não faz recarregar o aplicativo, HTML, imagens e scripts continuam na versão antiga, por isso seu uso tem que ser muito bem planejado.
Application Cache
De forma simples, só faz sentido chamar o método swapCache() quando a propriedade status do objeto applicationCache retorna UPDATEREADY ou OBSOLETE, em outros casos dispara uma exceção.
Storage
LocalStorage e SessionStorage, ambos propriedades do objeto Window que fazem referência a um objeto Storage, um array associativo persistente que mapeia chaves de string em valores de string. A diferença entre os dois tem a ver com vida útil e escopo, ou seja, por quanto tempo os dados são salvos e a quem estão acessíveis.
Storage
Com esta API podemos gravar dados estruturados (objetos ou arrays), valores primitivos, valores internos, como datas, expressões regulares e até objetos File.
Storage
Os dados armazenados em localStorage são permanentes, não expiram e continuam lá até que um aplicativo web ou o navegador os exclua. Ele tem como escopo a origem do documento, definida por seu protocolo, nome de host e porta.
Storage
Já os dados armazenados em sessionStorage são perdidos quando a janela ou guia é fechada permanentemente. O escopo apesar de também ser definido pela origem do documento, são separados pela janela ou guia, cada guia grava seus dados em sessionStorage separadamente.
A API de armazenamento possui métodos para manipulação dos dados, inclusive "get and set" para atribuição e recuperação dos dados armazenados, também "remove and clear", os nomes por sí são bem sugestivos, então vamos passar para os exemplos no próximo slide.
Storage
Armazenamento
Storage
Com estas APIs podemos desenvolver aplicações web simples e complexas que funcionam off-line, basta saber trabalhá-las. Ou então até desenvolver um plugin jQuery para facilitar seu uso e disponibilizar para a comunidade.
Pensem nisso...
Aplication Cache & Storage
Conclusão
Obrigado!
David Flanagan, JavaScript O guia definitivo, 6ª edição, Bookman 2013.
Diego Eis, Elcio Ferreira, HTML5 e CSS3 com farinha e pimenta, 1ª edição.
HTML5 Rocks, http://www.html5rocks.com/pt/features/offline 23/09/2013.
Aplication Cache & Storage
Referências bibliográficas