Progressive Web Apps - Service workers e o DSW

Palestra apresentada no DevFestBH em 2016.
Nesta palestra, aprofundei bastante no uso dos Service Workers e na criação de Progressive Web Apps.
Apresentei também, as vantagens de usar o DSW, projeto open source no npm desenvolvido por brasileiros para facilitar o uso de Service Workers.

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. Special powers - Gerenciar redirecionamentos @felipenmoura
9. Special powers - Gerenciar redirecionamentos - Interceptar requisições @felipenmoura
10. @felipenmoura
11. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache @felipenmoura
12. @felipenmoura
13. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache - Controle de versão @felipenmoura
14. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache - Controle de versão - Evolução progressiva @felipenmoura
15. PROGRESSIVA
16. How? - Baseado em tecnologias Web - Tecnologias Open source - Assíncrono (promises) - Seguro (https, e no escopo do service worker) @felipenmoura
17. WEB
18. What for? - Suporte em diferentes plataformas @felipenmoura
19. What for? - Suporte em diferentes plataformas - Funciona mesmo offline, ou quando a internet está intermitente @felipenmoura
20. What for? - Suporte em diferentes plataformas - Funciona mesmo offline, ou quando a internet está intermitente - Torna-se "Instalável" no dispositivo do usuário @felipenmoura
21. 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 @felipenmoura
22. APP
23. PROGRESSIVE WEB APP
24. Internet No Brasil
26. Internet no Brasil
33. @felipenmoura
34. Necessidades básicas @felipenmoura
35. Let's CODE!
36. But first… The theory
38. Teoria "A teoria é a diferença entre saber, e SABER" @felipenmoura
39. Teoria "A teoria é a diferença entre saber, e SABER" -- by Felipe N. Moura @felipenmoura
40. 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 @felipenmoura
41. Lifecycle
42. Service Worker lifecycle
46. Let's CODE!
47. Let's CODE! Now, for real!
48. HTML (index.html) @felipenmoura
49. HTML (index.html) DONE
50. Browser que não suportam Service Worker, nem saberão o que estão perdendo!
51. sw.js @felipenmoura
52. @felipenmoura
53. sw.js @felipenmoura
54. sw.js * Deve retornar um objeto Response para o método respondWith. @felipenmoura
55. Sw.js - Redirecting @felipenmoura
56. Sw.js - redirects (404) @felipenmoura
57. - Redirecionamento via JavaScript - 404 customizado, via JavaScript
58. Cool, or what?!
59. Hora de mergulhar fundo!
60. Cache @felipenmoura
61. Cache @felipenmoura
62. Application Shell @felipenmoura
63. Fetch from Cache @felipenmoura
64. Fetch from Cache @felipenmoura
65. Fetch from Cache @felipenmoura
66. Fetch from Cache @felipenmoura
67. Fetch from Cache @felipenmoura
68. Fetch from Cache @felipenmoura
69. Fetch from Cache @felipenmoura
70. IndexedDB
71. 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 @felipenmoura
72. ImportScripts
73. Importing Scripts @felipenmoura
74. MANIFEST
75. index.html @felipenmoura
76. webapp-manifest.json @felipenmoura
77. @felipenmoura
78. @felipenmoura
79. Web Notification
80. Web Notification @felipenmoura
81. Web Notification @felipenmoura
82. Web Notification
83. Web Notification webapp-manifest.json @felipenmoura
84. Web Notification Index.html (page script) @felipenmoura
85. Web Notification sw.js @felipenmoura
86. Hard times! @felipenmoura
87. Hard times! - Desligue o cache (no console do browser)
88. Hard times! - Desligue o cache (no console do browser) - Limpe os dados do cache
89. Hard times! - Desligue o cache (no console do browser) - Limpe os dados do cache - Visualize todos os Service workers
90. Hard times! - Teste offline
91. Hard times! - Teste offline - Teste em lie-fi
92. Hard times! - Teste offline - Teste em lie-fi - Use o lighthouse
93. TOOLS
95. Meet DSW $ npm install -g dsw
96. DSW - import and .setup
97. dswfile.json
98. DSW
99. DSW - Not found HTML
100. DSW - not found images
101. DSW - caching images
102. DSW - Redirecting
103. DSW - Redirect com variáveis
104. DSW - caching css and js
105. DSW - Output String
106. DSW - IndexedDB
107. DSW - Push Notifications
108. DSW - API
109. DSW - Init
110. DSW - Debug
111. DSW - Debug
112. Outras ferramentas SW-Toolbox
113. Outras ferramentas SW-Precache
114. Faça seu usuário pensar:
115. Que tipo de magia é esta?!
116. TKS!
118. Thank you! @felipeNmoura (github || facebook) / felipenmoura felipenmoura.com