Progressive Web Apps

Embed Size (px)

Text of Progressive Web Apps

  • Progressive Web Apps

    Kevin DantasDeveloper Full-stack

  • PROGRESSIVE WEB APP

    OfflineFirst

    PerformanceOtimizada

    PushNotification

    ConexoSegura

    CarregamentoInstantneo

  • PERFORMANCEOTIMIZADA

    60FPS

  • CONEXOSEGURA

  • OFFLINEFIRST

  • CARREGAMENTOINSTANTNEO

  • ENGAGING

  • {JSON}

    HTTPS/2

  • CASES

    https://pwa.rocks

  • 76% AUMENTO NAS CONVERSES

  • 76% AUMENTO NAS CONVERSES14% 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 so feitaspara o mesmo dia

  • 3x mais usurios 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 estticos

    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 estticos

    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 frequncia 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

  • Aquisio Engajamento Converso Reteno

    Accelerated Mobile Pages

    Progressive Web Apps

  • Aquisio Engajamento Converso Reteno

    Accelerated Mobile Pages

    Progressive Web Apps

    Push Notifications

  • Aquisio Engajamento Converso Reteno

    Accelerated Mobile Pages

    Progressive Web Apps

    Push Notifications

    Seamless Sign-In

    One Tap Checkout

  • Lighthouse

  • Obrigado!

    Kevin DantasDeveloper Full-stack