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!