Web Offline

47
Web Off-line Desenvolvendo aplicações web com: Application Cache e Storage Guilherme Visi Siquinelli

description

Princípios do desenvolvimento Web Offline com Application Cache e Web Storage

Transcript of Web Offline

Page 1: Web Offline

Web Off-lineDesenvolvendo aplicações web com:Application Cache e Storage

Guilherme Visi Siquinelli

Page 2: Web Offline

Como assim?!

Page 3: Web Offline
Page 4: Web Offline

+

Page 5: Web Offline
Page 6: Web Offline

===

Page 7: Web Offline

Web Off-line

Page 8: Web Offline

Pra que !@)#* isso serve?

Page 9: Web Offline
Page 10: Web Offline
Page 11: Web Offline

Application Cache e Web Storage

Page 12: Web Offline

Application Cache

Benefícios

● Navegação off-line● Velocidade● Redução de carga do servidor

Page 13: Web Offline

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.

Page 14: Web Offline

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>

Page 15: Web Offline

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.

Page 16: Web Offline

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

Page 17: Web Offline

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:

Page 18: Web Offline

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:

Page 19: Web Offline

Application Cache

Page 20: Web Offline

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!

Page 21: Web Offline

Application Cache

Eventos

Page 22: Web Offline

Application Cache

Page 23: Web Offline

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

Page 24: Web Offline

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

Page 25: Web Offline

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...

Page 26: Web Offline

Application Cache

onchecking: sempre disparado primeiro, ele verifica seu arquivo manifesto.

onnoupdate: é disparado se estivermos usando a versão atualizada da aplicação.

Page 27: Web Offline

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.

Page 28: Web Offline

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.

Page 29: Web Offline

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.

Page 30: Web Offline

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 ...

Page 31: Web Offline

Application Cache

UNCACHED ou 0: aplicação não referencia um arquivo manifesto.

IDLE ou 1: manifesto verificado, está na cache e atualizado.

Page 32: Web Offline

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.

Page 33: Web Offline

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.

Page 34: Web Offline

Application Cache

O objeto applicationCache também define 2 métodos, o update() e o swapCache().

… Sim, vamos...

Page 35: Web Offline

Tem alguém dormindo aí já?

Page 36: Web Offline

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.

Page 37: Web Offline

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.

Page 38: Web Offline

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.

Page 39: Web Offline

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.

Page 40: Web Offline

Storage

Com esta API podemos gravar dados estruturados (objetos ou arrays), valores primitivos, valores internos, como datas, expressões regulares e até objetos File.

Page 41: Web Offline

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.

Page 42: Web Offline

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.

Page 43: Web Offline

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

Page 44: Web Offline

Storage

Page 45: Web Offline

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

Page 46: Web Offline

Obrigado!

Page 47: Web Offline

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