PROGRESSIVE WEB APPS
MeetUp Mobile Dev BH
Rafael Schettino
Minutrade
@rafaelschett
OS NÚMEROS NÃO MENTEM...
COMO O USUÁRIO GASTA SEU TEMPO
EM MÍDIAS DIGITAIS
62% MOBILE
38% DESKTOP
COMO O USUÁRIO GASTA SEU TEMPO
NAS PLATAFORMAS MOBILE
87% APPS
13% BROWSER
MÉDIA DE MINUTOS POR MÊS POR
VISITANTE
201.8 APPS
10.9 BROWSER
COMO O USUÁRIO GASTA SEU TEMPO
ENTRE OS APLICATIVOS INSTALADOS
80%
TOP 3
VISITANTES ÚNICOS MENSAIS (MM)
3.3 APPS
8.9 MOBILE WEB
POR QUE USUÁRIOS FICAM
MAIS TEMPO NOS APPS?
POR QUE MOBILE WEB
POSSUI MAIS VISITANTES
ÚNICOS?
PROGRESSIVE WEB APP
= MOBILE WEB
SUPERPODERES DE APP
WEB + APP = PROGRESSIVE WEB APP
Progressive - Pode evoluir gradativamente e deve funcionar mesmo
quando o browser do usuár...
WEB + APP = PROGRESSIVE WEB APP
App-like - UX baseada em mobile apps. Construída no modelo app shell.
Fresh - sempre atual...
Re-engageable - permite realizar o engajamento de usuários através de
push notifications multi-plataforma.
Installable - p...
COMO FAZER
PROGRESSIVAMENTE?
Web App Manifest - manifest.json
{
"lang": "pt-BR",
"name": "Mobile Dev BH",
"short_name": "PWA-MDevBH",
"icons": [{
"src"...
App Shell
https://mobiledevbh-appshell.firebaseapp.com/
Service Workers
Cache Storage e IndexedDB
Armazenamento local no browser
Base para funcionamento de cache com os
ServiceWorkers
Cache Stor...
Web Push Notifications
Necessita de aprovação (opt-in) do usuário no primeiro uso
Baixo custo para realização de engajamen...
RECEBA UM PUSH
https://mobiledevbh-push.firebaseapp.com
OBRIGADO!
Próximos SlideShares
Carregando em…5
×

Progressive Web Apps - MeetUp MobileDevBH

240 visualizações

Publicada em

Apresentação sobre ProgressiveWebApps feita no MeetUp da comunidad MobileDevBH no dia 21/07/2016.
Autor: Rafael Schettino.

Publicada em: Celular
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
240
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Progressive Web Apps - MeetUp MobileDevBH

  1. 1. PROGRESSIVE WEB APPS MeetUp Mobile Dev BH Rafael Schettino Minutrade @rafaelschett
  2. 2. OS NÚMEROS NÃO MENTEM...
  3. 3. COMO O USUÁRIO GASTA SEU TEMPO EM MÍDIAS DIGITAIS 62% MOBILE 38% DESKTOP
  4. 4. COMO O USUÁRIO GASTA SEU TEMPO NAS PLATAFORMAS MOBILE 87% APPS 13% BROWSER
  5. 5. MÉDIA DE MINUTOS POR MÊS POR VISITANTE 201.8 APPS 10.9 BROWSER
  6. 6. COMO O USUÁRIO GASTA SEU TEMPO ENTRE OS APLICATIVOS INSTALADOS 80% TOP 3
  7. 7. VISITANTES ÚNICOS MENSAIS (MM) 3.3 APPS 8.9 MOBILE WEB
  8. 8. POR QUE USUÁRIOS FICAM MAIS TEMPO NOS APPS?
  9. 9. POR QUE MOBILE WEB POSSUI MAIS VISITANTES ÚNICOS?
  10. 10. PROGRESSIVE WEB APP = MOBILE WEB SUPERPODERES DE APP
  11. 11. WEB + APP = PROGRESSIVE WEB APP Progressive - Pode evoluir gradativamente e deve funcionar mesmo quando o browser do usuário não der suporte a algum recurso Responsive - Deve se ajustar adequadamente às dimensões de tela dos dispositivos Connection Independent - Com a ajuda dos service workers, deve funcionar off-line ou em conexões de baixa velocidade
  12. 12. WEB + APP = PROGRESSIVE WEB APP App-like - UX baseada em mobile apps. Construída no modelo app shell. Fresh - sempre atualizado, com ajuda dos service workers. Safe - entregues através de HTTPS. Discoverable - facilmente encontrado pelos serviços de busca, com a criação do arquivo manifest.json
  13. 13. Re-engageable - permite realizar o engajamento de usuários através de push notifications multi-plataforma. Installable - permite aos usuários adicionar o web app na tela inicial e abrir como se fosse um app nativo sem precisar de passar pelo Google Play. Safe - entregues através de HTTPS. Linkable - fácil de compartilhar e acessar através de URL WEB + APP = PROGRESSIVE WEB APP
  14. 14. COMO FAZER PROGRESSIVAMENTE?
  15. 15. Web App Manifest - manifest.json { "lang": "pt-BR", "name": "Mobile Dev BH", "short_name": "PWA-MDevBH", "icons": [{ "src": "app/assets/icon64.png", "sizes": "64x64", "type": "image/png" },{ "src": "app/assets/icon128.png", "sizes": "128x128", "type": "image/png" }], "start_url": "/?from=homescreen", "display": "fullscreen", "theme_color": "#3F51B5", "background_color": "white" } https://mobiledevbh-manifest.firebaseapp.com/
  16. 16. App Shell https://mobiledevbh-appshell.firebaseapp.com/
  17. 17. Service Workers
  18. 18. Cache Storage e IndexedDB Armazenamento local no browser Base para funcionamento de cache com os ServiceWorkers Cache Storage: armazenamento de requisições e respostas HTTP IndexedDB: banco de dados de chave/valor que armazena JSON
  19. 19. Web Push Notifications Necessita de aprovação (opt-in) do usuário no primeiro uso Baixo custo para realização de engajamento e comunicação com o usuário Devem ser oportunas, precisas e relevantes
  20. 20. RECEBA UM PUSH https://mobiledevbh-push.firebaseapp.com
  21. 21. OBRIGADO!

×