Implementando PWA em qualquer projeto

ou: removendo a mágica de progressive web apps

Transcript

1. IMPLEMENTANDO PWA EM QUALQUER PROJETO ou: removendo a mágica de progressive web apps
2. O QUE SÃO PROGRESSIVE WEB APPS? 2
3. EM RESUMO •Habilidade de instalar como um app nativo no android e chrome desktop •Splash screen, ícones, etc •Server-Side Rendering •Funciona Offline •HTML e CSS carregam mesmo se o javascript estiver quebrado •Foco em acessibilidade •É performático •Usa HTTPs 3
4. 4 Como saber se estou no caminho correto? Lighthouse
5. LIGHTHOUSE 5
6. BREAKING NEWS! AGORA INTEGRADO COM CHROME! 6
7. PWA CHECKLIST 7
8. INSTALAÇÃO NATIVA 8
9. ICONS & MANIFEST 9 realfavicongenerator.net Faz tudo pra você!
10. MANIFEST.JSON 10
11. ÍCONES 11
12. SPLASH SCREEN 12
13. FERRAMENTAS DO CHROME 13
14. APP INSTALADO 14
15. SERVER-SIDE RENDERING 15
16. O QUE É SERVER SIDE RENDERING 16 Basicamente diminuir o tempo em tela branca
17. CLIENT SIDE RENDERING VS SERVER SIDE RENDERING 17 Carregando HTML Carregando JS Render + Interativo Carregando HTML Interativo Render + Carregando JS
18. UNCANNY VALLEY 18
19. UNCANNY VALLEY 19
20. COMO IMPLEMENTAR 20 elm-static-html react prerender.io
21. PRERENDER.IO 21 •Solução fácil e genérica
22. MODO OFFLINE 22
23. SW-PRECACHE 23
24. SERVICE WORKERS 24
25. GUARDAR DADOS OFFLINE 25
26. HTTPS 26
27. HTTPS FÁCIL 27
28. HTTP É PASSADO 28
29. ACCESSIBILITY 29
30. CÓDIGO - LIGHTHOUSE 30
31. CORES - MATERIAL COLOR TOOL 31 https://material.io/color/
32. AWESOME ACCESSIBILITY https://github.com/brunopulis/awesome-a11y 32
33. 33 DEMO https://github.com/rogeriochaves/elm-todomvc-pwa
34. OBRIGADO! twitter.com/_rchaves_