Service Workers a seus serviços

Palestra que apresentei na WebBR, evento da W3C, sobre as tecnologias web open source, Service Workers, Cache Api, Notifications, entre outras.

Transcript

1. Por: Felipe N. Moura @felipenmoura
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!!
7. Service Workers a seu serviço
8. Service workers...Why?! - Controle sobre requisições - Controle sobre cache - Controle sobre redirecionamentos - Controle sobre páginas inexistentes
9. More POWER, babe!!!
10. Special powers - Gerenciar redirecionamentos
12. Special powers - Gerenciar redirecionamentos - Interceptar requisições
14. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache
16. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache - Controle de versão
18. EVOLUÇÃO 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. What for? - Suporte em diferentes plataformas
22. What for? - Suporte em diferentes plataformas - Funciona mesmo offline, ou quando a internet está intermitente
23. What for? - Suporte em diferentes plataformas - Funciona mesmo offline, ou quando a internet está intermitente - Pode tornar-se "Instalável" no dispositivo do usuário
24. What for? - Suporte em diferentes plataformas - Funciona mesmo offline, ou quando a internet está intermitente - Pode tornar-se "Instalável" no dispositivo do usuário - Muito mais performático
25. INTERNET NO BRASIL
27. Internet no Brasil
35. Necessidades básicas
36. _Oi...qual a senha da wifi?
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. Let's CODE!
40. But first… The theory
42. Teoria "A teoria é a diferença entre saber, e SABER"
43. Teoria "A teoria é a diferença entre saber, e SABER" -- by Felipe N. Moura
44. 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
45. Lifecycle
46. Service Worker lifecycle
50. Let's CODE!
51. Let's CODE! For real, this time!
52. HTML (index.html)
53. HTML (index.html) DONE
54. Browsers que não suportam Service Worker, nem saberão o que estão perdendo!
55. sw.js
57. sw.js
58. sw.js * Deve retornar um objeto Response para o método respondWith.
59. sw.js - redirects
60. sw.js - redirects (404)
61. - Redirecionamento via JavaScript - 404 customizado, via JavaScript
62. Cool, or what?!
63. Hora de mergulhar fundo!
64. Cache
65. Cache
66. Application Shell
67. Fetch from Cache
68. Fetch from Cache
69. Fetch from Cache
70. Fetch from Cache
71. Fetch from Cache
72. Fetch from Cache
73. Fetch from Cache
74. IndexedDB
75. 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
76. ImportScripts
77. Importing Scripts
78. Web Notification
79. Web Notification
80. Web Notification
81. Web Notification
82. Web Notification (webapp-manifest.json)
83. Web Notification (Index.html)
84. Web Notification (sw.js)
85. Hard times!
86. Hard times! - Desligue o cache (no console do browser quando o console está aberto)
87. Hard times! - Desligue o cache (no console do browser) - Limpe os dados do cache
88. Hard times! - Desligue o cache (no console do browser) - Limpe os dados do cache - Visualize todos os Service workers
89. Hard times! - Teste offline
90. Hard times! - Teste offline - Teste em lie-fi
91. Hard times! - Teste offline - Teste em lie-fi - Use o lighthouse
93. Meet DSW The Dynamic Service Worker
94. Meet DSW $ npm install -g dsw
95. DSW - import and .setup
96. dswfile.json
97. DSW
98. DSW - Not found HTML
99. DSW - not found images
100. DSW - caching images
101. DSW - Redirecting
102. DSW - Redirect com variáveis
103. DSW - caching css and js
104. DSW - Output String
105. DSW - IndexedDB
106. DSW - Push Notifications
107. DSW - API
108. DSW - Init
109. DSW - Debug
110. DSW - Debug
111. Outras ferramentas SW-Toolbox
112. Outras ferramentas SW-Precache
113. Faça seu usuário pensar:
114. Que tipo de magia é esta?!
115. TKS!
117. Thank you! @felipeNmoura (github || facebook) / felipenmoura felipenmoura.com