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.

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êb@d0
    “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