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. CACHE,
    além do F5 e CTRL + SHIFT + R

    View full-size slide

  2. github.com/labcodes
    twitter.com/labcodes
    labcodes.com.br

    View full-size slide

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

    View full-size slide

  4. JARDIM AO AR LIVRE
    <3

    View full-size slide

  5. github.com/thulioph
    twitter.com/thulioph_
    thulioph.com

    View full-size slide

  6. +15 PALESTRAS

    View full-size slide

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

    View full-size slide

  8. TODO O MATERIAL SERÁ
    DISPONIBILIZADO

    View full-size slide

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

    View full-size slide

  10. COMUNIQUE-SE!

    View full-size slide

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

    View full-size slide

  12. UX
    OFFLINE
    PERFORMANCE

    View full-size slide

  13. APPCACHE
    goo.gl/BJpy2S

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. CACHE MANIFEST
    CACHE MANIFEST

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. NETWORK
    NETWORK
    *

    View full-size slide

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

    *.html
    /offline.html

    View full-size slide

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

    View full-size slide

  25. MP3 DE FAROESTE CABOCLO
    ~ 8MB

    View full-size slide

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

    View full-size slide

  27. COMO ATUALIZAR
    O CACHE?

    View full-size slide

  28. 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 full-size slide

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

    View full-size slide

  30. 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 full-size slide

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

    View full-size slide

  32. SERVICE
    WORKER
    goo.gl/7jzKUn

    View full-size slide

  33. Página SW Network

    View full-size slide

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

    View full-size slide

  35. PUSH NOTIFICATION

    View full-size slide

  36. PUSH NOTIFICATION
    BACKGROUND SYNC

    View full-size slide

  37. PUSH NOTIFICATION
    BACKGROUND SYNC
    OFFLINE EXPERIENCE

    View full-size slide

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

    View full-size slide

  39. Página SW Cache Network

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  45. NETWORK FIRST

    View full-size slide

  46. Página SW Network Cache

    View full-size slide

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

    View full-size slide

  48. 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 full-size slide

  49. 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 full-size slide

  50. CACHE E NETWORK

    View full-size slide

  51. Página SW
    Network
    Cache

    View full-size slide

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

    View full-size slide

  53. 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 full-size slide

  54. FALLBACK GENÉRICO

    View full-size slide

  55. Página SW Cache Network Genérica

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. VOCÊ
    NO CONTROLE!

    View full-size slide

  59. USUÁRIO
    NO CONTROLE!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. github.com/GoogleChromeLabs/sw-toolbox

    View full-size slide

  64. github.com/GoogleChromeLabs/sw-precache

    View full-size slide

  65. github.com/NascHQ/dsw

    View full-size slide

  66. INTERNET DESCENTRALIZADA?

    View full-size slide

  67. goo.gl/P7bjvh

    View full-size slide

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

    View full-size slide