Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebApps Offline com ServiceWorkers

joseli.to
January 13, 2016

WebApps Offline com ServiceWorkers

Hangout - GDG BH

joseli.to

January 13, 2016
Tweet

More Decks by joseli.to

Other Decks in Programming

Transcript

  1. JOSELITO.NINJA
    WEB APPS
    OFFLINE
    Hangout - GDG Belo Horizonte

    View full-size slide

  2. @joselitojunior1

    View full-size slide

  3. MOBILE
    @joselitojunior1

    View full-size slide

  4. NATIVO v

    WEB
    @joselitojunior1

    View full-size slide

  5. NATIVO v

    WEB
    @joselitojunior1

    View full-size slide

  6. @joselitojunior1

    View full-size slide

  7. @joselitojunior1
    PROGRESIVE

    APPS

    View full-size slide

  8. @joselitojunior1
    PROGRESIVE

    APPS offline first
    responsive
    fresh content
    https safe
    indexable
    installable
    linkable
    engageble

    View full-size slide

  9. @joselitojunior1
    PROGRESIVE

    APPS offline first
    responsive
    fresh content
    https safe
    indexable
    installable
    linkable
    engageble

    View full-size slide

  10. Olá, Joselito
    • Modelo e atriz
    • Instrutor, palestrante
    • Ex-BBB
    • GDG Organizer
    • Fã de F1
    • Resolvedor® de problemas
    • #chrominho

    View full-size slide

  11. @joselitojunior1
    OFFLINE APPS

    View full-size slide

  12. @joselitojunior1
    hIps://speakerdeck.com/joselitojunior1

    View full-size slide

  13. @joselitojunior1
    OFFLINE ===

    USER

    EXPERIENCE

    View full-size slide

  14. SERVICE

    WORKERS
    @joselitojunior1

    View full-size slide

  15. @joselitojunior1

    View full-size slide

  16. SERVICE

    WORKERS
    @joselitojunior1
    Registro do SW no navegador

    View full-size slide

  17. @joselitojunior1
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/ssw.js',
    { scope: '/' }).then(function(reg) {
    // Service Worker registrado!
    }).catch(function(error) {
    // Não foi possível registrar o Service Worker
    console.log(error);
    });
    };

    View full-size slide

  18. @joselitojunior1
    this.addEventListener('install', function(event) {
    event.waitUntil(
    caches.open('cache-versao-1').then(function(cache) {
    return cache.addAll([
    '/public/',
    '/public/index.html',
    '/public/estilo.css',
    '/public/app.js',
    '/public/image-list.js',
    '/public/info.json'
    ]);
    })
    );
    });

    View full-size slide

  19. @joselitojunior1
    this.addEventListener('fetch', function(event) {
    event.respondWith(
    // Mágica!
    );
    });

    View full-size slide

  20. @joselitojunior1
    this.addEventListener('fetch', function(event) {
    event.respondWith(
    // Response()
    );
    });

    View full-size slide

  21. SERVICE

    WORKERS
    @joselitojunior1
    Response()

    View full-size slide

  22. @joselitojunior1
    new Response('Hello from GDG Humildão');

    View full-size slide

  23. @joselitojunior1
    new Response('Hello from GDG Humildão!', {
    headers: { 'Content-Type': 'text/html' }
    })

    View full-size slide

  24. @joselitojunior1
    fetch(event.request)

    View full-size slide

  25. @joselitojunior1
    caches.match('/fallback.html');

    View full-size slide

  26. @joselitojunior1
    caches.match('/fallback.html');

    View full-size slide

  27. SERVICE

    WORKERS
    @joselitojunior1
    onfetch()

    View full-size slide

  28. @joselitojunior1
    self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request).then(function(response) {
    return response || fetch(event.request);
    })
    );
    });

    View full-size slide

  29. @joselitojunior1
    self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
    return cache.match(event.request).then(function
    (response) {
    return response ||
    fetch(event.request).then(function(response) {
    cache.put(event.request, response.clone());
    return response;
    });
    });
    })
    );
    });

    View full-size slide

  30. @joselitojunior1
    self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
    return
    cache.match(event.request).then(function(response) {
    var fetchPromise =
    fetch(event.request).then(function(networkResponse) {
    cache.put(event.request, networkResponse.clone());
    return networkResponse;
    })
    return response || fetchPromise;
    })
    })
    );
    });

    View full-size slide

  31. SERVICE

    WORKERS
    @joselitojunior1
    onsync()

    View full-size slide

  32. @joselitojunior1
    self.addEventListener('sync', function(event) {
    if (event.id == 'update-leaderboard') {
    event.waitUntil(
    caches.open('mygame-dynamic').then(function(cache) {
    return cache.add('/leaderboard.json');
    })
    );
    }
    });

    View full-size slide

  33. SERVICE

    WORKERS
    @joselitojunior1
    onactivate()

    View full-size slide

  34. @joselitojunior1
    self.addEventListener('activate', function(event) {
    // Service Worker funcionando!
    });

    View full-size slide

  35. @joselitojunior1
    self.onactivate = function(event) {
    event.waitUntil(
    caches.keys().then(function(cacheNames) {
    return Promise.all(
    cacheNames.map(function(cacheName) {
    if (expectedCaches.indexOf(cacheName) == -1) {
    return caches.delete(cacheName);
    }
    })
    );
    })
    );
    };

    View full-size slide

  36. SERVICE

    WORKERS
    @joselitojunior1
    Debugando

    View full-size slide

  37. @joselitojunior1

    View full-size slide

  38. SERVICE

    WORKERS
    @joselitojunior1
    Exemplos

    View full-size slide

  39. @joselitojunior1
    Wikipedia OTine

    github.com/jakearchibald/oTine-wikipedia

    View full-size slide

  40. @joselitojunior1
    DevFest Nordeste

    github.com/devfestne/2015-site

    View full-size slide

  41. Obrigado (:
    JOSELITO.NINJA
    @joselitojunior1

    View full-size slide