Progressive Web Apps (PWAs) são sites desenvolvidos com HTML, CSS e JS que fornecem experiências de aplicativo nativo no navegador. PWAs devem ser rápidos, fornecer boa experiência do usuário e funcionar online e offline. Service workers e manifest.json permitem que PWAs sejam rápidos e funcionem offline.

1. Progressive Web Apps
- Willian Marques

2. Sobre
Willian Marques
Técnico em Informática – Etec Jales
2012 ~ 2013.
Whoiam
Sistemas para Internet – Fatec Jales
2013 ~ 2016.
Especialista em Engenharia de Sistemas
– ESAB
2016 ~ 2017.
Mestrado em Ciência da
Computação – Unesp Rio Preto
(17) 99221-4738
willian.goncalves4@gmail.com
“Você não é
derrotado quando
você perde, mas
sim quando
desiste”
Vegeta (DBZ)2019 ~ 2020.

3. O que é um PWA?
Definição:
Aplicações Web Progressivas (PWA) são
sites desenvolvidos utilizando
tecnologias web (HTML, CSS, JS) que
entregam experiências aos usuários
diretamente do navegador – toda a
aparência e recursos dos sites são
idênticos ao do aplicativo nativo, porém
os PWAs não precisam de instalação.

4. Os 4 pilares do PWA
Rápido Experiência do
Usuário
Confiável Engajamento

5. “53 % dos usuários abandonam
os sites que demoram mais que
3 segundos para carregar”
Rápido
“Tempo é dinheiro”
Fonte: DoubleClick, The need for mobile speed,
setembro 2016.

6. O PWA deve funcionar exatamente
igual (só que melhor) a qualquer
aplicação nativa.
Experiência
do Usuário
• Ícone na tela principal;
• Tela de carregamento;
• Recursos de
Hardware: Camera,
sons, etc;
• APIS: Controle da
Música na tela do App,
Pagamento Facilitado,
Notificações offline;

7. Mesmo Offline o PWA deve
mostrar informações ao seu
usuário!!
“Never show the Downasaur”
Confiável
“24 horas por dia, 7 dias
por semana, conectado
ou desconectado da
rede”

8. “Usar as ferramentas certas de
um jeito certo, e de maneira
bonita”
Engajamento
“O usuário precisa voltar”

9. Estudo de Caso
Twitter Lite

12. • Aumento de 65% das visualizações por
sessão…
• Aumento de 75% de envio de Tweets
• O projeto do Twitter Lite foi um sucesso!
• O cliente Twitter Lite tem mais acessos do que
qualquer outro cliente do Twitter.

13. Service Workers

14. Service Workers
Web Server
Service Workers
Cache

15. Registrando um Service Worker
Fonte: Google Dev

16. SW.JS
Fonte: Google Dev

17. Compatibilidade do Service Worker
nos navegadores
Fonte: Caniuse

18. Manifest.JSON

19. Propriedades do Manifest.json
Fonte: Maximilian, 2019

20. Propriedades do Manifest.json
Fonte: Google Dev

21. Referências
Maximilian Schwarzmüller Matt Gaunt

22. Obrigado!
Willian Marques
17 992214738
willian.goncalves4@gmail.com