Transferir como PDF, PPTX
Web Offline
- 1. Web Off-line Desenvolvendo aplicaçõesweb com: Application Cache e Storage Guilherme Visi Siquinelli
- 2.
- 4.
- 6.
- 7.
- 8. Pra que !@)#*isso serve?
- 11. Application Cache eWeb Storage
- 12. Application Cache Benefícios ● Navegaçãooff-line ● Velocidade ● Redução de carga do servidor
- 13. Application Cache Diferente daAPI 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.
- 14. Application Cache Para instalarum 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>
- 15. Application Cache Um aplicativoweb 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.
- 16. Application Cache Manifestos complexos Osarquivos 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:"
- 17. Application Cache NETWORK: Esta seçãoespecifica 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.
- 18. Application Cache FALLBACK: Esse cabeçalhoinclue 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.
- 19.
- 20. Application Cache Atualização dacache 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!
- 21.
- 22.
- 23. Application Cache Eventos Pense emum 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.
- 24. Application Cache Comunicação assíncrona Deforma 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
- 25. Application Cache Com aAPI Application Cache podemos usar 8 eventos disparados assincronamente para monitoramento e tratamento da aplicação. Vamos ver um pouquinho de cada um...
- 26. Application Cache onchecking: sempredisparado primeiro, ele verifica seu arquivo manifesto. onnoupdate: é disparado se estivermos usando a versão atualizada da aplicação.
- 27. Application Cache ondownloading: sea 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.
- 28. 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.
- 29. Application Cache onerror: disparadopara 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.
- 30. 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 ...
- 31. Application Cache UNCACHED ou0: aplicação não referencia um arquivo manifesto. IDLE ou 1: manifesto verificado, está na cache e atualizado.
- 32. Application Cache CHECKING ou2: o navegador está verificando o arquivo de manifesto. DOWNLOADING ou 3: o navegador está baixando os arquivos listados no manifesto.
- 33. Application Cache UPDATEREADY ou4: nova versão baixada e colocada na cache. OBSOLETE ou 5: o manifesto não existe e a cache será excluída.
- 34. Application Cache O objetoapplicationCache também define 2 métodos, o update() e o swapCache(). … Sim, vamos...
- 35. Tem alguém dormindoaí já?
- 36. Application Cache O métodoupdate() 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.
- 37. Application Cache O métodoswapCache() 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.
- 38. Application Cache De formasimples, 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.
- 39. 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.
- 40. Storage Com esta APIpodemos gravar dados estruturados (objetos ou arrays), valores primitivos, valores internos, como datas, expressões regulares e até objetos File.
- 41. Storage Os dados armazenadosem 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.
- 42. Storage Já os dadosarmazenados 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.
- 43. Storage Armazenamento A API dearmazenamento 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.
- 44.
- 45. 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...
- 46.
- 47. 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.