Download pdf - Progressive Web Apps

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





Push Notifications




Push Notifications

Seamless Sign-In

One Tap Checkout

Lighthouse

Obrigado!

Kevin DantasDeveloper Full-stack