Palestra apresentada no QCon São Paulo 2018 - Um dos grandes desafios na relação entre a oferta de um produto online e o cliente em potencial é garantir uma experiência imersiva que resulte em um engajamento que o induza a escolher seu produto ao invés da concorrência e consequentemente aumente a taxa de conversão online. Nesta palestra, será apresentada a abordagem técnica que transformou um produto mínimo viável que tinha por objetivo experimentar uma alternativa de busca de pacotes turísticos por mapa em um aplicativo web progressivo que permitiu o vislumbre de grande potencial para o aumento das conversões online, bem como a aceitação e o investimento dos stakeholders. Serão apresentadas abordagens para o service worker e manifesto de aplicativos web que permitem uma experiência imersiva na tela inicial do usuário como um aplicativo nativo, fornecendo a gestão de cache com indexedDB API, notificações Push e interações ágeis. Além disto, serão discutidos os desafios encontrados durante a implementação, bem como os ajustes arquiteturais necessários para a evolução e garantia no processo de maturidade do projeto.

1. Melhorando o engajamento com cliente na CVC
Do MVP ao PWA

2. Quem somos?
Sou Fabricio Lopes, Software Development
Manager na CVC Corp.
/in/fabricio-lopes-vital

3. Quem somos?
Sou Janderson Silva, Software Architect na
Rivendel.
/in/janderson-silva

4. Em 2016 iniciou-se um projeto de um site responsivo e
performático para alavancar as vendas, mas no
modelo de gestão e processos de sempre.

5. Corrida para entregar o “projeto” o mais rápido possível e no prazo acordado.

6. Em 2017, acontece nossa entrega

7. Queda na conversão e no engajamento nos produtos

9. E agora? Como fazer melhor e diferente?

10. Pesquisas com os usuários

11. Gravação do comportamento do usuário

12. Fizemos muitos testes AB

13. “Experiência de usuário abrange todos os aspectos da
interação entre o usuário final e a empresa, seus
serviços e seus produtos.”
Nielsen Norman Group

14. Nossa melhor hipótese para o MVP foi buscar Pacotes
CVC numa abordagem por mapa.

15. Nossa primeira versão

16. Nossa décima versão, versão atualNossa décima versão

17. Por que adotamos a abordagem PWA em nosso MVP?
Baseado em 3 princípios:
● Confiabilidade
● Rapidez
● Engajamento do usuário

18. O que esses princípios podem proporcionar?
Carregar as páginas mais rapidamente

19. O que esses princípios podem proporcionar?
Visualização em tela cheia sem a barra de endereços

20. O que esses princípios podem proporcionar?
Engajamento com os usuários com Push Notifications

21. O que esses princípios podem proporcionar?
Permitir animações e navegações suaves

22. Permitir ícone na tela inicial no dispositivo

23. Permitir o uso do app mesmo em conexões lentas ou inexistentes

24. O que esses princípios podem proporcionar?
Aumento da taxa de conversão

25. Vantagens
● Nenhuma instalação física do aplicativo é necessária.
● Não há necessidade de visitar a loja de aplicativos.
● Pode ser atualizado automaticamente.
● É adequado para o sites de comércio eletrônico.

26. https://whatwebcando.today

27. Desvantagens
● Embora possua muitos recursos, ainda não há suporte a todos
os recursos, como um app nativo
● Em casos que requerem mais complexidade, como jogos, o
PWA não substitui totalmente um app nativo.

29. Como construir um Progressive Web App
● Mobile First
○ Leveza e rapidez
○ Layout responsivo
○ Experiência de app nativo

30. Progressivo
● Funcionar em qualquer navegador
● Em qualquer sistema operacional
● Para qualquer nível de usuário

31. Progressive Web App Checklist
https://developers.google.com/web/progressive-web-apps/checklist
Básico ou completo conforme as necessidades de negócio

32. Site servido com HTTPS
Quanto custa? Nada, é gratis: https://letsencrypt.org/

33. Páginas responsivas
Não basta apenas ajustar o conteúdo na tela do dispositivo!
App-like: O usuário deve se sentir em um app nativo
Como saber? https://search.google.com/test/mobile-friendly

36. Experiência de navegação Offline
Service Worker

37. Service Worker

38. Service Worker
Escrever na mão ou gerar automaticamente?
● Workbox: https://developers.google.com/web/tools/workbox/
● Plugins para frameworks
○ React: https://www.reactpwa.com
○ Vue: https://github.com/vuejs-templates/pwa
○ Ember: http://ember-service-worker.com

39. Service Worker
● Registro

40. Service Worker
● Precache
● Cache first
● Update cache

41. App Shell
● HTML, CSS,
JavaScript e
imagens
mínimos para
desenhar a tela

43. Possibilidade de adicionar atalho na Home Screen
Manifesto

44. Possibilidade de adicionar atalho na Home Screen

46. Funcionamento nos principais navegadores

47. Carregamento rápido em conexão 3G
● PageSpeed:
https://developers.google.com/speed/pagespeed/insights/
● Otimização de imagens
○ Kraken: https://kraken.io/
○ Imaginary: https://github.com/h2non/imaginary
○ Thumbor: https://github.com/thumbor/thumbor
● Políticas de cache
● Tratando os scripts que bloqueiam a renderização
● Reduzindo o tempo de resposta do servidor

48. Transição entre páginas não deve demonstrar bloqueio de rede
● Efeitos de transição são facilmente implementáveis apenas
com CSS
● Tela de esqueleto: http://hannahatkin.com/skeleton-screens/

49. As páginas devem ter URLs exclusivas e amigáveis
● Permite melhorar a indexação
● Permite o compartilhamento amigável das páginas

50. Experiência imersiva e engajamento do usuário
● Parece um app nativo
● Se comporta como app nativo
● Tem recursos de app nativo
● Mas não é um app nativo!

52. Experiência imersiva e engajamento do usuário
Parece um app nativo, se comporta como app nativo, tem recursos
de app nativo, mas não é um app nativo!
● Layout de app
● Push Notifications

53. Experiência imersiva e engajamento do usuário

54. Experiência imersiva e engajamento do usuário

55. Experiência imersiva e engajamento do usuário

56. Experiência imersiva e engajamento do usuário

57. Desafios de implementação e arquiteturais na CVC
● Feature nova, tecnologias e arquitetura diferentes do legado
○ React + Redux
○ Apollo
○ Saga
○ GraphQL
○ NodeJS

58. Desafios de implementação e arquiteturais na CVC
E agora? O que fazer com o site/e-commerce legado?
● Dividir para conquistar
● Problemas com Service Worker e Service Worker Precache
● Limitações por regras de negócio
○ Partes do e-commerce não podem ser offline
● Mudança na arquitetura do software
● Melhorias na infraestrutura
● Implementação de processador de imagens para melhorar web
performance

59. Obrigado!
Perguntas?
+
linkedin.com/in/janderson-silva linkedin.com/in/fabricio-lopes-vital
@ciobrifa
www.cvc.com.br/searchmap