Qual é a dos Progressive Web Apps?

Transcript

1. Qual é a dos Progressive Web Apps? Matheus Lima
2. Compensa fazer um app?
3. 1. É bem caro
4. Salário iOS
5. Salário Android
6. Salário Web
7. Quanto custa um app?
8. 2. Retenção ruim
9. Etapas do uso de um app • Buscar na store
10. Etapas do uso de um app • Buscar na store • Verificar se tem espaço no smartphone
11. Etapas do uso de um app • Buscar na store • Verificar se tem espaço no smartphone • Instalar
12. Etapas do uso de um app • Buscar na store • Verificar se tem espaço no smartphone • Instalar • Cadastrar
13. Etapas do uso de um app • Buscar na store • Verificar se tem espaço no smartphone • Instalar • Cadastrar • Interagir
14. Etapas do uso de um app • Buscar na store • Verificar se tem espaço no smartphone • Instalar • Cadastrar • Interagir • Compartilhar
15. 20% de perda em cada etapa
16. 3. Pode não compensar
17. Quantos apps você baixou neste mês?
18. Quantos apps você baixou neste mês? • 65% dos usuários baixaram zero apps neste mês
19. Quantos apps você baixou neste mês? • 65% dos usuários baixaram zero apps neste mês • O número de downloads vem diminuindo 20% por ano
20. Quantos apps você baixou neste mês? • 65% dos usuários baixaram zero apps neste mês • O número de downloads vem diminuindo 20% por ano • 60% de todos os apps nunca foram baixados
21. Quantos apps você baixou neste mês? • 65% dos usuários baixaram zero apps neste mês • O número de downloads vem diminuindo 20% por ano • 60% de todos os apps nunca foram baixados • 80% do tempo nos mesmos 5 aplicativos
22. Aplicativos em queda
23. Resumindo
24. Desenvolver um app nativo é caro e pra alguns produtos não vale a pena
25. O que fazer então?
26. Progressive Web Apps
27. A visão original de Jobs para o iPhone “Vocês já tem tudo o que precisam se querem saber como desenvolver aplicativos para o iPhone hoje: basta usar os padrões modernos da web.”
28. Definição “Os PWAs são um conjunto de técnicas para desenvolver aplicações web”
29. Definição “Eles adicionam progressivamente funcionalidades que antes só eram possíveis em apps nativos”
30. Características
31. 1. Progressivo: qualquer browser
32. 2. Responsivo: qualquer dispositivo
33. 3. Conexão: funciona offline
34. 4. App-like: o usuário se sente em um app nativo
35. 5. Atualizado: não é necessário baixar atualizações
36. 6. Seguro: somente https
37. 7. Engajável: através de push notifications
38. 8. Instalável: é possível adicionar o ícone na tela inicial
39. Quem está interessado?
40. Quem não está interessado?
41. Cases
42. Principais cases com PWA
43. Flipkart • Tempo de permanência: 300% • Engajamento: 40% • Consumo de dados: 1/3
44. Alibaba • Conversões: 76% • Engajamento: 30%
45. Housing.com • Conversões: 38% • Sessões: 10% • Velocidade no carregamento: 30% • Redução de bounces: 40%
46. Como construir um PWA
47. 1. Manifest
48. manifest.json
49. manifest.json Gerar o arquivo automaticamente: • Web App Manifest Generator • PWA Builder
50. 2. Service Worker
51. Service Worker “Um Service Worker é um script que seu navegador executa em segundo plano”
52. Service Worker O SW permite a manipulação das requisições que são feitas pela sua aplicação
53. Service Worker Ou seja, agora a Web pode funcionar em modo offline
54. Service Worker
55. Service Worker
56. Service Worker
57. Service Worker
58. 3. Lighthouse
59. Lighthouse
60. Lighthouse
61. Lighthouse
62. www.concretesolutions.com.br Ajudamos empresas a criar produtos digitais de sucesso Belo Horizonte - Av. Getúlio Vargas, 671 8º andar, sala 800 - Savassi - (31) 3360-8900 Rio de Janeiro - Rua São José, 90 - cj. 2121 Centro - (21) 2240-2030 São Paulo - Av. Nações Unidas, 11.541 3º andar - Brooklin - (11) 4119-0449