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

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

2. OS NÚMEROS NÃO MENTEM...

3. COMO O USUÁRIO GASTA SEU TEMPO
EM MÍDIAS DIGITAIS
62% MOBILE
38% DESKTOP

4. COMO O USUÁRIO GASTA SEU TEMPO
NAS PLATAFORMAS MOBILE
87% APPS
13% BROWSER

5. MÉDIA DE MINUTOS POR MÊS POR
VISITANTE
201.8 APPS
10.9 BROWSER

6. COMO O USUÁRIO GASTA SEU TEMPO
ENTRE OS APLICATIVOS INSTALADOS
80%
TOP 3

7. VISITANTES ÚNICOS MENSAIS (MM)
3.3 APPS
8.9 MOBILE WEB

8. POR QUE USUÁRIOS FICAM
MAIS TEMPO NOS APPS?

9. POR QUE MOBILE WEB
POSSUI MAIS VISITANTES
ÚNICOS?

10. PROGRESSIVE WEB APP
= MOBILE WEB
SUPERPODERES DE APP

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. 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. 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. COMO FAZER
PROGRESSIVAMENTE?

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. App Shell
https://mobiledevbh-appshell.firebaseapp.com/

17. Service Workers

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. 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. RECEBA UM PUSH
https://mobiledevbh-push.firebaseapp.com

21. OBRIGADO!