Talk sobre Progressive Web App que eu apresentei no Front in Floripa de 2017.

1. Progressive Web App
Transformando o seu site em um App
@luisfmsouz

2. Combinando o melhor do desenvolvimento
web e o melhor dos aplicativos, para entregar
uma ótima experiência aos clientes da
Magnetis.

3. Luís Felipe Souza
/@luisfmsouz

4. developer at
Estamos Contratando!

5. O que é PWA?

6. "(...) são um conjunto de técnicas para
desenvolver aplicações web, adicionando
progressivamente funcionalidades que
antes só eram possíveis em apps nativos."

7. "(...) são um conjunto de técnicas para
desenvolver aplicações web, adicionando
progressivamente funcionalidades que
antes só eram possíveis em apps nativos."

8. "(...) são um conjunto de técnicas para
desenvolver aplicações web, adicionando
progressivamente funcionalidades que
antes só eram possíveis em apps nativos."

9. "(...) são um conjunto de técnicas para
desenvolver aplicações web, adicionando
progressivamente funcionalidades que
antes só eram possíveis em apps nativos."

10. PROGRESSIVE
10

12. WEB

14. APP

16. PWAs são sites com super
poderes!

17. "Super-poderes"

18. Instalável

19. Instalável

20. Aparência de App
20

21. Aparência

22. Offline

23. Offline

24. Engajável

26. Não é só mobile!

28. Suporte dos
browsers

30. manifest.json
Service Workers
Push Notifications
30

31. manifest.json
Service Workers
Push Notifications

32. manifest.json
Service Workers
Push Notifications

33. Como validar o
PWA?

34. Lighthouse

35. antes

36. PWA na Magnetis

37. Queríamos estar
próximos dos
clientes

38. Melhorar a
experiência
mobile

39. Saber como nossos
clientes usariam o nosso
aplicativo
39

40. Mobile site PWAvs.

41. Consultas a carteira
Magnetis é 42% maior
pelo PWA
PWA

42. Acontecem 44,5%
mais simulações de
investimento pelo PWA
PWA

43. Tempo por sessão é
28% maior pelo mobile
site
Mobile site

44. 4 passos para
transformar nosso
site em PWA

45. 1º Responsive

46. 2º Seguro (HTTPS)

47. 3º manifest.json

49. 49

53. em 5 dias

55. 4º Service Worker e
responder 200 quando
offline

56. Service Worker

57. em 4 dias

59. 9 dias
59

60. depois

61. Ícones
Splash
screen
Instalável Offline
APP

63. Muito
obrigado!
Luís Felipe Souza
twitter.com/luisfmsouz
luisfmsouza@gmail.com

64. twitter.com/@magnetisbkstage
medium.com/magnetis-backstage

65. https://medium.com/magnetis-backstage/transformando-o-site-da-magnetis-em-um-pwa-fc2a18d722e7

66. Links interessantes
● https://medium.com/magnetis-backstage/transformando-o-site-da-
magnetis-em-um-pwa-fc2a18d722e7
● https://tableless.com.br/crie-seu-primeiro-progressive-web-app/
● https://developers.google.com/web/progressive-web-apps/