SlideShare uma empresa Scribd logo
1 de 24
Baixar para ler offline
Progressive Web Apps
O futuro dos aplicativos Mobile
● 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
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
Antes de tudo: O que é PWA?
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.
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
Fatos, estatísticas e cases
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
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
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
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
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
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.
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.
PWA na prática
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.
PWA | Experiência na prática
Abra o Google Chrome no seu celular e digite: m.uber.com
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
Formas de engajamento
PWA | Formas de engajamento
Desenvolvimento PWA vs App Nativo
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
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
OBRIGADO!
Ivan Bastos
ivan@webjump.com.br

Mais conteúdo relacionado

Mais procurados

PROGRESSIVE WEB APPS - O melhor da WEB
PROGRESSIVE WEB APPS - O melhor da WEBPROGRESSIVE WEB APPS - O melhor da WEB
PROGRESSIVE WEB APPS - O melhor da WEBHebert Silva
 
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini MagalhaesCongresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini MagalhaesVictor Rossini Magalhães
 
Harrenmedia l video l mobile & desktop
Harrenmedia l video l mobile & desktopHarrenmedia l video l mobile & desktop
Harrenmedia l video l mobile & desktopAlex M. Baptista
 
Google Mobile - Soluções
Google Mobile - SoluçõesGoogle Mobile - Soluções
Google Mobile - SoluçõesGustavo Luveira
 
As vantagens e os desafios na implementação do Mobile First
As vantagens e os desafios na implementação do Mobile FirstAs vantagens e os desafios na implementação do Mobile First
As vantagens e os desafios na implementação do Mobile FirstLeandrinho Vieira
 
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01Renato Melo
 
Mobile first - Como pensar mobile
Mobile first - Como pensar mobileMobile first - Como pensar mobile
Mobile first - Como pensar mobileDiogo Souza Machado
 
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
UX Design em 7 Passos - Daniel Werle, Fórum Web AdventistaUX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
UX Design em 7 Passos - Daniel Werle, Fórum Web AdventistaIgreja Adventista do Sétimo Dia
 
Mobile Commerce - como aprender, medir e converter
Mobile Commerce - como aprender, medir e converterMobile Commerce - como aprender, medir e converter
Mobile Commerce - como aprender, medir e converterVictor Lima
 

Mais procurados (15)

PROGRESSIVE WEB APPS - O melhor da WEB
PROGRESSIVE WEB APPS - O melhor da WEBPROGRESSIVE WEB APPS - O melhor da WEB
PROGRESSIVE WEB APPS - O melhor da WEB
 
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini MagalhaesCongresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
 
Harrenmedia l video l mobile & desktop
Harrenmedia l video l mobile & desktopHarrenmedia l video l mobile & desktop
Harrenmedia l video l mobile & desktop
 
Track 4 Inloco - MMA Forum Brasil 2018
Track 4 Inloco - MMA Forum Brasil 2018Track 4 Inloco - MMA Forum Brasil 2018
Track 4 Inloco - MMA Forum Brasil 2018
 
Google Mobile - Soluções
Google Mobile - SoluçõesGoogle Mobile - Soluções
Google Mobile - Soluções
 
Como criar um aplicativo
Como criar um aplicativoComo criar um aplicativo
Como criar um aplicativo
 
As vantagens e os desafios na implementação do Mobile First
As vantagens e os desafios na implementação do Mobile FirstAs vantagens e os desafios na implementação do Mobile First
As vantagens e os desafios na implementação do Mobile First
 
Magtab - Apresentação 2014
Magtab - Apresentação 2014Magtab - Apresentação 2014
Magtab - Apresentação 2014
 
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
 
Renault MSite
Renault MSiteRenault MSite
Renault MSite
 
Apresentação total mobi
Apresentação total mobiApresentação total mobi
Apresentação total mobi
 
Mobile first - Como pensar mobile
Mobile first - Como pensar mobileMobile first - Como pensar mobile
Mobile first - Como pensar mobile
 
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
UX Design em 7 Passos - Daniel Werle, Fórum Web AdventistaUX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
 
Mobile Commerce - como aprender, medir e converter
Mobile Commerce - como aprender, medir e converterMobile Commerce - como aprender, medir e converter
Mobile Commerce - como aprender, medir e converter
 
Proposta Dufry
Proposta DufryProposta Dufry
Proposta Dufry
 

Semelhante a Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan Bastos

[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...E-Commerce Brasil
 
[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em ...
[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em ...[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em ...
[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em ...E-Commerce Brasil
 
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCJanderson Silva
 
Progressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHProgressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHRafael Schettino
 
Como desenvolver e publicar aplicativos em Android no Google Play - Matheus P...
Como desenvolver e publicar aplicativos em Android no Google Play - Matheus P...Como desenvolver e publicar aplicativos em Android no Google Play - Matheus P...
Como desenvolver e publicar aplicativos em Android no Google Play - Matheus P...Matheus Piscioneri
 
"PWA: Entenda como funciona a nova aposta do mobile e-commerce" - Por Gallege...
"PWA: Entenda como funciona a nova aposta do mobile e-commerce" - Por Gallege..."PWA: Entenda como funciona a nova aposta do mobile e-commerce" - Por Gallege...
"PWA: Entenda como funciona a nova aposta do mobile e-commerce" - Por Gallege...E-Commerce Brasil
 
Ads&Performance - Performance em SEO - técnicas para aumentar a conversão
Ads&Performance - Performance em SEO - técnicas para aumentar a conversãoAds&Performance - Performance em SEO - técnicas para aumentar a conversão
Ads&Performance - Performance em SEO - técnicas para aumentar a conversãoE-Commerce Brasil
 
Evento Mobilidade 2016 - Painel: evolução das análises de resultados em mobile
Evento Mobilidade 2016 - Painel: evolução das análises de resultados em mobileEvento Mobilidade 2016 - Painel: evolução das análises de resultados em mobile
Evento Mobilidade 2016 - Painel: evolução das análises de resultados em mobileIAB Brasil
 
CellBus protótipo final
CellBus protótipo finalCellBus protótipo final
CellBus protótipo finallaisgrazielly
 
Zapp Aplicativos Empresariais
Zapp Aplicativos EmpresariaisZapp Aplicativos Empresariais
Zapp Aplicativos EmpresariaisZappAplicativos
 
Tool Open-Source & Free for Web Analytics
Tool Open-Source & Free for Web AnalyticsTool Open-Source & Free for Web Analytics
Tool Open-Source & Free for Web AnalyticsFrancisco Gonçalves
 

Semelhante a Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan Bastos (20)

[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
 
[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em ...
[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em ...[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em ...
[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em ...
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
 
Desenvolvimento web e mobile ifce
Desenvolvimento web e mobile   ifceDesenvolvimento web e mobile   ifce
Desenvolvimento web e mobile ifce
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHProgressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBH
 
Progressive apps
Progressive appsProgressive apps
Progressive apps
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
A vez do mobile - Dev in Bahia #3
A vez do mobile - Dev in Bahia #3A vez do mobile - Dev in Bahia #3
A vez do mobile - Dev in Bahia #3
 
Como desenvolver e publicar aplicativos em Android no Google Play - Matheus P...
Como desenvolver e publicar aplicativos em Android no Google Play - Matheus P...Como desenvolver e publicar aplicativos em Android no Google Play - Matheus P...
Como desenvolver e publicar aplicativos em Android no Google Play - Matheus P...
 
"PWA: Entenda como funciona a nova aposta do mobile e-commerce" - Por Gallege...
"PWA: Entenda como funciona a nova aposta do mobile e-commerce" - Por Gallege..."PWA: Entenda como funciona a nova aposta do mobile e-commerce" - Por Gallege...
"PWA: Entenda como funciona a nova aposta do mobile e-commerce" - Por Gallege...
 
Ads&Performance - Performance em SEO - técnicas para aumentar a conversão
Ads&Performance - Performance em SEO - técnicas para aumentar a conversãoAds&Performance - Performance em SEO - técnicas para aumentar a conversão
Ads&Performance - Performance em SEO - técnicas para aumentar a conversão
 
Apresentação innovatio
Apresentação innovatioApresentação innovatio
Apresentação innovatio
 
Evento Mobilidade 2016 - Painel: evolução das análises de resultados em mobile
Evento Mobilidade 2016 - Painel: evolução das análises de resultados em mobileEvento Mobilidade 2016 - Painel: evolução das análises de resultados em mobile
Evento Mobilidade 2016 - Painel: evolução das análises de resultados em mobile
 
CellBus protótipo final
CellBus protótipo finalCellBus protótipo final
CellBus protótipo final
 
Zapp Aplicativos Empresariais
Zapp Aplicativos EmpresariaisZapp Aplicativos Empresariais
Zapp Aplicativos Empresariais
 
Web Mobile
Web MobileWeb Mobile
Web Mobile
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
 
Tool Open-Source & Free for Web Analytics
Tool Open-Source & Free for Web AnalyticsTool Open-Source & Free for Web Analytics
Tool Open-Source & Free for Web Analytics
 

Mais de E-Commerce Brasil

Congresso Grocery & Drinks | Digitalizando a experiência do cliente
Congresso Grocery & Drinks | Digitalizando a experiência do clienteCongresso Grocery & Drinks | Digitalizando a experiência do cliente
Congresso Grocery & Drinks | Digitalizando a experiência do clienteE-Commerce Brasil
 
Congresso Grocery & Drinks | A era da omnicanalidade e os desafios da indústria
Congresso Grocery & Drinks |  A era da omnicanalidade e os desafios da indústriaCongresso Grocery & Drinks |  A era da omnicanalidade e os desafios da indústria
Congresso Grocery & Drinks | A era da omnicanalidade e os desafios da indústriaE-Commerce Brasil
 
Congresso Grocery & Drinks | A realidade após a empolgação - O uso de IA Gene...
Congresso Grocery & Drinks | A realidade após a empolgação - O uso de IA Gene...Congresso Grocery & Drinks | A realidade após a empolgação - O uso de IA Gene...
Congresso Grocery & Drinks | A realidade após a empolgação - O uso de IA Gene...E-Commerce Brasil
 
Congresso Grocery & Drinks | Transformando o e-commerce alimentar por meio do...
Congresso Grocery & Drinks | Transformando o e-commerce alimentar por meio do...Congresso Grocery & Drinks | Transformando o e-commerce alimentar por meio do...
Congresso Grocery & Drinks | Transformando o e-commerce alimentar por meio do...E-Commerce Brasil
 
Congresso Grocery & Drinks | Bacio di Latte: Tecnologia aplicada na experiênc...
Congresso Grocery & Drinks | Bacio di Latte: Tecnologia aplicada na experiênc...Congresso Grocery & Drinks | Bacio di Latte: Tecnologia aplicada na experiênc...
Congresso Grocery & Drinks | Bacio di Latte: Tecnologia aplicada na experiênc...E-Commerce Brasil
 
Congresso Grocery & Drinks | E-commerce alimentar em 2023 e perspectivas 2024
Congresso Grocery & Drinks | E-commerce alimentar em 2023 e perspectivas 2024Congresso Grocery & Drinks | E-commerce alimentar em 2023 e perspectivas 2024
Congresso Grocery & Drinks | E-commerce alimentar em 2023 e perspectivas 2024E-Commerce Brasil
 
Congresso Grocery & Drinks I Como orquestração de pagamentos pode diminuir o ...
Congresso Grocery & Drinks I Como orquestração de pagamentos pode diminuir o ...Congresso Grocery & Drinks I Como orquestração de pagamentos pode diminuir o ...
Congresso Grocery & Drinks I Como orquestração de pagamentos pode diminuir o ...E-Commerce Brasil
 
Congresso Grocery & Drinks I Como criar novos modelos de negócio para Grocery...
Congresso Grocery & Drinks I Como criar novos modelos de negócio para Grocery...Congresso Grocery & Drinks I Como criar novos modelos de negócio para Grocery...
Congresso Grocery & Drinks I Como criar novos modelos de negócio para Grocery...E-Commerce Brasil
 
Congresso Grocery & Drinks I Desafios e importância de fidelizar o seu cliente.
Congresso Grocery & Drinks I Desafios e importância de fidelizar o seu cliente.Congresso Grocery & Drinks I Desafios e importância de fidelizar o seu cliente.
Congresso Grocery & Drinks I Desafios e importância de fidelizar o seu cliente.E-Commerce Brasil
 
Congresso Grocery & Drinks I Da gôndola ao carrinho digital: transformando de...
Congresso Grocery & Drinks I Da gôndola ao carrinho digital: transformando de...Congresso Grocery & Drinks I Da gôndola ao carrinho digital: transformando de...
Congresso Grocery & Drinks I Da gôndola ao carrinho digital: transformando de...E-Commerce Brasil
 
Congresso Grocery & Drinks | Uso de dados nas decisões de crédito para empres...
Congresso Grocery & Drinks | Uso de dados nas decisões de crédito para empres...Congresso Grocery & Drinks | Uso de dados nas decisões de crédito para empres...
Congresso Grocery & Drinks | Uso de dados nas decisões de crédito para empres...E-Commerce Brasil
 
Congresso Grocery & Drinks | Benefícios fiscais e as vantagens para o Grocery...
Congresso Grocery & Drinks | Benefícios fiscais e as vantagens para o Grocery...Congresso Grocery & Drinks | Benefícios fiscais e as vantagens para o Grocery...
Congresso Grocery & Drinks | Benefícios fiscais e as vantagens para o Grocery...E-Commerce Brasil
 
Congresso Grocery & Drinks | Visões sobre o futuro da digitalização dos super...
Congresso Grocery & Drinks | Visões sobre o futuro da digitalização dos super...Congresso Grocery & Drinks | Visões sobre o futuro da digitalização dos super...
Congresso Grocery & Drinks | Visões sobre o futuro da digitalização dos super...E-Commerce Brasil
 
Grocery and Drinks Congresso I E-commerce Inteligente e Personalização em Es...
Grocery and Drinks Congresso  I E-commerce Inteligente e Personalização em Es...Grocery and Drinks Congresso  I E-commerce Inteligente e Personalização em Es...
Grocery and Drinks Congresso I E-commerce Inteligente e Personalização em Es...E-Commerce Brasil
 
Conferência MG 2024 | Sincronia estratégica no varejo digital: demandas, inve...
Conferência MG 2024 | Sincronia estratégica no varejo digital: demandas, inve...Conferência MG 2024 | Sincronia estratégica no varejo digital: demandas, inve...
Conferência MG 2024 | Sincronia estratégica no varejo digital: demandas, inve...E-Commerce Brasil
 
Conferência MG 2024 | Entrevista - O que podemos aprender com alguns dos maio...
Conferência MG 2024 | Entrevista - O que podemos aprender com alguns dos maio...Conferência MG 2024 | Entrevista - O que podemos aprender com alguns dos maio...
Conferência MG 2024 | Entrevista - O que podemos aprender com alguns dos maio...E-Commerce Brasil
 
Conferência MG 2024 | Conjuntura econômica e perspectivas para 2024
Conferência MG 2024 |  Conjuntura econômica e perspectivas para 2024Conferência MG 2024 |  Conjuntura econômica e perspectivas para 2024
Conferência MG 2024 | Conjuntura econômica e perspectivas para 2024E-Commerce Brasil
 
Conferência MG 2024 | A força da geolocalização impulsionada em ADS e Fullcom...
Conferência MG 2024 | A força da geolocalização impulsionada em ADS e Fullcom...Conferência MG 2024 | A força da geolocalização impulsionada em ADS e Fullcom...
Conferência MG 2024 | A força da geolocalização impulsionada em ADS e Fullcom...E-Commerce Brasil
 
Conferência MG 2024 | As tendências para logística em 2024 e o impacto positi...
Conferência MG 2024 | As tendências para logística em 2024 e o impacto positi...Conferência MG 2024 | As tendências para logística em 2024 e o impacto positi...
Conferência MG 2024 | As tendências para logística em 2024 e o impacto positi...E-Commerce Brasil
 
Conferência MG 2024 | Como um inovador ecossistema pode ser uma alavanca para...
Conferência MG 2024 | Como um inovador ecossistema pode ser uma alavanca para...Conferência MG 2024 | Como um inovador ecossistema pode ser uma alavanca para...
Conferência MG 2024 | Como um inovador ecossistema pode ser uma alavanca para...E-Commerce Brasil
 

Mais de E-Commerce Brasil (20)

Congresso Grocery & Drinks | Digitalizando a experiência do cliente
Congresso Grocery & Drinks | Digitalizando a experiência do clienteCongresso Grocery & Drinks | Digitalizando a experiência do cliente
Congresso Grocery & Drinks | Digitalizando a experiência do cliente
 
Congresso Grocery & Drinks | A era da omnicanalidade e os desafios da indústria
Congresso Grocery & Drinks |  A era da omnicanalidade e os desafios da indústriaCongresso Grocery & Drinks |  A era da omnicanalidade e os desafios da indústria
Congresso Grocery & Drinks | A era da omnicanalidade e os desafios da indústria
 
Congresso Grocery & Drinks | A realidade após a empolgação - O uso de IA Gene...
Congresso Grocery & Drinks | A realidade após a empolgação - O uso de IA Gene...Congresso Grocery & Drinks | A realidade após a empolgação - O uso de IA Gene...
Congresso Grocery & Drinks | A realidade após a empolgação - O uso de IA Gene...
 
Congresso Grocery & Drinks | Transformando o e-commerce alimentar por meio do...
Congresso Grocery & Drinks | Transformando o e-commerce alimentar por meio do...Congresso Grocery & Drinks | Transformando o e-commerce alimentar por meio do...
Congresso Grocery & Drinks | Transformando o e-commerce alimentar por meio do...
 
Congresso Grocery & Drinks | Bacio di Latte: Tecnologia aplicada na experiênc...
Congresso Grocery & Drinks | Bacio di Latte: Tecnologia aplicada na experiênc...Congresso Grocery & Drinks | Bacio di Latte: Tecnologia aplicada na experiênc...
Congresso Grocery & Drinks | Bacio di Latte: Tecnologia aplicada na experiênc...
 
Congresso Grocery & Drinks | E-commerce alimentar em 2023 e perspectivas 2024
Congresso Grocery & Drinks | E-commerce alimentar em 2023 e perspectivas 2024Congresso Grocery & Drinks | E-commerce alimentar em 2023 e perspectivas 2024
Congresso Grocery & Drinks | E-commerce alimentar em 2023 e perspectivas 2024
 
Congresso Grocery & Drinks I Como orquestração de pagamentos pode diminuir o ...
Congresso Grocery & Drinks I Como orquestração de pagamentos pode diminuir o ...Congresso Grocery & Drinks I Como orquestração de pagamentos pode diminuir o ...
Congresso Grocery & Drinks I Como orquestração de pagamentos pode diminuir o ...
 
Congresso Grocery & Drinks I Como criar novos modelos de negócio para Grocery...
Congresso Grocery & Drinks I Como criar novos modelos de negócio para Grocery...Congresso Grocery & Drinks I Como criar novos modelos de negócio para Grocery...
Congresso Grocery & Drinks I Como criar novos modelos de negócio para Grocery...
 
Congresso Grocery & Drinks I Desafios e importância de fidelizar o seu cliente.
Congresso Grocery & Drinks I Desafios e importância de fidelizar o seu cliente.Congresso Grocery & Drinks I Desafios e importância de fidelizar o seu cliente.
Congresso Grocery & Drinks I Desafios e importância de fidelizar o seu cliente.
 
Congresso Grocery & Drinks I Da gôndola ao carrinho digital: transformando de...
Congresso Grocery & Drinks I Da gôndola ao carrinho digital: transformando de...Congresso Grocery & Drinks I Da gôndola ao carrinho digital: transformando de...
Congresso Grocery & Drinks I Da gôndola ao carrinho digital: transformando de...
 
Congresso Grocery & Drinks | Uso de dados nas decisões de crédito para empres...
Congresso Grocery & Drinks | Uso de dados nas decisões de crédito para empres...Congresso Grocery & Drinks | Uso de dados nas decisões de crédito para empres...
Congresso Grocery & Drinks | Uso de dados nas decisões de crédito para empres...
 
Congresso Grocery & Drinks | Benefícios fiscais e as vantagens para o Grocery...
Congresso Grocery & Drinks | Benefícios fiscais e as vantagens para o Grocery...Congresso Grocery & Drinks | Benefícios fiscais e as vantagens para o Grocery...
Congresso Grocery & Drinks | Benefícios fiscais e as vantagens para o Grocery...
 
Congresso Grocery & Drinks | Visões sobre o futuro da digitalização dos super...
Congresso Grocery & Drinks | Visões sobre o futuro da digitalização dos super...Congresso Grocery & Drinks | Visões sobre o futuro da digitalização dos super...
Congresso Grocery & Drinks | Visões sobre o futuro da digitalização dos super...
 
Grocery and Drinks Congresso I E-commerce Inteligente e Personalização em Es...
Grocery and Drinks Congresso  I E-commerce Inteligente e Personalização em Es...Grocery and Drinks Congresso  I E-commerce Inteligente e Personalização em Es...
Grocery and Drinks Congresso I E-commerce Inteligente e Personalização em Es...
 
Conferência MG 2024 | Sincronia estratégica no varejo digital: demandas, inve...
Conferência MG 2024 | Sincronia estratégica no varejo digital: demandas, inve...Conferência MG 2024 | Sincronia estratégica no varejo digital: demandas, inve...
Conferência MG 2024 | Sincronia estratégica no varejo digital: demandas, inve...
 
Conferência MG 2024 | Entrevista - O que podemos aprender com alguns dos maio...
Conferência MG 2024 | Entrevista - O que podemos aprender com alguns dos maio...Conferência MG 2024 | Entrevista - O que podemos aprender com alguns dos maio...
Conferência MG 2024 | Entrevista - O que podemos aprender com alguns dos maio...
 
Conferência MG 2024 | Conjuntura econômica e perspectivas para 2024
Conferência MG 2024 |  Conjuntura econômica e perspectivas para 2024Conferência MG 2024 |  Conjuntura econômica e perspectivas para 2024
Conferência MG 2024 | Conjuntura econômica e perspectivas para 2024
 
Conferência MG 2024 | A força da geolocalização impulsionada em ADS e Fullcom...
Conferência MG 2024 | A força da geolocalização impulsionada em ADS e Fullcom...Conferência MG 2024 | A força da geolocalização impulsionada em ADS e Fullcom...
Conferência MG 2024 | A força da geolocalização impulsionada em ADS e Fullcom...
 
Conferência MG 2024 | As tendências para logística em 2024 e o impacto positi...
Conferência MG 2024 | As tendências para logística em 2024 e o impacto positi...Conferência MG 2024 | As tendências para logística em 2024 e o impacto positi...
Conferência MG 2024 | As tendências para logística em 2024 e o impacto positi...
 
Conferência MG 2024 | Como um inovador ecossistema pode ser uma alavanca para...
Conferência MG 2024 | Como um inovador ecossistema pode ser uma alavanca para...Conferência MG 2024 | Como um inovador ecossistema pode ser uma alavanca para...
Conferência MG 2024 | Como um inovador ecossistema pode ser uma alavanca para...
 

Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan Bastos

  • 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
  • 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.
  • 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
  • 20. PWA | Formas de engajamento
  • 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

Notas do Editor

  1. Exemplo de Sumário
  2. Exemplo 3 de Capa para a Sessão
  3. Slide normal com título e texto
  4. Slide normal com título e texto
  5. Exemplo 3 de Capa para a Sessão
  6. Slide normal com título e texto
  7. Slide normal com título e texto
  8. Slide normal com título e texto
  9. Slide normal com título e texto
  10. Slide normal com título e texto
  11. Slide normal com título e texto
  12. Slide normal com título e texto
  13. Exemplo 3 de Capa para a Sessão
  14. Slide normal com título e texto
  15. Slide normal com título e texto
  16. Slide normal com título e texto
  17. Exemplo de Capa 2
  18. Slide normal com título e texto
  19. Exemplo de Capa 2
  20. Slide normal com título e texto
  21. Slide normal com título e texto