O documento discute como as Progressive Web Apps (PWAs) podem ajudar a melhorar a experiência do usuário e transformar o e-commerce. PWAs oferecem uma experiência semelhante à de aplicativos nativos em navegadores da web, melhorando o desempenho, a instalabilidade e a confiabilidade. Exemplos de empresas como Starbucks, AliExpress e Trivago mostram como PWAs aumentaram o engajamento e as conversões.

1. COMO O
PODE AJUDAR NA EXPERIÊNCIA
DO USUÁRIO E TRANSFORMAR
SEU E-COMMERCE?

2. Erick Melo
Cofundador/CCO

3. Clientes atendidos

4. A necessidade das empresas
de conectar com seus clientes
via aplicações móveis está mais
do que consolidada.
realidade
A pergunta não é mais SE e sim
COMO fazer isso.

5. O acesso à páginas Web é
2x maiordo que em aplicativos.
15x mais
Os usuários gastam
mais tempo dentro de
aplicativos do que na Web.

6. dos usuários abandonam sites
que demoram mais de 3
segundos para carregar
53%
Source: DoubleClick - The need for mobile speed. September,2016.

7. por tipo de dispositivo
Distribuição do uso

8. um app nativo?
Por que não fazer
80%do tempo
são gastos nos
3 principais apps
0média de apps instalados
instalados por mês
Fonte:
techcrunch
https://techcrunch.com/2017/08/25/majority-of-u-s-consumers-still-
download-zero-apps-per-month-says-comscore/

9. Fonte:
techcrunch
https://techcrunch.com/2020/10/08/consumers-spent-record-28-
billion-in-apps-in-q3-aided-by-pandemic/
Principais app em todo mundodurante a pandemia

10. PWA

11. ConversãoEngajamentoExperiência
ajudar o seu e-commerce?
Onde o PWA pode

12. Website responsivo APP

13. Engajamento
Alcance
APP
Website
Responsivo

14. é uma técnica (conceito)
PWA não é uma linguagem

15. Carrega dados de forma dinâmica
e incremental.
"É uma aplicação escrita em linguagem
Web que se comporta como um
aplicativo nativo no celular
e no computador"
Progressivo
É escrito em linguagem Web,
diferentemente dos Apps nativos.
Web
Pode ser instalado no dispositivo (Mobile
e PC) e possui comportamento fiel aos
apps nativos.
App

16. Quais são os pilares do PWA?
OTIMIZADOINSTALÁVEL
RÁPIDO E
CONFIÁVEL

17. A revolução contra a dependência de
conectividade
Principais recursos:
● Pré-cache
● Background sync API
● Web push notifications API
Google possui uma biblioteca completa para facilitar o uso do Service Worker
service workers

18. Suporte ao service workers
Firefox Opera Chrome Samsung
Internet
Safari UC Browser Baidu 360 Browser Edge

19. Funcionalidades
O que é possível entregar hoje no PWA

20. PWA • Formas de “instalar”

21. O que está por trás do PWA?

23. 9 utilizam o Android no Brasil
em cada 10 usuários
97% por meio de um smartphone
dos usuários acessam
a internet no Brasil
RELATÓRIO GOOGLE
21.set.2020 às 10h52

24. Evoluindo
A partir da versão 70
(outubro/2018)
o Chrome passou a
aceitar o PWA para
versão desktop.

25. TWA(Trusted Web Activity)
É uma solução do Google anunciada em
2019 que permite que os desenvolvedores
criem um aplicativo Android para agir
como um "cápsula" para seu PWA. Em
outras palavras, você pode publicar seu
aplicativo Android na Play Store e, quando
os usuários o abrirem, ele executará seu
PWA no Google Chrome (ou em outro
navegador disponível).

26. Cases de sucesso

27. Starbucks, Tráfego Mensal: 36.3M
Quando chegou a hora de adicionar funcionalidade de pedidos ao site da
Starbucks, eles queriam criar um sistema que fosse universalmente acessível
tanto para os mercados estabelecidos quanto para os emergentes.
A Starbucks queria criar um PWA com desempenho e funcionalidade
dinâmica que pareça nativa, apesar de estar na plataforma da web.
Eles também queriam construir um sistema de pedidos fácil de usar.
O resultado é um PWA rápido, eficiente e intuitivo que se parece
com um aplicativo nativo.
Resultados:
• Um PWA rápido, eficiente e intuitivo que se parece com
um aplicativo nativo.
• Os mercados emergentes poderão utilizar o novo aplicativo da Web mesmo
sem acesso à Internet de qualidade.
• Os clientes podem personalizar seus pedidos de comida e bebida com uma
experiência de navegação de aplicativo.

28. Ali Express, Tráfego Mensal: 666.5M
AliExpress.com é uma plataforma que oferta produtos para compradores on-
line de todo o mundo. A empresa não conseguiu construir uma experiência
na web que foi tão rápida e envolvente quanto seu aplicativo.
Eles perceberam que nem todos os usuários baixaram o aplicativo e o seu
desenvolvimento havia sido extremamente custoso. Então o AliExpress
decidiu para criar um Progressive Web App para vários navegadores
combinando o aplicativo existente com o amplo alcance da web.
Resultados:
• 104% de aumento em novos usuários
• Aumento de 82% na taxa de conversão de dispositivos com iOS.
• Aumento de 74% no tempo gasto por sessão em todos os navegadores

29. Lancome, Tráfego Mensal: 74.3K
Lancome.com é um marca de perfume de luxo francês e casa de cosméticos
que distribui produtos internacionalmente. Apesar do crescente número de
visitantes de sites móveis, a empresa notou que as taxas de conversão
móveis não correspondia àquelas para desktop. Os consumidores enfrentam
obstáculos significativos ao tentar comprar no celular.
A Lancôme procurou as tecnologias da PWA para fornecer experiência
imersiva e semelhante a um aplicativo. O tempo até a página interativa caiu
em comparação com o seu aplicativo móvel anterior, com uma diminuição
nas taxas de rejeição.
Resultados:
• Redução de 84% no tempo de carregamento
• 17% de aumento nas conversões.
• Aumento de 51% nas sessões de celular.

30. Trivago, Tráfego Mensal: 1.7M
Trivago é uma das principais empresas de pesquisa de hotéis do mundo.
Os usuários do Trivago acessam mais o serviço através de dispositivos móveis
do que no desktop e laptop.
Trivago decidiu implementar PWA com uma coleção de APIs que pudesse
oferecer funcionalidade de um aplicativo nativo, como acesso offline e Push
Notifications, embora ainda seja acessível através de navegador móvel
regular.
Resultados:
• Aumento de 150% no engajamento.
• Aumento de 97% nos cliques para ofertas de hotéis para usuários do PWA.

31. CUIDADO!!!!!
Veja de fato se o que
estão oferecendo para
você é um PWA!

32. OTIMIZADOINSTALÁVEL
RÁPIDO E
CONFIÁVEL
Lembre-se dos pilares do PWA?

33. COMPARATIVO PWA PWA DE VERDADE "PWA FAKE"
PILAR 1 • RÁPIDO E CONFIÁVEL ESSENCIAL NÃO
PILAR 2 • INSTALÁVEL (MANIFESTO) ESSENCIAL SIM • (MANIFESTO)
PILAR 3 • PWA OTIMIZADO ESSENCIAL NÃO
PROGRESSIVO SIM NÃO
NAVEGAÇÃO OFFLINE SIM NÃO
DESIGN • UX PREPARADO PARA NAVEGAÇÃO APP SIM NÃO
ATUALIZADO • SERVICES WORKERS SIM NÃO
VISÍVEL À MECANISMOS DE BUSCA SIM NÃO
POSSIBILIDADE DE ENGAJAMENTO • PUSH SIM NÃO
ACESSÍVEL VIA LINK SIM NÃO
BOAS PRÁTICAS GOOGLE SIM NÃO

34. Como avaliar um site
Google Lighthouse
Como Acessar
Chrome > F12 > Lighthouse
● Velocidade
● Acessibilidade

35. ERICK MELO
https://www.linkedin.com/in/erick-melo-57837218/
AND
#VAMOQUEVAMO
MUITO OBRIGADO!!!