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. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. JARDIM AO AR LIVRE
    <3

    View Slide

  6. View Slide

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

    View Slide

  8. +15 PALESTRAS

    View Slide

  9. +5 ESTADOS

    View Slide

  10. View Slide

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

    View Slide

  12. TODO O MATERIAL SERÁ
    DISPONIBILIZADO

    View Slide

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

    View Slide

  14. COMUNIQUE-SE!

    View Slide

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

    View Slide

  16. UX

    View Slide

  17. UX
    OFFLINE

    View Slide

  18. UX
    OFFLINE
    PERFORMANCE

    View Slide

  19. APPCACHE
    goo.gl/BJpy2S

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  23. caniuse.com

    View Slide

  24. MANIFESTO

    View Slide

  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

    View Slide

  26. CACHE MANIFEST
    CACHE MANIFEST

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. NETWORK
    NETWORK
    *

    View Slide

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

    *.html
    /offline.html

    View Slide

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

    View Slide

  33. MANIFEST

    ...

    View Slide

  34. 5MB

    View Slide

  35. MP3 DE FAROESTE CABOCLO
    ~ 8MB

    View Slide

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

    View Slide

  37. devdocs.io

    View Slide

  38. COMO ATUALIZAR
    O CACHE?

    View Slide

  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);

    View Slide

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

    View Slide

  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

    View Slide

  42. alistapart.com/article/application-cache-is-a-douchebag

    View Slide

  43. SERVICE
    WORKER
    goo.gl/7jzKUn

    View Slide

  44. Página SW Network

    View Slide

  45. caniuse.com

    View Slide

  46. – Algum site que eu não lembro
    “Service Worker é um dos conceitos
    mais importantes por trás das
    Progressive Web Apps.”

    View Slide

  47. PUSH NOTIFICATION

    View Slide

  48. View Slide

  49. PUSH NOTIFICATION
    BACKGROUND SYNC

    View Slide

  50. View Slide

  51. PUSH NOTIFICATION
    BACKGROUND SYNC
    OFFLINE EXPERIENCE

    View Slide

  52. View Slide

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

    View Slide

  54. CACHE FIRST

    View Slide

  55. Página SW Cache Network

    View Slide

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

    View Slide

  57. CACHE FIRST
    Ideal para assets que nunca mudam.
    Possuem uma resposta muito mais rápida.
    / Pontos Positivos

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  61. NETWORK FIRST

    View Slide

  62. Página SW Network Cache

    View Slide

  63. NETWORK FIRST
    A aplicação sempre irá fornecer o conteúdo
    mais atual disponível.
    / Pontos Positivos

    View Slide

  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

    View Slide

  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

    View Slide

  66. CACHE E NETWORK

    View Slide

  67. Página SW
    Network
    Cache

    View Slide

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

    View Slide

  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

    View Slide

  70. FALLBACK GENÉRICO

    View Slide

  71. Página SW Cache Network Genérica

    View Slide

  72. FALLBACK GENÉRICO
    Ideal para imagens de avatar, requisições
    POST que falharam, etc.
    / Pontos Positivos

    View Slide

  73. FALLBACK GENÉRICO
    Necessidade de desenvolver uma página
    genérica para cada tipo diferente de "resposta
    incompleta”
    / Pontos Negativos

    View Slide

  74. VOCÊ
    NO CONTROLE!

    View Slide

  75. USUÁRIO
    NO CONTROLE!

    View Slide

  76. – Um dev bê[email protected]
    “Cache, Performance e Offline
    também são UX.”

    View Slide

  77. FERRAMENTAS

    View Slide

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

    View Slide

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

    View Slide

  80. github.com/GoogleChromeLabs/sw-toolbox

    View Slide

  81. github.com/GoogleChromeLabs/sw-precache

    View Slide

  82. github.com/NascHQ/dsw

    View Slide

  83. INTERNET DESCENTRALIZADA?

    View Slide

  84. goo.gl/P7bjvh

    View Slide

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

    View Slide