Progressive Web Apps
Kevin DantasDeveloper Full-stack
PROGRESSIVE WEB APP
OfflineFirst
PerformanceOtimizada
PushNotification
ConexãoSegura
CarregamentoInstantâneo
PERFORMANCEOTIMIZADA
60FPS
CONEXÃOSEGURA
OFFLINEFIRST
CARREGAMENTOINSTANTÂNEO
ENGAGING
<XML>{JSON}
HTTPS/2
CASES
https://pwa.rocks
76% AUMENTO NAS CONVERSÕES
76% AUMENTO NAS CONVERSÕES
14% iOS
30%Android
https://ride.lyft.com
5x mais corridas do que o esperado na web
https://ride.lyft.com
75 MB
17 MB
< 1 MBAndroid
App PWA
TamanhoApp
iOSApp
50%das reservas são feitaspara o mesmo dia
3x mais usuários fazendo a primeira compra peloPWA do que pelo app
SERVICE WORKER
Ouvindo eventos fetch
if (navigator.serviceWorker) { navigator.serviceWorker.register(‘/sw.js’)}
Registrar um Service Worker
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’) ) } })
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’ ])) )})
self.addEventListener(‘fetch’, event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request) ) )})
Install Banners
Install Banners
- Um service worker registrado no seu site.
- Usar HTTPS.
- Ter frequência de visita.
Requisitos
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
Declarando um manifesto
<link rel="manifest" href="/manifest.webmanifest">
Aquisição Engajamento Conversão Retenção
Accelerated Mobile Pages
Progressive Web Apps
Aquisição Engajamento Conversão Retenção
Accelerated Mobile Pages
Progressive Web Apps
Push Notifications
Aquisição Engajamento Conversão Retenção
Accelerated Mobile Pages
Progressive Web Apps
Push Notifications
Seamless Sign-In
One Tap Checkout
Lighthouse
Obrigado!
Kevin DantasDeveloper Full-stack