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
2. Google Developer Expert
3. Google Developer Expert Fundador da BrazilJS e da Nasc
4. Google Developer Expert Fundador da BrazilJS e da Nasc Cerca de 12 anos de desenvolvimento Web
5. Google Developer Expert Fundador da BrazilJS e da Nasc Cerca de 12 anos de desenvolvimento Web Apaixonado por JS!!
6. Service Workers a seu serviço
7. Service workers...Why?! - Controle sobre requisiçõs - Controle sobre cache - Controle sobre redirecionamentos
8. More POWER, babe!!!
9. Special powers - Gerenciar redirecionamentos
11. Special powers - Gerenciar redirecionamentos - Interceptar requisições
13. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache
15. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache - Controle de versão
17. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache - Controle de versão - Evolução progressiva
18. PROGRESSIVA
19. How? - Baseado em tecnologias Web - Tecnologias Open source - Assíncrono (promises) - Seguro (https, e no escopo do service worker)
20. Evolução do próprio Service Worker - Promises - Cache API - Fetch - Web Notifications
21. WEB
22. What for? - Suporte em diferentes plataformas
23. What for? - Suporte em diferentes plataformas - Funciona mesmo offline, ou quando a internet está intermitente
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
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
26. APP
27. PROGRESSIVE WEB APP
28. Internet No Brasil
30. Internet no Brasil
36. Necessidades básicas
37. O celular, é apenas mais uma vítma
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
39. Mas além disto... "Uma PWA é mais do que apenas uma página com boa performance."
40. Mas além disto... "Uma PWA é mais do que apenas uma página com boa performance." -- by Felipe N. Moura
41. Let's CODE!
42. But first… The theory
44. Teoria "A teoria é a diferença entre saber, e SABER"
45. Teoria "A teoria é a diferença entre saber, e SABER" -- by Felipe N. Moura
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
47. Lifecycle
48. Service Worker lifecycle
52. Let's CODE!
53. Let's CODE! Now, for real!
54. HTML (index.html)
55. HTML (index.html) DONE
56. Browser que não suportam Service Worker, nem saberão o que estão perdendo!
57. sw.js
59. sw.js
60. sw.js * Deve retornar um objeto Response para o método respondWith.
61. Sw.js - redirects
62. Sw.js - redirects (404)
63. - Redirecionamento via JavaScript - 404 customizado, via JavaScript
64. Cool, or what?!
65. Hora de mergulhar fundo!
66. Cache
67. Cache
68. Application Shell
69. Fetch from Cache
70. Fetch from Cache
71. Fetch from Cache
72. Fetch from Cache
73. Fetch from Cache
74. Fetch from Cache
75. Fetch from Cache
76. IndexedDB
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
78. ImportScripts
79. Importing Scripts
80. Web Notification
81. Web Notification
82. Web Notification
83. Web Notification
84. Web Notification webapp-manifest.json
85. Web Notification Index.html (page script)
86. Web Notification sw.js
87. MANIFEST
88. index.html
89. webapp-manifest.json
92. Hard times!
93. Hard times! - Desligue o cache (no console do browser)
94. Hard times! - Desligue o cache (no console do browser) - Limpe os dados do cache
95. Hard times! - Desligue o cache (no console do browser) - Limpe os dados do cache - Visualize todos os Service workers
96. Hard times! - Teste offline
97. Hard times! - Teste offline - Teste em lie-fi
98. Hard times! - Teste offline - Teste em lie-fi - Use o lighthouse
99. TOOLS
100. Meet the DSW The Dynamic Service Worker
101. Meet the DSW $ npm install -g dsw
102. DSW - import and call .setup
103. dswfile.json
104. DSW
105. DSW - Not found HTML
106. DSW - not found images
107. DSW - caching images
108. DSW - Redirecting
109. Redirect com variáveis
110. DSW - caching css and js
111. Outras ferramentas SW-Toolbox
112. Outras ferramentas SW-Precache
113. TKS!
114. Thank you! @felipeNmoura (github || facebook) / felipenmoura felipenmoura.com