Offline Web com Service Workers - Sérgio Lopes

OFFLINE WEB COM
SERVICE WORKERS

sergiolopes.org
@sergio_caelum

os primórdios do HTML5 offline
Application Cache API

Minha página offline…
<html manifest="demo.appcache">

O manifesto…
CACHE MANIFEST
/index.html
/imagens/logo.png
/javascript/script.js
/css/estilo.css

O manifesto…
CACHE MANIFEST
/index.html
/imagens/logo.png
/css/estilo.css
NETWORK:
http://www.google-analytics.com/ga.js

O manifesto…
CACHE MANIFEST
/index.html
/imagens/logo.png
/css/estilo.css
NETWORK:
http://www.google-analytics.com/ga.js
FALLBACK:
/img/avatares/ /img/avatar-generico.png

Pronto!
O maravilhoso AppCache entra em ação.

Tem que acertar o mime-type no servidor.

Não posso esquecer nenhuma URL.

Sempre cacheia a página.

Nada pode dar erro 404 ou 500.

Cuidado pra não cachear o manifesto.

Usuário não pode controlar nada.

Impossível escolher o que cachear.

Potencial para detonar o 3G do usuário.

Remover o cache é um parto.

Não posso impedir update automático.

Terrível pra desenvolver e debugar.

Terrível pra desenvolver e debugar. …

Sempre cacheia AppCache a página.
é
Nada pode dar erro limitado 404 ou 500.
e
Impossível chato, escolher complicado.
o que cachear.
Terrível pra desenvolver e debugar. …

http://sergiolopes.org/palestra-appcache-html5-offline/

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Página offline</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
navigator.serviceWorker.register('o-futuro.js');
</script>
</head>
<body>
<h1>Página offline</h1>
</body>
</html>

this.onfetch = function(event) {
console.log(event.request.url);
};

event.respondWith(
new Response("<h1>Página offline!</h1>")
);
};

SERVICE
WORKER
É um Worker orientado a eventos, que controla as
páginas em background. Lá, tudo é assíncrono, e
ele pode interceptar chamadas de rede e usar um
cache de recursos.

JAVASCRIPT COMUM
<script src="script.js" async></script>

JAVASCRIPT COMUM
DOM
CSSOM
LAYOUT
EVENTOS
SCROLL

JAVASCRIPT COMUM
DOM
script
CSSOM
script
LAYOUT
script
EVENTOS
script
SCROLL

WEB WORKERS
<script> new Worker('worker.js'); </script>

WEB WORKERS
DOM
CSSOM
LAYOUT
EVENTOS
SCROLL

WEB WORKERS
script
script
script
script
DOM
CSSOM
LAYOUT
EVENTOS
SCROLL

PÁGINA
#1
web worker A
WEB WORKERS

PÁGINA
#1
web worker A
WEB WORKERS
web worker B

PÁGINA
#1
web worker A
WEB WORKERS
web worker B
PÁGINA
#2
web worker A
web worker B

WEB WORKERS
PÁGINA
#2
web worker A
web worker B

SERVICE WORKER
#1
Service Worker
PÁGINA
#2

SERVICE WORKER
#1
Service Worker

SERVICE WORKER
<script>navigator.serviceWorker.register('sw.js');</Service Worker

PROMISES
navigator.serviceWorker.register('sw.js').then(function(){
console.log('Registrado!');
}, function(erro) {
console.log('Problemas', erro);
});

EVENTOS
this.oninstall = function(event) {
console.log('instalou');
};
this.onactivate = function(event) {
console.log('ativou');
};
event.respondWith(
new Response("<h1>Página offline!</h1>”)
);
};

caches.open('aplicacao').then(function(cache) {
});

cache.add('pg.html');
});

cache.put('pg.html', new Response("Página offline"));
});

cache.add('pg.html');
cache.add('style.css');
});

cache.addAll([
'/index.html',
'/style.css',
'/logo.png',
'/contato.html',
'http://code.jquery.com/jquery-2.1.1.min.js'
]);
})

return cache.addAll([
'/index.html',
'/style.css',
'/logo.png',
'/contato.html',
]);
})

'/index.html',
'/style.css',
'/logo.png',
'/contato.html',
]);
})
};

event.waitUntil(
'/index.html',
'/style.css',
'/logo.png',
'/contato.html',
]);
})
);
};

CACHE
programático & controlável

CACHE
Cacheio URLs como quero.

CACHE
Gero endereços num for com certa regra.

CACHE
Recursos diferentes dependendo do browser.

CACHE
Levo em conta alguma preferência do usuário.

CACHE
Levo em conta alguma preferência do usuário.
Mudo de acordo com hardware e contexto.

event.respondWith(
new Response(‘conteúdo!')
);
};

event.respondWith(
caches.match(event.request)
);
};

RESPOSTA DO CACHE
E se não existir?

event.respondWith(
caches.match(event.request).then(function(response){
})
);
};

event.respondWith(
return response || event.default();
})
);
};

BAIXA NA REDE
E se estiver offline?

event.respondWith(
return response || event.default();
}).catch(function() {
return caches.match('/contato.html');
})
);
};

RESPOSTA
programática & controlável

RESPOSTA
Busco no cache.

RESPOSTA
Busco no cache.
Busco na rede.

RESPOSTA
Busco no cache.
Busco na rede.
Devolvo fallback.

RESPOSTA
Busco no cache.
Busco na rede.
Devolvo fallback.
Construo resposta na mão.

RESPOSTA
Busco no cache.
Busco na rede.
Devolvo fallback.
Construo resposta na mão.
Tudo com a lógica e a sequência que eu quiser.

Mudo o worker.js
Detecta na próxima navegação.

Mudo o worker.js
Dispara instalação (oninstall) em background.

Mudo o worker.js
(worker original ainda comanda a página)

Mudo o worker.js
Fecho a página.

Mudo o worker.js
Fecho a página.
Worker velho é desativado.

Mudo o worker.js
Fecho a página.
Novo worker é ativado (onactivate).

Mudo o worker.js
Fecho a página.
(novo worker em ação)

Mudo o worker.js
Fecho a página.
(novo worker em ação)
Abro a página de novo.

event.waitUntil(
caches.open('aplicacao-v2').then(function(cache) return cache.addAll([
'/index.html',
'/style.css',
'/logo.png',
'/contato.html',
]);
})
);
};

this.onactivate = function(event) {
event.waitUntil(
caches.delete('aplicacao-v1')
);
};

ATUALIZAÇÃO
Totalmente em background.

ATUALIZAÇÃO
Não incomoda o usuário.

ATUALIZAÇÃO
Só troca no próximo acesso.

ATUALIZAÇÃO
Só troca no próximo acesso.
Chrome-like.

detalhes dos
SERVICE
WORKERS

navigator.serviceWorker.register('worker.js');

navigator.serviceWorker.register('worker.js', {
scope: '/blog/'
});

pode ser morto a
qualquer momento

muito mais poderoso
muito mais complicado

ainda não existe
em nenhum browser

try {
postaTweet(texto);
} catch (err) {
}

try {
postaTweet(texto);
} catch (err) {
salvaTweet(texto);
registration.sync.register('envia-tweet');
}

postaTweet(texto).catch(function(){
});

salvaTweet(texto).then(function(){
}).then(function(){
});
});

return salvaTweet(texto).then(function(){
return navigator.serviceWorker.ready;
}).then(function(registration){
return registration.sync.register('envia-tweet');
});
});

this.onsync = function (event) {
if (event.id === 'envia-tweet') {
}
};

this.onsync = function (event) {
if (event.id === 'envia-tweet') {
event.waitUntil(
carregaTweet().then(function(texto){
postaTweet(texto);
})
);
}
};

registration.sync.register('atualiza-inbox', {
minInterval: 60 * 60 * 1000
});

registration.pushRegistrationManager.register()

.then(function(detalhes) {
});

.then(function(detalhes) {
return avisaServidor(detalhes);
});

this.onpush = function(event) {
if (event.message.data == 'nova-mensagem') {
}
};

event.waitUntil(
atualizaMensagens().then(function(){
})
);
}
};

event.waitUntil(
atualizaMensagens().then(function(){
new Notification("Chegou mensagem!");
})
);
}
};

this.onnotificationclick = function(event) {
};

this.onnotificationclick = function(event) {
new ServiceWorkerClient('/mensagens.html');
};

SERVICE
WORKERS
hoje, depois do evento

estude Service Workers
hoje. esse é o futuro.

brinque no Chrome
Chrome Canary - chrome://flags
#enable-experimental-web-platform-features

offline como
progressive enhancement
if ('serviceWorker' in navigator) {
}

OBRIGADO!
sergiolopes.org
@sergio_caelum

Offline Web com Service Workers - Sérgio Lopes

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Offline Web com Service Workers - Sérgio Lopes

Mais de Caelum

Offline Web com Service Workers - Sérgio Lopes