Desmistificando Progressive Web Apps - PWA

2. Stefan Horochovec
• Co-Founder e Chief Technology Officer
Kepha – Digital Business Experts
• Co-Founder e Arquiteto de Soluções
Previseme – HelpDesk
• Especialista em Engenharia de Software e Gestão de Projetos;
• Instrutor/Professor/Palestrante/Autor;
• Twitter: @horochovec
• Github: @horochovec
• Blogs: http://www.horochovec.com.br/

6. 2016

7. 2017

8. Cenário Mobile

9. Número de usuários (milhões)
0
500
1000
1500
2000
2500
2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile x Desktop
Mobile Desktop
Source: comScore Mobile Metrix, June 2015

10. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

11. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

12. de TODO tempo gasto em um smarphone é utilizando até 5 aplicativos

13. Progressive Web Apps

14. Aplicações via browser
• Cross-Platform x Cross-Browser;
• Deploy Facilitado;
• Atualização facilitada;
• Disponível para mecanismos de pesquisas (aka Google);
• Compartilhamento de Links de forma rápida;
• Possibilidade de Bookmarks – “Talvez”;

15. Cenário Atual – Aplicativos
• Descobrir que o aplicativo existe na Loja Virtual ou clicar em um link no rodapé
de um website que você já está navegando;
• Efetuar o download (2G, 3G, 4G, Wi-Fi, Lie-Fi, etc);
• Se cadastrar quando necessário;
• Visualizar praticamente a mesma coisa que você já estava visualizando....
• Compartilhar conteúdo via print-screen em redes sociais, ou integrações com
novos privilégios;

16. Cenário ”Esperado”
• Não ter a necessidade de instalar MAIS um aplicativo em seu device;
• Aplicações Web com maior responsividade;
• Segurança nas informações;
• Independência de conexão - Suporte off-line;
• Always updated;
• SEO-friendly;
• Compartilhamento de conteúdo (Links);

17. Grandes vantagens de Apps
• Ícone na Home-screen – “Talvez ?”;
• Splash Screen – Agregando valor a marca;
• Suporte off-line – “Nem sempre....”;
• Push Notification;
• Acesso ao hardware do dispositivo;

18. Como reverter as grandes
vantagens de uma aplicação
instalada via Loja Virtual?

19. Progressive Web Apps X Aplicações Nativas
• Permite instalação no device através de seu navegador;
• Funciona perfeitamente bem sem conexões ou com conexões lentas;
• Push Notifications;
• Splash Screens;
• Renderização em 60fps;
• Segurança garantida pois só funciona via httpS;

20. OK! Como eu faço isso?!?

21. Receita para uma Progressive Web App
• Application Shell;
• App Manifest;
• Service Workers;
• httpS;

31. App Manifest
• Arquivo de configuração escrito em JSON;
• Responsável por configurar:
• Nome do aplicativo na home;
• Iconografia;
• SplashScreen;
• Theme Color;
• Full Screen;
• Orientação da tela;

32. App Manifest
{
"name": "Nome do aplicativo",
"short_name": "Nome reduzido",
"icons": [{
”src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png”
}],
"start_url": "/index.html",
"display": ”fullscreen",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2”
}

33. Service Workers
• Javascript que é executado em background no dispositivo móvel;

34. Registro Service Worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(’service-worker.js’, {
scope: ’/’
})
.then(() => console.log('service worker instalado'))
.catch(err => console.log('Erro', err));
}
</script>

35. Event Listeners - install
this.addEventListener('install', function(event){
event.waitUntil(
caches
.open('tdc-first-cache')
.then(function(cache) {
return cache.addAll([
'./build/main.js',
'./build/main.css’
]);
})
.then(function() {
console.log('Service worker ativo, e cache pré-definido');
})
);
});

36. Event Listeners - activate
this.addEventListener('activate', function(event) {
console.log('[ServiceWorker] Activate');
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== 'tdc-first-cache') {
console.log('[ServiceWorker] Removido', key);
return caches.delete(key);
}
}));
})
);
});

37. Event Listeners – fetch (Requisições HTTP)
this.addEventListener(’fetch', function(event){
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});

38. Notifications
if ('Notification' in window) {
Notification.requestPermission(function(result) {
console.log('Notification status: ', result)
});
if (Notification.permission == 'granted’) {
navigator.serviceWorker.getRegistration()
.then(function(registration) {
var message = {
body : 'Mensagem do corpo',
}
registration.showNotification('Teste', message);
});
}
}

39. Notifications

40. HTTPS
Confiável Integridade Privacidade

41. Progressive Web Apps

42. Experiência do usuário
Confiável Rápida Envolvente

43. Experiência do usuário
Confiável

44. Experiência do usuário
Rápida
53% dos usuários abandonam um site que
demora mais que 3 segundos para carregar

45. Experiência do usuário
Envolvente
• Ícone na home-screen;
• Full-screen;
• Themas;
• Orientação;
• Notificações;

47. Konga.com

54. stefan@kepha.com.br