O documento discute as Progressive Web Apps (PWAs) e seus benefícios. Ele descreve como as PWAs podem fornecer uma experiência semelhante à de um aplicativo nativo usando tecnologias da web como service workers e o manifesto da web app. Exemplos de empresas que tiveram sucesso com PWAs são apresentados, mostrando melhorias como maior tempo de uso do site, taxa de reengajamento e menor uso de dados.

1. O poder das
PROGRESSIVE WEB APPS
Pedro Barros

2. Vamos nos conhecer!?

3. Pedro Barros - 21 anos
Maceió/AL
● Desenvolvedor em Unimed Maceió;
● Formado Técnico em Informática;
● Graduado em Análise e
Desenvolvimento de Sistemas;
● Pós-graduando em Engenharia de
Software.
Redes sociais
pedroebarros
ped.barros
pedbarros
pedbarros

4. O design responsivo indica uma técnica
de design web para a criação de sites
capazes de se adaptar automaticamente ao
dispositivo com o qual eles são exibidos
(computadores com diferentes resoluções,
tablets, smartphones, telefones
celulares, web tv ), minimizando a
necessidade do usuário redimensionar e
percorrer o conteúdo.
https://it.wikipedia.org/wiki/Design_responsivo

10. Qual o cenário atual?
● Buscar o app na Loja Virtual ou clicar em um
link no rodapé de um website que você já está
navegando;
● Verificar se tem espaço no smartphone;
● Efetuar o download (2G, 3G, 4G, Wi-Fi, etc);
● Iniciar o processo de instalação;
● Cadastrar quando é necessário;
● Utilizar praticamente a mesma coisa que estava
utilizando...;
● Compartilhar conteúdo via print-screen em redes
sociais.

11. 80%de TODO tempo gasto em um smartphone é utilizando até 5 apps
66% 57,5% 32,4% 20,4% 12,3%
Julho 2017

12. De acordo com o Comscore Mobile App Report, mais de 50% dos
usuários de smartphones da América, não baixam nenhum
aplicativo por mês.
Isso significa, que o tempo em que nosso telefone costumava
ser preenchido com aplicativos está desaparecendo lentamente!
https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report

13. Qual seria o cenário dos meus
sonhos?
● Acabar com a instalação dos aplicativos
nos devices;
● Aplicativos web com uma experiência
agradável;
● Segurança dos dados;
● Suporte Offline
● Sempre atualizado;
● Utilização de links para compartilhar
conteúdo.

14. Progressive Web App usa a modernidade da web
possibilitando uma experiência de um aplicativo
nativo.
Addy Osmani - Engineering Manager at Google

15. Jobs já tinha uma visão desde 2007...
Vocês já tem tudo o que precisam se querem
saber como desenvolver aplicativos para o
iPhone hoje: basta usar os padrões modernos da
web.

16. As PWAs são formadas por:
● API abertas da WEB;
● Service Workers;
● Web Manifest;
● Boas práticas (acessibilidade, UX, responsividade,
performance, etc).

17. Como funciona?

18. PWA
● Instaláveis
● Responsivo
● Visual Appficado
● Offline
● Seguro (https)
● Indexável
● Linkável
● Features:
○ Splash Screen
○ Push Notification
○ Geolocation
○ BackgroundSync
○ Vibration

19. Service Workers
● É um script que seu navegador
executa em segundo plano;
● Tem um ciclo de vida totalmente
separado da página da Web;
● É baseado em código JavaScript
puro;
● Interceptar requisições;
● Controle do cache;
● Trabalhar Offline.

20. Lifecycle Service Workers

21. https://jakearchibald.github.io/isserviceworkerready/

22. Necessidades básicas humana
INTERNET

23. A web “nativa”

24. https://pwa.rocks/

25. Flipkart
● Maior e-commerce da Índia;
● 400% a mais tempo utilizando o
site (PWA);
● 3x mais tempo gasto no site
● 40% maior taxa de reengajamento
● 3x menor uso de dados
https://developers.google.com/web/showcase/2016/flipkart

26. Konga
● Um site de comércio eletrônico líder
na Nigéria
● 92% a menos no gasto dos dados móveis
para carregar a tela inicial;
● 82% a menos no gasto dos dados móveis
para concluir a primeira transação;
https://developers.google.com/web/showcase/2016/konga

27. Application Shell

28. E COMO FAZ?

30. Navegadores que não
suportam Service Workers
simplesmente não saberá
de sua existência

31. Mais simples que dormir...
if ('serviceWorker' in navigator) {
}
navigator.serviceWorker
.register('/service-worker.js')
.then(function (retorno) {
console.log('Sucesso!');
})
.catch(function (error) {
console.log('Error:'+ error);
});

32. service-worker.js
var cacheVersion = 'pedro01';
self.addEventListener ('install', function (event) {
});
console .log('[SW] Install' );
event.waitUntil(
);
caches.open(cacheVersion )
.then(function (cache) {
console .log('[SW] Carregando application shell' );
return cache.addAll(filesToCache );
})
var filesToCache = [
"index.html" ,
"css/materialize.css" ,
"css/style.css" ,
"js/init.js" ,
"js/materialize.js"
];
self.addEventListener ('activate', function (event) {
});
console .log('[SW] Activate' );
event.waitUntil(
);
caches.keys().then(function (keyList) {
return Promise.all(keyList.map(function (key) {
}));
})
if (key !== cacheVersion ) {
console .log('[SW] Removendo cache antigo' , key);
return caches.delete(key);
}
self.addEventListener ('fetch', function (event) {
});
console.log('[SW] Fetch' , event.request.url);
event.respondWith (
caches.match(event.request).then(function (response) {
return response
})
);Application Shell
|| fetch(event.request);
Offline First

34. E PARA DAR “O ROSTO” DE UM
APP?

35. Web App Manifest
Simples, simples, simples...

36. Seu amigo “Lighthouse”
npm install -g lighthouse
lighthouse https://arahackerday-4ca60.firebaseapp.com

37. Agilize seu tempo com o Web App Manifest
Generator
https://app-manifest.firebaseapp.com/

38. Deixe os caras fazerem por você
https://www.pwabuilder.com/

39. No desktop

42. No mobile

43. No mobile

44. Projeto
● https://github.com/pedbarros/arahackerday-pwa

45. PWA é “só” WEB e mobile?

46. Elas estão desbravando tudo!
https://maps.google.com?force=pwa

47. O que você está esperando?

48. Referências
● https://developers.google.com/web/progressive-web-apps/
● https://medium.com/tableless/introdu%C3%A7%C3%A3o-aos-pr
ogressive-web-apps-ad47ba24cddb
● https://jakearchibald.github.io/isserviceworkerready/
● https://brasil.uxdesign.cc/o-que-s%C3%A3o-progressive-we
b-apps-86e1b5306051
● https://en.wikipedia.org/wiki/Progressive_web_app

50. Perguntas
O que as PWAs são compostas?
R: API abertas da WEB;
Service Workers;
Web Manifest;
Boas práticas (acessibilidade,
UX, responsividade, performance,
etc).
Qual o principal objetivo das
PWA?
R: Garantir uma ótima
usabilidade para os usuários,
podendo que o mesmo possa sentir
está dentro de uma aplicação
nativa, mas utilizando o melhor
da web.

51. Perguntas
O que acontece se o navegador não
suportar os Service Workers?
R: Não afetará em nada, eles
simplesmente não irão usufruir do
seu “poder”.
Cite 03 características de uma
PWA
R: Instaláveis
Linkável
Offline
Responsivo
Visual Appficado
Seguro (https)
Indexável

52. Perguntas
Para que serve o Web App Manifest?
R: Fornecer informações sobre o aplicativo, propiciando aos usuários
um acesso mais rápido e uma experiência enriquecida.