Palestra "PWA - O Futuro dos Aplicativos Mobile", do Ivan Bastos, da WebJump, no segundo dia do Fórum E-Commerce Brasil.

1. Progressive Web Apps
O futuro dos aplicativos Mobile

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

3. Sumário
1. O que é PWA?
2. Fatos, estatísticas e cases
3. PWA na prática
4. Formas de engajamento
5. Desenvolvimento PWA vs App Nativo

4. Antes de tudo: O que é PWA?

5. O que é Progressive Web Apps?
"É uma aplicação escrita em linguagem Web que se comporta como
um aplicativo nativo no celular e no computador"
Progressivo: Carrega dados de acordo com a navegação do usuário,
consumindo banda 3G/4G progressivamente.
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
pode ter um comportamento fiel aos Apps Nativos ou Híbridos.

6. PWA não é uma linguagem, é uma técnica
Os 10 mandamentos do PWA
Para ser considerada uma uma aplicação PWA, o App deve ser:
● Progressivo - Funcionar independente de navegador ou dispositivo, consumindo dados de acordo com a navegação
● Responsivo - Se adaptar a qualquer tela.
● Independente de conectividade - Ser navegável e utilizável de maneira offline ou em conexões de baixa velocidade
● APP UX - Estilo de interface, navegação e interação com comportamento de APP
● Atualizado - Sempre atualizado graças aos processos de update dos service workers
● Seguro - Rodar utilizando protocolo SSL garantindo a entrega do conteúdo
● Visível à mecanismos de busca - Deve ser encontrado e indexado por mecanismos de busca
● Possibilitar Engajamento - Deve permitir Push notifications ou notificações locais para chamar o usuário
● Instalável - Permitir que o usuário mantenha o App no dispositivo sem precisar fazer download em "App Stores"
● Acessível via Link - Funcionar através de um link de fácil acesso e simples de ser compartilhado

7. Fatos, estatísticas e cases

8. 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 pode reduzir em 20% o 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

9. Uber, Melhor desempenho em redes 2G
A versão PWA do Uber foi desenvolvida 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.
Resultados:
• Um PWA rápido, eficiente e intuitivo que tem a mesma interface do App Nativo
• Usuários de mercados emergentes carentes de boa rede móvel tem uma boa
experiência ao utilizar o App
• Tempo de carregamento de, em média, 3 segundos

10. 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 a solução anterior

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

12. 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% 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

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

14. 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 de carregamento
17% de aumento nas conversões.
Aumento de 51% nas sessões de celular.

15. PWA na prática

16. Como Instalar um App PWA?
Um dos conceitos do PWA é o de que ele esteja disponível via URL, para acesso imediato do usuário
Algumas considerações
- Aplicativos PWA não estão disponíveis na App Store ou Google Play
- Por anos os usuários de smartphones aprenderam que Apps somente são encontrados nas lojas de
aplicativos
- Várias formas de engajamento tem sido criadas para que o usuário saiba que o serviço oferece um App PWA
- Google já anunciou que vai permitir que aplicativos PWA estejam disponíveis na Google Play no futuro
- Apple silenciosamente tem aumentado o suporte aos Service Workers e serviços para suporte ao PWA
O fato de o Aplicativo não estar nas Stores é um problema?
- Aparentemente não. Usuários tendem a mudar o seu comportamento com o surgimento de novas tecnologias
que facilitam a sua vida.
- Lembre-se dos cases que acabamos de visualizar e no aumento significativo dos números em todos os
casos.

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

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

19. Formas de engajamento

20. PWA | Formas de engajamento

21. Desenvolvimento PWA vs App Nativo

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

23. PWA | Confiável, Rápido, Aderente
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

24. OBRIGADO!
Ivan Bastos
ivan@webjump.com.br