Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (14)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Web Offline
Ähnlich wie Web Offline (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (6)
Web Offline
- 1. Web Off-line Desenvolvendo aplicações web com: Application Cache e Storage Guilherme Visi Siquinelli
- 2. Como assim?!
- 4. +
- 6. ===
- 7. Web Off-line
- 8. Pra que !@)#* isso serve?
- 11. Application Cache e Web Storage
- 12. Application Cache Benefícios ● Navegação off-line ● Velocidade ● Redução de carga do servidor
- 13. 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.
- 14. 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>
- 15. 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.
- 16. 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:"
- 17. 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.
- 18. 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.
- 20. 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!
- 23. 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.
- 24. 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
- 25. 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...
- 26. Application Cache onchecking: sempre disparado primeiro, ele verifica seu arquivo manifesto. onnoupdate: é disparado se estivermos usando a versão atualizada da aplicação.
- 27. 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.
- 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: 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.
- 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 ou 0: aplicação não referencia um arquivo manifesto. IDLE ou 1: manifesto verificado, está na cache e atualizado.
- 32. 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.
- 33. 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.
- 34. Application Cache O objeto applicationCache também define 2 métodos, o update() e o swapCache(). … Sim, vamos...
- 35. Tem alguém dormindo aí já?
- 36. 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.
- 37. 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.
- 38. 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.
- 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 API podemos gravar dados estruturados (objetos ou arrays), valores primitivos, valores internos, como datas, expressões regulares e até objetos File.
- 41. 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.
- 42. 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.
- 43. 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.
- 44. Storage
- 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. Obrigado!
- 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.