Web Off-line
Desenvolvendo 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 ...
Application Cache
Para instalar um aplicativo na cache, precisamos criar um
arquivo manifesto listando os URLs exigidos, e...
Application Cache
Um aplicativo web baixado pela primeira vez e
colocado na cache, qualquer carregamento
subsequente será ...
Application Cache
Manifestos complexos
Os arquivos manifesto tem uma sintaxe um pouco
mais complicada do que esse exemplo ...
Application Cache
NETWORK:
Esta seção especifica URLs que nunca devem ser
colocados na cache e sempre devem ser recuperado...
Application Cache
FALLBACK:
Esse cabeçalho inclue dois URLs em cada linha, o
segundo URL é carregado e armazenado na cache...
Application Cache
Application Cache
Atualização da cache
Quando um aplicativo é carregado na cache, toda
requisição busca diretamente da cac...
Application Cache

Eventos
Application Cache
Application Cache
Eventos
Pense em um laço de repetição de eventos, que recebem
repetidamente informações para processar e...
Application Cache
Comunicação assíncrona
De forma simples, podemos dizer que uma comunicação é
assíncrona quando há mais d...
Application Cache
Com a API Application Cache podemos usar 8
eventos disparados assincronamente para
monitoramento e trata...
Application Cache
onchecking: sempre disparado primeiro, ele
verifica seu arquivo manifesto.
onnoupdate: é disparado se es...
Application Cache
ondownloading: se a aplicação ainda não
estiver na cache ou o manifesto for atualizado,
ele sinaliza o i...
Application Cache
oncached: é disparado na primeira vez que
uma aplicação é colocada na cache.
onupdateready: após detecçã...
Application Cache
onerror: disparado para erros no carregamento
do manifesto ou da aplicação em cache.
onobsolete: se o ar...
Application Cache
Outra alternativa é usar a propriedade status
do objeto applicationCache, ela retorna 6
valores possívei...
Application Cache
UNCACHED ou 0: aplicação não referencia um
arquivo manifesto.
IDLE ou 1: manifesto verificado, está na c...
Application Cache
CHECKING ou 2: o navegador está verificando
o arquivo de manifesto.
DOWNLOADING ou 3: o navegador está
b...
Application Cache
UPDATEREADY ou 4: nova versão baixada e
colocada na cache.
OBSOLETE ou 5: o manifesto não existe e a
cac...
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 passa...
Application Cache
O método swapCache() diz ao navegador que
pode descartar a cache antiga e atender a
qualquer pedido futu...
Application Cache
De forma simples, só faz sentido chamar o
método swapCache() quando a propriedade
status do objeto appli...
Storage
LocalStorage e SessionStorage, ambos
propriedades do objeto Window que fazem
referência a um objeto Storage, um ar...
Storage
Com esta API podemos gravar dados
estruturados (objetos ou arrays), valores
primitivos, valores internos, como dat...
Storage
Os dados armazenados em localStorage são
permanentes, não expiram e continuam lá até
que um aplicativo web ou o na...
Storage
Já os dados armazenados em sessionStorage
são perdidos quando a janela ou guia é
fechada permanentemente. O escopo...
Storage
Armazenamento
A API de armazenamento possui métodos para
manipulação dos dados, inclusive "get and set" para
atrib...
Storage
Aplication Cache & Storage
Conclusão
Com estas APIs podemos desenvolver aplicações web
simples e complexas que funcionam o...
Obrigado!
Aplication Cache & Storage
Referências bibliográficas
David Flanagan, JavaScript O guia definitivo, 6ª edição, Bookman 201...
Web Offline
Web Offline
Web Offline
Web Offline
Upcoming SlideShare
Loading in …5
×

Web Offline

235
-1

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
235
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Offline

  1. 1. Web Off-line Desenvolvendo aplicações web com: Application Cache e Storage Guilherme Visi Siquinelli
  2. 2. Como assim?!
  3. 3. +
  4. 4. ===
  5. 5. Web Off-line
  6. 6. Pra que !@)#* isso serve?
  7. 7. Application Cache e Web Storage
  8. 8. Application Cache Benefícios ● Navegação off-line ● Velocidade ● Redução de carga do servidor
  9. 9. 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.
  10. 10. 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>
  11. 11. 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.
  12. 12. Application Cache Manifestos complexos 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:"
  13. 13. Application Cache NETWORK: 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.
  14. 14. Application Cache FALLBACK: 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.
  15. 15. Application Cache
  16. 16. Application Cache Atualização da 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. Importante! Note que o navegador não verifica se algum dos arquivos da cache mudou, somente o manifesto!
  17. 17. Application Cache Eventos
  18. 18. Application Cache
  19. 19. Application Cache Eventos 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.
  20. 20. Application Cache Comunicação assíncrona De 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
  21. 21. 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...
  22. 22. Application Cache onchecking: sempre disparado primeiro, ele verifica seu arquivo manifesto. onnoupdate: é disparado se estivermos usando a versão atualizada da aplicação.
  23. 23. 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.
  24. 24. 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.
  25. 25. 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.
  26. 26. 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 ...
  27. 27. Application Cache UNCACHED ou 0: aplicação não referencia um arquivo manifesto. IDLE ou 1: manifesto verificado, está na cache e atualizado.
  28. 28. 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.
  29. 29. 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.
  30. 30. Application Cache O objeto applicationCache também define 2 métodos, o update() e o swapCache(). … Sim, vamos...
  31. 31. Tem alguém dormindo aí já?
  32. 32. 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.
  33. 33. 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.
  34. 34. 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.
  35. 35. 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.
  36. 36. Storage Com esta API podemos gravar dados estruturados (objetos ou arrays), valores primitivos, valores internos, como datas, expressões regulares e até objetos File.
  37. 37. 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.
  38. 38. 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.
  39. 39. Storage Armazenamento 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.
  40. 40. Storage
  41. 41. Aplication Cache & Storage Conclusão 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...
  42. 42. Obrigado!
  43. 43. Aplication Cache & Storage Referências bibliográficas 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×