Progressive Web Apps - MeetUp MobileDevBH

21
PROGRESSIVE WEB APPS MeetUp Mobile Dev BH Rafael Schettino Minutrade @rafaelschett

Transcript of Progressive Web Apps - MeetUp MobileDevBH

Page 1: Progressive Web Apps - MeetUp MobileDevBH

PROGRESSIVE WEB APPSMeetUp Mobile Dev BH

Rafael SchettinoMinutrade

@rafaelschett

Page 2: Progressive Web Apps - MeetUp MobileDevBH

OS NÚMEROS NÃO MENTEM...

Page 3: Progressive Web Apps - MeetUp MobileDevBH

COMO O USUÁRIO GASTA SEU TEMPO EM MÍDIAS DIGITAIS

62% MOBILE38% DESKTOP

Page 4: Progressive Web Apps - MeetUp MobileDevBH

COMO O USUÁRIO GASTA SEU TEMPO NAS PLATAFORMAS MOBILE

87% APPS 13% BROWSER

Page 5: Progressive Web Apps - MeetUp MobileDevBH

MÉDIA DE MINUTOS POR MÊS POR VISITANTE

201.8 APPS 10.9 BROWSER

Page 6: Progressive Web Apps - MeetUp MobileDevBH

COMO O USUÁRIO GASTA SEU TEMPO ENTRE OS APLICATIVOS INSTALADOS

80% TOP 3

Page 7: Progressive Web Apps - MeetUp MobileDevBH

VISITANTES ÚNICOS MENSAIS (MM)

3.3 APPS 8.9 MOBILE WEB

Page 8: Progressive Web Apps - MeetUp MobileDevBH

POR QUE USUÁRIOS FICAM MAIS TEMPO NOS

APPS?

Page 9: Progressive Web Apps - MeetUp MobileDevBH

POR QUE MOBILE WEB POSSUI MAIS VISITANTES

ÚNICOS?

Page 10: Progressive Web Apps - MeetUp MobileDevBH

PROGRESSIVE WEB APP= MOBILE WEBSUPERPODERES DE APP

Page 11: Progressive Web Apps - MeetUp MobileDevBH

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

Page 12: Progressive Web Apps - MeetUp MobileDevBH

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

Page 13: Progressive Web Apps - MeetUp MobileDevBH

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

Page 14: Progressive Web Apps - MeetUp MobileDevBH

COMO FAZER PROGRESSIVAMENTE?

Page 15: Progressive Web Apps - MeetUp MobileDevBH

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/

Page 16: Progressive Web Apps - MeetUp MobileDevBH

App Shell

https://mobiledevbh-appshell.firebaseapp.com/

Page 17: Progressive Web Apps - MeetUp MobileDevBH

Service Workers

Page 18: Progressive Web Apps - MeetUp MobileDevBH

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

Page 19: Progressive Web Apps - MeetUp MobileDevBH

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

Page 20: Progressive Web Apps - MeetUp MobileDevBH

RECEBA UM PUSH

https://mobiledevbh-push.firebaseapp.com

Page 21: Progressive Web Apps - MeetUp MobileDevBH

OBRIGADO!