WebApps Offline com ServiceWorkers

Hangout - GDG BH

Transcript

1. JOSELITO.NINJA WEB APPS OFFLINE Hangout - GDG Belo Horizonte
2. @joselitojunior1
3. MOBILE @joselitojunior1
4. NATIVO v
 WEB @joselitojunior1
5. NATIVO v
 WEB @joselitojunior1
6. @joselitojunior1
7. @joselitojunior1 PROGRESIVE
 APPS
8. @joselitojunior1 PROGRESIVE
 APPS offline first responsive fresh content https safe indexable installable linkable engageble
9. @joselitojunior1 PROGRESIVE
 APPS offline first responsive fresh content https safe indexable installable linkable engageble
10. Olá, Joselito • Modelo e atriz • Instrutor, palestrante • Ex-BBB • GDG Organizer • Fã de F1 • Resolvedor® de problemas • #chrominho
11. @joselitojunior1 OFFLINE APPS
12. @joselitojunior1 hIps://speakerdeck.com/joselitojunior1
13. @joselitojunior1 OFFLINE ===
 USER
 EXPERIENCE
14. SERVICE
 WORKERS @joselitojunior1
15. @joselitojunior1
16. SERVICE
 WORKERS @joselitojunior1 Registro do SW no navegador
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); }); };
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' ]); }) ); });
19. @joselitojunior1 this.addEventListener('fetch', function(event) { event.respondWith( // Mágica! ); });
20. @joselitojunior1 this.addEventListener('fetch', function(event) { event.respondWith( // Response() ); });
21. SERVICE
 WORKERS @joselitojunior1 Response()
22. @joselitojunior1 new Response('Hello from GDG Humildão');
23. @joselitojunior1 new Response('<p>Hello from GDG Humildão!</p>', { headers: { 'Content-Type': 'text/html' } })
24. @joselitojunior1 fetch(event.request)
25. @joselitojunior1 caches.match('/fallback.html');
26. @joselitojunior1 caches.match('/fallback.html');
27. SERVICE
 WORKERS @joselitojunior1 onfetch()
28. @joselitojunior1 self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });
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; }); }); }) ); });
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; }) }) ); });
31. SERVICE
 WORKERS @joselitojunior1 onsync()
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'); }) ); } });
33. SERVICE
 WORKERS @joselitojunior1 onactivate()
34. @joselitojunior1 self.addEventListener('activate', function(event) { // Service Worker funcionando! });
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); } }) ); }) ); };
36. SERVICE
 WORKERS @joselitojunior1 Debugando
37. @joselitojunior1
38. SERVICE
 WORKERS @joselitojunior1 Exemplos
39. @joselitojunior1 Wikipedia OTine
 github.com/jakearchibald/oTine-wikipedia
40. @joselitojunior1 DevFest Nordeste
 github.com/devfestne/2015-site
41. Obrigado (: JOSELITO.NINJA @joselitojunior1