View
236
Download
1
Category
Preview:
Citation preview
PROGRESSIVE WEB APPSMeetUp Mobile Dev BH
Rafael SchettinoMinutrade
@rafaelschett
OS NÚMEROS NÃO MENTEM...
COMO O USUÁRIO GASTA SEU TEMPO EM MÍDIAS DIGITAIS
62% MOBILE38% 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 WEBSUPERPODERES DE APP
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 recursoResponsive - Deve se ajustar adequadamente às dimensões de tela dos dispositivosConnection Independent - Com a ajuda dos service workers, deve funcionar off-line ou em conexões de baixa velocidade
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
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
COMO FAZER PROGRESSIVAMENTE?
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/
App Shell
https://mobiledevbh-appshell.firebaseapp.com/
Service Workers
Cache Storage e IndexedDB
Armazenamento local no browserBase para funcionamento de cache com os ServiceWorkersCache Storage: armazenamento de requisições e respostas HTTPIndexedDB: banco de dados de chave/valor que armazena JSON
Web Push Notifications
Necessita de aprovação (opt-in) do usuário no primeiro usoBaixo custo para realização de engajamento e comunicação com o usuárioDevem ser oportunas, precisas e relevantes
RECEBA UM PUSH
https://mobiledevbh-push.firebaseapp.com
OBRIGADO!
Recommended