Alexandre Rodrigues - Business Development Manager, WebJump, falou sobre Mobile: AMP e PWA na Conferência E-Commerce Brasil SANTA CATARINA 2019. Saiba mais em https://eventos.ecommercebrasil.com.br/conferencia-santa-catarina/.

1. Alexandre Rodrigues | Business Development Manager
Mobile: PWA e AMP

4. ConversãoEngajamentoExperiência
destas tecnologias?
Qual o objetivo

5. Agenda
1. O mundo móvel
2. PWA
3. AMP
4. PWAMP

6. 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.

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

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

9. 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.

10. Website responsivo APP

11. Engajamento
Alcance
APP
Website
Responsivo

12. Melhorar radicalmente a
experiência do usuário

13. 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

14. Fast
Integrated
Reliable
Engaging

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

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

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. Evoluindo
A partir da versão 70
(outubro/2018)
o Chrome passou a
aceitar o PWA para
versão desktop.

20. Formas de
“instalar”

21. PWA • Formas de “instalar”

22. Case

23. Pinterest
Aumento no engajamento e revenda de anúncios
De olho no crescimento internacional, a empresa decidiu
investir em um formato Web para desenvolvimento.
O aplicativo desenvolvido em PWA demorou 3 meses para ser
concluído
Resultados:
● 60% de acréscimo no engajamento dos usuários.
● Aumento de 44% na revenda de anúncios.
● Tempo de navegação no App aumentou 40% em
relação à solução anterior.

24. o que é AMP?

26. Aumentar drasticamente a velocidade de
carregamento das páginas web em
dispositivos móveis.

27. Não é apenas para notícias
Não é apenas para páginas web simples
Não é apenas para melhorar posicionamento no SEO.
AMP é um novo padrão para tornar a web mais fácil, simples e
rápida para usuários e desenvolvedores.

28. As páginas AMP são um ecossistema para páginas
responsivas, rápidas e modernas
Diretrizes para criar uma página web AMP

29. Powered by
Uma vez que a página Web segue os padrões AMP o
Google armazena a página na sua própria CDN*.
*CDN - Content Distribution Network

30. AMP Padrão

31. https://www.carved.com/
taxa de conversão
maior que o e-
commerce
75%
Carregamento de
página mais
rápida
37% 33%
Redução do
bounce rate

32. Por onde começar
Páginas de alto
tráfego e com
grande acesso via
ferramentas de
busca.
implementando AMP?
Home Page Produto

34. Start fast,
Stay fast.

35. Usuário
encontra o
conteúdo
Abre página
AMP e Service
Worker já
instala PWA em
background
Usuário começa
a usar PWA sem
quebra de
experiência

36. PWA
● App Shell
● Header e Menu persistente
● Experiência de app
● Utiliza a página AMP como fonte de conteúdo
AMP
● Carregamento instantâneo
● Conteúdo cacheado na CDN e no Service
Worker
PWAMP
Trabalhando em conjunto

37. PWAMP
Resumindo
entrega o conteúdo
faz a “mágica” acontecer

38. DÚVIDAS?

39. OBRIGADO!