WebApps Offline com ServiceWorkers

Hangout - GDG BH

Transcript

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

   View Slide

2. @joselitojunior1
   

   View Slide

3. MOBILE
   @joselitojunior1
   

   View Slide

4. NATIVO v

   WEB
   @joselitojunior1
   

   View Slide

5. NATIVO v

   WEB
   @joselitojunior1
   

   View Slide

6. @joselitojunior1
   

   View Slide

7. @joselitojunior1
   PROGRESIVE

   APPS
   

   View Slide

8. @joselitojunior1
   PROGRESIVE

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

   View Slide

9. @joselitojunior1
   PROGRESIVE

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

   View Slide

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

    View Slide

11. @joselitojunior1
    OFFLINE APPS
    

    View Slide

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

    View Slide

13. @joselitojunior1
    OFFLINE ===

    USER

    EXPERIENCE
    

    View Slide

14. SERVICE

    WORKERS
    @joselitojunior1
    

    View Slide

15. @joselitojunior1
    

    View Slide

16. SERVICE

    WORKERS
    @joselitojunior1
    Registro do SW no navegador
    

    View 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 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 Slide

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

    View Slide

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

    View Slide

21. SERVICE

    WORKERS
    @joselitojunior1
    Response()
    

    View Slide

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

    View Slide

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

    View Slide

24. @joselitojunior1
    fetch(event.request)
    

    View Slide

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

    View Slide

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

    View Slide

27. SERVICE

    WORKERS
    @joselitojunior1
    onfetch()
    

    View Slide

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

    View 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 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 Slide

31. SERVICE

    WORKERS
    @joselitojunior1
    onsync()
    

    View 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 Slide

33. SERVICE

    WORKERS
    @joselitojunior1
    onactivate()
    

    View Slide

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

    View 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 Slide

36. SERVICE

    WORKERS
    @joselitojunior1
    Debugando
    

    View Slide

37. @joselitojunior1
    

    View Slide

38. SERVICE

    WORKERS
    @joselitojunior1
    Exemplos
    

    View Slide

39. @joselitojunior1
    Wikipedia OTine

    github.com/jakearchibald/oTine-wikipedia
    

    View Slide

40. @joselitojunior1
    DevFest Nordeste

    github.com/devfestne/2015-site
    

    View Slide

41. Obrigado (:
    JOSELITO.NINJA
    @joselitojunior1
    

    View Slide