O documento discute Progressive Web Apps (PWAs), destacando suas características como carregamento instantâneo, desempenho otimizado, conexão segura e capacidade de funcionar offline. Detalha como Service Workers permitem o cache de arquivos estáticos e o carregamento assíncrono de páginas para melhorar a experiência do usuário. Apresenta casos de sucesso de PWAs que aumentaram conversões e engajamento em comparação com sites tradicionais e aplicativos nativos.

1. Progressive Web Apps
Kevin Dantas
Developer Full-stack

2. PROGRESSIVE WEB APP
Offline
First
Performance
Otimizada
Push
Notification
Conexão
Segura
Carregamento
Instantâneo

3. PERFORMANCE
OTIMIZADA
60
FPS

4. CONEXÃO
SEGURA

5. OFFLINE
FIRST

7. CARREGAMENTO
INSTANTÂNEO

8. ENGAGING

9. <XML>
{JSON}
HTTPS/2

10. CASES
https://pwa.rocks

11. 76% AUMENTO NAS
CONVERSÕES

12. 76% AUMENTO NAS
CONVERSÕES
14%
iOS
30%
Android

13. https://ride.lyft.com

14. 5xmais corridas do que
o esperado na web
https://ride.lyft.com

15. 75 MB
17 MB
< 1 MB
Android
App
PWA
Tamanho
App
iOS
App

16. 50%das reservas são feitas
para o mesmo dia

17. 3xmais usuários fazendo
a primeira compra pelo
PWA do que pelo app

18. SERVICE WORKER

21. Ouvindo eventos fetch
if (navigator.serviceWorker) {
navigator.serviceWorker.register(‘/sw.js’)
}
Registrar um Service Worker

22. Criando o cache de arquivos estáticos
self.addEventListener(‘fetch’, evento => {
const url = new URL(event.request.url);
if (url.pathname.endsWith(‘.jpg’)) {
event.respondWith(
fetch(‘minha_imagem.jpg’)
)
}
})

23. Criando o cache de arquivos estáticos
self.addEventListener(‘install’, event => {
event.waitUntil(
caches.open(‘static-v1’)
.then(cache => cache.addAll([
‘/index.html’,
‘/styles.css’
]))
)
})

24. self.addEventListener(‘fetch’, event => {
event.respondWith(
caches.match(event.request)
.then(response =>
response || fetch(event.request)
)
)
})

25. Install Banners

26. Install Banners
- Um service worker registrado no seu site.
- Usar HTTPS.
- Ter frequência de visita.
Requisitos

27. Estrutura
{
"short_name": "Voice Memos,
"name": "Awesome Voice Memos",
"background_color": "#fff",
"icons": [
{
"src": "icon-1x.png",
"type": "image/png",
"sizes": "48x48"
}
],
"start_url": "index.html"
}
Awesome Voice Memos

28. Declarando um manifesto
<link rel="manifest" href="/manifest.webmanifest">

29. Before Install Prompt

30. Criando o cache de arquivos estáticos
var deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) {
console.log('beforeinstallprompt Event fired');
e.preventDefault();
// Guarda o evento para ser dispoarado depois.
deferredPrompt = e;
return false;
});
// Chama o evento de mostrar o prompt
defferedPrompt.prompt();

31. Aquisição Engajamento Conversão Retenção
Accelerated Mobile Pages
Progressive Web Apps

32. Aquisição Engajamento Conversão Retenção
Accelerated Mobile Pages
Progressive Web Apps
Push Notifications

33. Aquisição Engajamento Conversão Retenção
Accelerated Mobile Pages
Progressive Web Apps
Push Notifications
Seamless Sign-In
One Tap Checkout

35. Lighthouse

36. Obrigado!
Kevin Dantas
Developer Full-stack