Progressive Web Apps - MeetUp MobileDevBH
-
Upload
rafael-schettino -
Category
Mobile
-
view
234 -
download
1
Transcript of Progressive Web Apps - MeetUp MobileDevBH
![Page 1: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/1.jpg)
PROGRESSIVE WEB APPSMeetUp Mobile Dev BH
Rafael SchettinoMinutrade
@rafaelschett
![Page 2: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/2.jpg)
OS NÚMEROS NÃO MENTEM...
![Page 3: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/3.jpg)
COMO O USUÁRIO GASTA SEU TEMPO EM MÍDIAS DIGITAIS
62% MOBILE38% DESKTOP
![Page 4: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/4.jpg)
COMO O USUÁRIO GASTA SEU TEMPO NAS PLATAFORMAS MOBILE
87% APPS 13% BROWSER
![Page 5: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/5.jpg)
MÉDIA DE MINUTOS POR MÊS POR VISITANTE
201.8 APPS 10.9 BROWSER
![Page 6: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/6.jpg)
COMO O USUÁRIO GASTA SEU TEMPO ENTRE OS APLICATIVOS INSTALADOS
80% TOP 3
![Page 7: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/7.jpg)
VISITANTES ÚNICOS MENSAIS (MM)
3.3 APPS 8.9 MOBILE WEB
![Page 8: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/8.jpg)
POR QUE USUÁRIOS FICAM MAIS TEMPO NOS
APPS?
![Page 9: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/9.jpg)
POR QUE MOBILE WEB POSSUI MAIS VISITANTES
ÚNICOS?
![Page 10: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/10.jpg)
PROGRESSIVE WEB APP= MOBILE WEBSUPERPODERES DE APP
![Page 11: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/11.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/12.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/13.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/14.jpg)
COMO FAZER PROGRESSIVAMENTE?
![Page 15: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/15.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/16.jpg)
App Shell
https://mobiledevbh-appshell.firebaseapp.com/
![Page 17: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/17.jpg)
Service Workers
![Page 18: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/18.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/19.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/20.jpg)
RECEBA UM PUSH
https://mobiledevbh-push.firebaseapp.com
![Page 21: Progressive Web Apps - MeetUp MobileDevBH](https://reader036.fdocumentos.com/reader036/viewer/2022062316/589fec8b1a28abf3238b6f1d/html5/thumbnails/21.jpg)
OBRIGADO!