Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cache

 Cache

Evento: Meetup FrontJS e JSDay Recife

Apresentação sobre cache, onde é abordado conceitos como AppCache e Service Workers, junto com algumas estratégias de armazenamento em cache e ferramentas que podem ajudar no desenvolvimento offline.

Thulio Philipe

August 30, 2017
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

  1. UX

  2. DEFINIÇÃO Simples arquivo de texto (.txt) ou qualquer outra extensão

    (.dale) O mimetype deve ser text/cache-manifest / App Cache
  3. DEFINIÇÃO Simples arquivo de texto (.txt) ou qualquer outra extensão

    (.dale) O mimetype deve ser text/cache-manifest. Normalmente utiliza-se a extensão .appcache / App Cache
  4. CACHE MANIFEST # 16-12-2017:v2 CACHE: index.html js/main.js css/main.css img/logo.png NETWORK:

    login.php /myapi http://api.twitter.com FALLBACK: images/large/ images/offline.png *.html /offline.html
  5. 5MB

  6. EVENTOS não os do facebook appCache.addEventListener('cached', handleCacheEvent); appCache.addEventListener('checking', handleCacheEvent); appCache.addEventListener('downloading',

    handleCacheEvent); appCache.addEventListener('error', handleCacheError); appCache.addEventListener('noupdate', handleCacheEvent); appCache.addEventListener('obsolete', handleCacheEvent); appCache.addEventListener('progress', handleCacheEvent); appCache.addEventListener('updateready', handleCacheEvent);
  7. COMO ATUALIZAR O CACHE O usuário limpe o armazenamento de

    dados do navegador para o seu site. / Appcache
  8. COMO ATUALIZAR O CACHE O usuário limpe o armazenamento de

    dados do navegador para o seu site. O arquivo de manifesto seja modificado. / Appcache
  9. – Algum site que eu não lembro “Service Worker é

    um dos conceitos mais importantes por trás das Progressive Web Apps.”
  10. CACHE FIRST Ideal para assets que nunca mudam. Possuem uma

    resposta muito mais rápida. / Pontos Positivos
  11. CACHE FIRST Caso um asset não esteja descrito no cache,

    ele não será adicionado automaticamente após a requisição. / Pontos Negativos
  12. NETWORK FIRST A aplicação sempre irá fornecer o conteúdo mais

    atual disponível. O usuário offline tem acesso, através de uma versão do cache. / Pontos Positivos
  13. NETWORK FIRST Se o usuário não tiver uma boa conexão,

    pode ser prejudicado e comprometer a experiência do uso. / Pontos Negativos
  14. CACHE E NETWORK Não "desapareça" com nada na tela que

    permita que o usuário interaja (botão, imagem, etc) / Pontos Negativos
  15. FALLBACK GENÉRICO Necessidade de desenvolver uma página genérica para cada

    tipo diferente de "resposta incompleta” / Pontos Negativos