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.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

August 30, 2017
Tweet

Transcript

  1. None
  2. CACHE, além do F5 e CTRL + SHIFT + R

  3. github.com/labcodes twitter.com/labcodes labcodes.com.br

  4. ESTÚDIO DE SOFTWARE DE RECIFE PARA O MUNDO

  5. JARDIM AO AR LIVRE <3

  6. None
  7. github.com/thulioph twitter.com/thulioph_ thulioph.com

  8. +15 PALESTRAS

  9. +5 ESTADOS

  10. None
  11. NÃO SE PREOCUPE COM LINKS, TODOS ESTÃO NOS SLIDES.

  12. TODO O MATERIAL SERÁ DISPONIBILIZADO

  13. TOME NOTA DE ALGUNS TERMOS, PODEM SER ÚTEIS PARA PESQUISAS

    FUTURAS.
  14. COMUNIQUE-SE!

  15. – Apresentador da palestra “Onde o cache pode ser útil?”

  16. UX

  17. UX OFFLINE

  18. UX OFFLINE PERFORMANCE

  19. APPCACHE goo.gl/BJpy2S

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

    (.dale) / App Cache
  21. DEFINIÇÃO Simples arquivo de texto (.txt) ou qualquer outra extensão

    (.dale) O mimetype deve ser text/cache-manifest / App Cache
  22. 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
  23. caniuse.com

  24. MANIFESTO

  25. 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
  26. CACHE MANIFEST CACHE MANIFEST

  27. CACHE MANIFEST CACHE MANIFEST # 16-12-2017:v2

  28. CACHE CACHE: index.html js/main.js css/main.css img/logo.png

  29. NETWORK NETWORK: login.php /myapi http://api.twitter.com

  30. NETWORK NETWORK *

  31. FALLBACK FALLBACK: images/large/ images/offline.png
 *.html /offline.html

  32. CACHE MANIFEST # 16-12-2017:v2 index.html js/main.js css/main.css img/logo.png

  33. MANIFEST <html manifest=“manifest.appcache"> ... </html>

  34. 5MB

  35. MP3 DE FAROESTE CABOCLO ~ 8MB

  36. UMA MÚSICA DE 4MIN NO SPOTIFY ~ 6.5MB

  37. devdocs.io

  38. COMO ATUALIZAR O CACHE?

  39. 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);
  40. COMO ATUALIZAR O CACHE O usuário limpe o armazenamento de

    dados do navegador para o seu site. / Appcache
  41. 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
  42. alistapart.com/article/application-cache-is-a-douchebag

  43. SERVICE WORKER goo.gl/7jzKUn

  44. Página SW Network

  45. caniuse.com

  46. – Algum site que eu não lembro “Service Worker é

    um dos conceitos mais importantes por trás das Progressive Web Apps.”
  47. PUSH NOTIFICATION

  48. None
  49. PUSH NOTIFICATION BACKGROUND SYNC

  50. None
  51. PUSH NOTIFICATION BACKGROUND SYNC OFFLINE EXPERIENCE

  52. None
  53. ESTRATÉGIAS DE CACHEAMENTO goo.gl/1TVRTz

  54. CACHE FIRST

  55. Página SW Cache Network

  56. CACHE FIRST Ideal para assets que nunca mudam. / Pontos

    Positivos
  57. CACHE FIRST Ideal para assets que nunca mudam. Possuem uma

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

    ele não será adicionado automaticamente após a requisição. / Pontos Negativos
  59. github.com/facebookincubator/create-react-app

  60. github.com/facebookincubator/create-react-app

  61. NETWORK FIRST

  62. Página SW Network Cache

  63. NETWORK FIRST A aplicação sempre irá fornecer o conteúdo mais

    atual disponível. / Pontos Positivos
  64. 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
  65. 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
  66. CACHE E NETWORK

  67. Página SW Network Cache

  68. CACHE E NETWORK Apenas troque o conteúdo atual pelo novo.

    / Pontos Positivos
  69. CACHE E NETWORK Não "desapareça" com nada na tela que

    permita que o usuário interaja (botão, imagem, etc) / Pontos Negativos
  70. FALLBACK GENÉRICO

  71. Página SW Cache Network Genérica

  72. FALLBACK GENÉRICO Ideal para imagens de avatar, requisições POST que

    falharam, etc. / Pontos Positivos
  73. FALLBACK GENÉRICO Necessidade de desenvolver uma página genérica para cada

    tipo diferente de "resposta incompleta” / Pontos Negativos
  74. VOCÊ NO CONTROLE!

  75. USUÁRIO NO CONTROLE!

  76. – Um dev bêb@d0 “Cache, Performance e Offline também são

    UX.”
  77. FERRAMENTAS

  78. Chrome Developer Tools -> Application -> Service Worker

  79. Chrome Developer Tools -> Application -> Cache -> Cache Storage

  80. github.com/GoogleChromeLabs/sw-toolbox

  81. github.com/GoogleChromeLabs/sw-precache

  82. github.com/NascHQ/dsw

  83. INTERNET DESCENTRALIZADA?

  84. goo.gl/P7bjvh

  85. OBRIGADO! THULIO PHILIPE @thulioph_ www.labcodes.com.br speakerdeck.com/thulioph/cache