PWAs - Progressive Web Apps - DevFest Cerrado

Palestra apresentada durante o DevFest Cerrado, falando sobre Progressive Web Apps (ou PWAs) abordando bastante o funcionamento de Service Workers, do manifest e da CacheAPI.

Transcript

1. Por: Felipe N. Moura @felipenmoura
2. Google Developer Expert Co-Fundador da BrazilJS e da Nasc Cerca de 12 anos de desenvolvimento Web Apaixonado por JS!!
6. Compostas por 3 tecnologias - APIs abertas da Web - Service Workers - Manifest
7. Service Workers a seu serviço
8. Special powers - Gerenciar redirecionamentos @felipenmoura
10. Special powers - Gerenciar redirecionamentos - Interceptar requisições @felipenmoura
11. @felipenmoura
12. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache @felipenmoura
13. @felipenmoura
14. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache - Controle de versão @felipenmoura
16. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle de cache - Controle de versão - Evolução progressiva @felipenmoura
17. PROGRESSIVA
18. How? - Baseado em tecnologias Web - Tecnologias Open source - Assíncrono (promises) - Seguro (https, e no escopo do service worker) @felipenmoura
19. WEB
20. What for? - Suporte em diferentes plataformas @felipenmoura
21. What for? - Suporte em diferentes plataformas - Funciona mesmo offline, ou quando a internet está intermitente @felipenmoura
22. 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
23. 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
24. APP
25. PROGRESSIVE WEB APP
26. Internet No Brasil
28. Internet no Brasil
30. Por: Felipe N. Moura @felipenmoura
35. @felipenmoura
36. Necessidades básicas @felipenmoura
37. Let's CODE!
38. But first… The theory
40. Teoria "A teoria é a diferença entre saber, e SABER" @felipenmoura
41. Teoria "A teoria é a diferença entre saber, e SABER" -- by Felipe N. Moura @felipenmoura
42. 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
43. Lifecycle
44. Service Worker lifecycle
48. Let's CODE!
49. Let's CODE! Now, for real!
50. HTML (index.html) @felipenmoura
51. HTML (index.html) DONE
52. Browser que não suportam Service Worker, nem saberão o que estão perdendo!
53. sw.js @felipenmoura
54. @felipenmoura
55. sw.js @felipenmoura
56. sw.js * Deve retornar um objeto Response para o método respondWith. @felipenmoura
57. Sw.js - Redirecting @felipenmoura
58. Sw.js - redirects (404) @felipenmoura
59. - Redirecionamento via JavaScript - 404 customizado, via JavaScript
60. Cool, or what?!
61. Hora de mergulhar fundo!
62. Cache @felipenmoura
63. Cache @felipenmoura
64. Application Shell @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. Fetch from Cache @felipenmoura
71. Fetch from Cache @felipenmoura
72. IndexedDB
73. 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
74. ImportScripts
75. Importing Scripts @felipenmoura
76. MANIFEST
77. index.html @felipenmoura
78. webapp-manifest.json @felipenmoura
79. @felipenmoura
80. @felipenmoura
81. Web Notification
82. Web Notification @felipenmoura
83. Web Notification @felipenmoura
84. Web Notification
85. Web Notification webapp-manifest.json @felipenmoura
86. Web Notification Index.html (page script) @felipenmoura
87. Web Notification sw.js @felipenmoura
88. Hard times! @felipenmoura
89. Hard times! - Desligue o cache (no console do browser)
90. Hard times! - Desligue o cache (no console do browser) - Limpe os dados do cache
91. Hard times! - Desligue o cache (no console do browser) - Limpe os dados do cache - Visualize todos os Service workers
92. Hard times! - Teste offline
93. Hard times! - Teste offline - Teste em lie-fi
94. Hard times! - Teste offline - Teste em lie-fi - Use o lighthouse
95. TOOLS
97. Outras ferramentas SW-Toolbox
98. Outras ferramentas SW-Precache
99. TKS!
100. Thank you! @felipeNmoura (github || facebook) / felipenmoura felipenmoura.com