PWAs - Mais que apps, Progressive Web Apps

Minha palestra em português sobre PWAs (Progressive Web Apps) focada em Service Workers, abordando Cache API, IndexedDB, Web Notifications, entre outras tecnologias.

Transcript

1. Por: Felipe N. Moura
   

   View Slide

2. Google Developer Expert
   

   View Slide

3. Google Developer Expert
   Fundador da
   BrazilJS e da Nasc
   

   View Slide

4. Google Developer Expert
   Fundador da
   BrazilJS e da Nasc
   Cerca de 12 anos de
   desenvolvimento Web
   

   View Slide

5. Google Developer Expert
   Fundador da
   BrazilJS e da Nasc
   Cerca de 12 anos de
   desenvolvimento Web
   Apaixonado por JS!!
   

   View Slide

6. Service Workers
   a seu serviço
   

   View Slide

7. Service workers...Why?!
   - Controle sobre requisiçõs
   - Controle sobre cache
   - Controle sobre redirecionamentos
   

   View Slide

8. More POWER, babe!!!
   

   View Slide

9. Special powers
   - Gerenciar redirecionamentos
   

   View Slide

10. View Slide

11. Special powers
    - Gerenciar redirecionamentos
    - Interceptar requisições
    

    View Slide

12. View Slide

13. Special powers
    - Gerenciar redirecionamentos
    - Interceptar requisições
    - Controle de cache
    

    View Slide

14. View Slide

15. Special powers
    - Gerenciar redirecionamentos
    - Interceptar requisições
    - Controle de cache
    - Controle de versão
    

    View Slide

16. View Slide

17. Special powers
    - Gerenciar redirecionamentos
    - Interceptar requisições
    - Controle de cache
    - Controle de versão
    - Evolução progressiva
    

    View Slide

18. PROGRESSIVA
    

    View Slide

19. How?
    - Baseado em tecnologias Web
    - Tecnologias Open source
    - Assíncrono (promises)
    - Seguro (https, e no escopo do service worker)
    

    View Slide

20. Evolução do próprio Service Worker
    - Promises
    - Cache API
    - Fetch
    - Web Notifications
    

    View Slide

21. WEB
    

    View Slide

22. What for?
    - Suporte em diferentes plataformas
    

    View Slide

23. What for?
    - Suporte em diferentes plataformas
    - Funciona mesmo offline, ou quando a internet está intermitente
    

    View Slide

24. What for?
    - Suporte em diferentes plataformas
    - Funciona mesmo offline, ou quando a internet está intermitente
    - Torna-se "Instalável" no dispositivo do usuário
    

    View Slide

25. What for?
    - Suporte em diferentes plataformas
    - Funciona mesmo offline, ou quando a internet está intermitente
    - Torna-se "Instalável" no dispositivo do usuário
    - Muito mais performático
    

    View Slide

26. APP
    

    View Slide

27. PROGRESSIVE
    WEB
    APP
    

    View Slide

28. Internet
    No
    Brasil
    

    View Slide

29. View Slide

30. Internet no Brasil
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. Necessidades básicas
    

    View Slide

37. O celular, é apenas
    mais uma vítma
    

    View Slide

38. O culpado é o desenvolvedor que...
    - Não minifica scripts e estilos
    - Não otimiza imagens
    - Tem mais banners que conteúdo
    - Tem o DOM bagunçado
    - Páginas não responsivas
    

    View Slide

39. Mas além disto...
    "Uma PWA é mais do que apenas uma página com boa performance."
    

    View Slide

40. Mas além disto...
    "Uma PWA é mais do que apenas uma página com boa performance."
    -- by Felipe N. Moura
    

    View Slide

41. Let's CODE!
    

    View Slide

42. But first…
    The theory
    

    View Slide

43. View Slide

44. Teoria
    "A teoria é a diferença entre saber, e SABER"
    

    View Slide

45. Teoria
    "A teoria é a diferença entre saber, e SABER"
    -- by Felipe N. Moura
    

    View Slide

46. Service workers
    - Rodam em escopo próprio
    - Uma vez registrados, rodam em "background"
    - Exigem HTTPS (ou localhost)
    - Somente podem interceptar requests no próprio escopo
    

    View Slide

47. Lifecycle
    

    View Slide

48. Service Worker lifecycle
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. Let's CODE!
    

    View Slide

53. Let's CODE!
    Now, for real!
    

    View Slide

54. HTML (index.html)
    

    View Slide

55. HTML (index.html)
    DONE
    

    View Slide

56. Browser que não suportam Service Worker,
    nem saberão o que estão perdendo!
    

    View Slide

57. sw.js
    

    View Slide

58. View Slide

59. sw.js
    

    View Slide

60. sw.js
    * Deve retornar um objeto Response para o método respondWith.
    

    View Slide

61. Sw.js - redirects
    

    View Slide

62. Sw.js - redirects (404)
    

    View Slide

63. - Redirecionamento via JavaScript
    - 404 customizado, via JavaScript
    

    View Slide

64. Cool, or what?!
    

    View Slide

65. Hora de
    mergulhar fundo!
    

    View Slide

66. Cache
    

    View Slide

67. Cache
    

    View Slide

68. Application Shell
    

    View Slide

69. Fetch from Cache
    

    View Slide

70. Fetch from Cache
    

    View Slide

71. Fetch from Cache
    

    View Slide

72. Fetch from Cache
    

    View Slide

73. Fetch from Cache
    

    View Slide

74. Fetch from Cache
    

    View Slide

75. Fetch from Cache
    

    View Slide

76. IndexedDB
    

    View Slide

77. SW tem acesso ao IndexedDB
    - Pode ser usado para armazenar o resultado de requisições a JSONs
    - Assíncrono (apesar da sintaxe "feia")
    - Permite filtragem, pesquisa e atualizações
    

    View Slide

78. ImportScripts
    

    View Slide

79. Importing Scripts
    

    View Slide

80. Web
    Notification
    

    View Slide

81. Web Notification
    

    View Slide

82. Web Notification
    

    View Slide

83. Web Notification
    

    View Slide

84. Web Notification
    webapp-manifest.json
    

    View Slide

85. Web Notification
    Index.html (page script)
    

    View Slide

86. Web Notification
    sw.js
    

    View Slide

87. MANIFEST
    

    View Slide

88. index.html
    

    View Slide

89. webapp-manifest.json
    

    View Slide

90. View Slide

91. View Slide

92. Hard times!
    

    View Slide

93. Hard times!
    - Desligue o cache
    (no console do browser)
    

    View Slide

94. Hard times!
    - Desligue o cache
    (no console do browser)
    - Limpe os dados do cache
    

    View Slide

95. Hard times!
    - Desligue o cache
    (no console do browser)
    - Limpe os dados do cache
    - Visualize todos os
    Service workers
    

    View Slide

96. Hard times!
    - Teste offline
    

    View Slide

97. Hard times!
    - Teste offline
    - Teste em lie-fi
    

    View Slide

98. Hard times!
    - Teste offline
    - Teste em lie-fi
    - Use o lighthouse
    

    View Slide

99. TOOLS
    

    View Slide

100. Meet the DSW
     The
     Dynamic
     Service
     Worker
     

     View Slide

101. Meet the DSW
     $ npm install -g dsw
     

     View Slide

102. DSW - import and call .setup
     

     View Slide

103. dswfile.json
     

     View Slide

104. DSW
     

     View Slide

105. DSW - Not found HTML
     

     View Slide

106. DSW - not found images
     

     View Slide

107. DSW - caching images
     

     View Slide

108. DSW - Redirecting
     

     View Slide

109. Redirect com variáveis
     

     View Slide

110. DSW - caching css and js
     

     View Slide

111. Outras ferramentas
     SW-Toolbox
     

     View Slide

112. Outras ferramentas
     SW-Precache
     

     View Slide

113. TKS!
     

     View Slide

114. Thank you!
     @felipeNmoura
     (github || facebook) / felipenmoura
     felipenmoura.com
     

     View Slide