PWA: O Futuro dos Aplicativos Mobile Clique para ver mais informações - Ivan BastosIvan Bastos - CEO, WebJump Marketplace Conference 2018 - Arena Soluções

1. Progressive Web Apps
Ivan Bastos
CEO - Webjump

2. - Co-fundador e CEO - WEBJUMP
- Formado em Sistemas de Informação
- MBA em Gerenciamento estratégico e econômico de Projetos
- Gerente de E-Commerce
Ivan Bastos
Ivan Bastos

3. Sumário
1. O que é Progressive Web App?
2. Fatos e estatísticas
3. PWA na prática
4. Formas de engajamento
5. PWA + Magento
6. Time de desenvolvimento PWA vs App Nativo
Ivan Bastos

4. Antes de tudo:
O que é PWA?
Ivan Bastos

5. PWA | O que é Progressive Web Apps?
Mas porque se chama Progressive Web App?
Progressivo: Carrega informações a medida em que o usuário navega
na aplicação, consumindo banda 3G/4G apenas do conteúdo que está
sendo exibido - diferentemente dos Apps que consomem muitos
Megabytes de banda do seu plano apenas para fazer Download e
ocupam muito espaço no dispositivo para se manter instalado.
Web: É escrito em linguagem Web como HTML, CSS e Javascript,
diferentemente dos Apps nativos que possuem uma linguagem própria
para cada dispositivo. IOS (Swift/Objective C), Android (Java) ,
Windows Phone (C#, VB, Visual Studio).
Apps: É um aplicativo. Deve ser instalado no dispositivo (Mobile e PC)
e "roda" com mais velocidade e capacidade do que os conhecidos
"Apps Javascript" que existem atualmente.
"É uma aplicação escrita em
linguagem Web, que roda dentro do
browser do dispositivo mobile e que se
comporta como um aplicativo nativo"
Ivan Bastos

6. PWA | Website vs PWA vs App Nativo
Features Website PWA Mobile APP
Mecanismos de busca YES YES NO
Atualizações Online sem compilação YES YES NO
Push Notifications YES YES YES
Responsivo YES YES YES
Navegação Offline NO YES YES
Notificações Locais NO YES YES
APP Stores NO YES* YES
Instalação por Download NO NO YES
* Windows Store and upcoming on Google Play
Ivan Bastos

7. Descomplicado
Entrega o que
importa
Design Responsivo
Um Layout para
todos os dispositivos
Sem download e
sem "App Stores"
Facilidade de
distribuição
Economia 3G/4G
Menor consumo de
banda e de espaço do
dispositivo
Sempre atualizado
Sem necessidade de
atualizações via "App
Store"
Compatibilidade Universal
Uma compilação para todos os sistemas operacionais
PWA | Confiável, Rápido, Aderente
Ivan Bastos

8. Fatos e estatísticas
Ivan Bastos

9. PWA | Fatos e estatísticas
● Mais de 50% dos usuários de smartphone não baixam sequer 1 App por mês
● Cada passo para realizar um download reduz 20% de engajamento dos usuários
● O acesso à páginas Web é 2,2 vezes maior do que em aplicativos
● Os usuários gastam 16 vezes mais tempo dentro de aplicativos do que na Web
● 20% das empresas que hoje possuem APP irão abandoná-los até 2020
Pinterest reformulou seu site mobile para PWA a teve um acréscimo de engajamento de usuários de
60%. Eles também viram um aumento de 44% na revenda de anúncios. O tempo gasto dentro do
aplicativo aumentou em 40%.
A versão PWA do Uber foi desenvolvido para ser mais rápido para conexões 2G. O Core da aplicação
PWA tem apenas 50kb e leva menos de 3 segundos para ser carregado em redes 2G.
Twitter Lite feito em PWA teve um aumento de 65% de páginas por sessão, 75% em Tweets e 20% de
redução abandono de sessão. Twitter lite carrega em apenas 3 segundos para um usuário que já
acessou a aplicação.
Ivan Bastos

10. Starbucks, Tráfego Mensal: 36.3M
A Starbucks.com é uma empresa americana com uma cadeia de cafés.
Eles lançaram seu aplicativo de pedidos móveis em todo o país em 2015.
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 consistente à Internet.
• Os clientes podem personalizar seus pedidos de comida e bebida sem
problemas.
Ivan Bastos

11. Ali Express, Tráfego Mensal: 666.5M
AliExpress.com é uma plataforma que oferta produtos para compradores
on-line de todo o mundo. O comércio do AliExpress está crescendo três
vezes mais rápido do que E-Commerce da companhia. 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% mais novos usuários em todos os navegadores.
Aumento de 82% na taxa de conversão do iOS.
Aumento de 74% no tempo gasto por sessão em todos os navegadores
Ivan Bastos

12. 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.
67% dos usuários que voltam on-line continuam navegando pelo site
Ivan Bastos

13. Lancome, Tráfego Mensal: 74.3K
Lancome.com é um 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é o 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 até que a página seja interativa.
17% de aumento nas conversões.
Aumento de 51% nas sessões de celular.
Ivan Bastos

14. Ele.me, Tráfego Mensal: 8.6M
A Ele.me é a maior empresa de pedidos e entregas de alimentos na China
continental. A Ele.me notou um crescimento explosivo que levou ao
crescimento de unidades de negócio distintas dentro da empresa - cada
uma responsável por executar seu micro-serviço sob o domínio principal. A
empresa concluiu que o desacoplamento desses serviços individuais é
melhor atendido por um aplicativo de várias páginas.
Resultados:
11,6% - diminuição no tempo de carregamento em todas as páginas.
4,93 segundos - de ganho de velocidade na rede 3G
Ivan Bastos

15. PWA
Na prática
Ivan Bastos

16. PWA | Experiência na prática
Abra o Google Chrome no seu celular e digite: m.uber.com
Ivan Bastos

17. PWA | Experiência na prática
Abra o Safari no seu celular e digite: m.uber.com
* Funcionamento Fullscreen a partir da versão IOS 11.3
Ivan Bastos

18. Formas de engajamento
Ivan Bastos

19. PWA | Formas de engajamento
Ivan Bastos

20. Desenvolvimento
PWA vs App Nativo
Ivan Bastos

21. PWA | Desenvolvimento PWA vs App Nativo
Desenvolvimento Front-end para Web + Apps: Desenvolvimento Front-end com PWA:
- Perda de mercado automática se não estiver em todas as
plataformas
- Desenvolvedores dedicados para cada tecnologia
- Comportamento diferente para cada Sistema
- Testes para cada uma das plataformas
- Muitos fornecedores (maior esforço de gestão)
- "Time to Market" muito maior
- Custo elevado de desenvolvimento
- Um time para todas as plataformas
- Um teste para todas as plataformas
- Atualizações instantâneas em um só deploy
- Redução do esforço de gerenciamento
- "Time to Market" reduzido
- Redução de custos
- A mesma "User experience" para todos os OS
Ivan Bastos

22. Obrigado!
Ivan Bastos