Slide 1

Slide 1 text

JOSELITO.NINJA WEB APPS OFFLINE Hangout - GDG Belo Horizonte

Slide 2

Slide 2 text

@joselitojunior1

Slide 3

Slide 3 text

MOBILE @joselitojunior1

Slide 4

Slide 4 text

NATIVO v
 WEB @joselitojunior1

Slide 5

Slide 5 text

NATIVO v
 WEB @joselitojunior1

Slide 6

Slide 6 text

@joselitojunior1

Slide 7

Slide 7 text

@joselitojunior1 PROGRESIVE
 APPS

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@joselitojunior1 OFFLINE APPS

Slide 12

Slide 12 text

@joselitojunior1 hIps://speakerdeck.com/joselitojunior1

Slide 13

Slide 13 text

@joselitojunior1 OFFLINE ===
 USER
 EXPERIENCE

Slide 14

Slide 14 text

SERVICE
 WORKERS @joselitojunior1

Slide 15

Slide 15 text

@joselitojunior1

Slide 16

Slide 16 text

SERVICE
 WORKERS @joselitojunior1 Registro do SW no navegador

Slide 17

Slide 17 text

@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); }); };

Slide 18

Slide 18 text

@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' ]); }) ); });

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

SERVICE
 WORKERS @joselitojunior1 Response()

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@joselitojunior1 new Response('

Hello from GDG Humildão!

', { headers: { 'Content-Type': 'text/html' } })

Slide 24

Slide 24 text

@joselitojunior1 fetch(event.request)

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

SERVICE
 WORKERS @joselitojunior1 onfetch()

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

@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; }); }); }) ); });

Slide 30

Slide 30 text

@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; }) }) ); });

Slide 31

Slide 31 text

SERVICE
 WORKERS @joselitojunior1 onsync()

Slide 32

Slide 32 text

@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'); }) ); } });

Slide 33

Slide 33 text

SERVICE
 WORKERS @joselitojunior1 onactivate()

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

@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); } }) ); }) ); };

Slide 36

Slide 36 text

SERVICE
 WORKERS @joselitojunior1 Debugando

Slide 37

Slide 37 text

@joselitojunior1

Slide 38

Slide 38 text

SERVICE
 WORKERS @joselitojunior1 Exemplos

Slide 39

Slide 39 text

@joselitojunior1 Wikipedia OTine
 github.com/jakearchibald/oTine-wikipedia

Slide 40

Slide 40 text

@joselitojunior1 DevFest Nordeste
 github.com/devfestne/2015-site

Slide 41

Slide 41 text

Obrigado (: JOSELITO.NINJA @joselitojunior1