Vamos conhecer um pouco do que já foi desenvolvido e o que está sendo planejado pelas gigantes de tecnologia. Quais as futuras funcionalidades da API estão sendo implementadas? Até que ponto é seguro? Por quê podemos dizer que com ela, a diferença entre aplicações nativas diminuirão em relação as app browser?

1. SERVICEWORKERS
E O FUTURO DAS APLICAÇÕES NO SEU BROWSER

2. EDUARDO MATOS
@eduardojmatos

3. LABORATÓRIO DE
PROGRAMAÇÃO*estamoscontratando!

4. POA É A
SAN FRANCISCO DO
BRASIL!

5. O QUE É UM WORKER?

6. Primeiradefinição de Worker surgiu com o WebWorkers
http://www.html5rocks.com/en/tutorials/workers/basics/

7. BROWSER EXECUTANDO
TAREFAS SEM BLOQUEAR
A INTERFACE
Resumindo: scripts rodando em paralelo àpagina
EX: tarefas que exigem alto processamento

8. //mainscript
varworker=newWorker('worker.js');
worker.addEventListener('message',function(e){
console.log('Workerdiz:',e.data);
},false);
worker.postMessage('Oi,eusouoWorker!');
//worker.js
self.addEventListener('message',function(e){
self.postMessage(e.data);
},false);

10. REGRAS COMUNS DE UM
WORKER
Não acessao DOM
Não acessao window
Não acessao document
Acessao navigator
Acessao location (ready-only)

11. E O SERVICEWORKERS?

12. Usao mesmo conceito do WebWorker de isolar execução de
um script
Controlaprogramaticamente o cache dasuaaplicação
Serve como um proxydasuaaplicação
[futuramente] BackgroundSync (!!)
[futuramente] Geofencing(!!!)
[futuramente] Push Notifications (!!!!)
[futuramente] Bluetooth (!!!!!)

14. OFFLINE CONTROL

16. VAI APPLICATION
CACHE!

17. Aformade cachear arquivos pareciasimples...
http://diveintohtml5.info/offline.html

19. APPCACHE IS A
DOUCHEBAG!
http://alistapart.com/article/application-cache-is-a-douchebag
http://sergiolopes.org/palestra-appcache-html5-offline
http://eduardomatos.me/appcache-manifest-e-serviceworker-
as-partes-boas-e-ruins

20. LÁ VEM O
SERVICEWORKERS

22. //mainscript
navigator.serviceWorker.register("/assets/worker.js").then(
function(serviceWorker){
serviceWorker.postMessage("ServiceWorkersinstaladocomsucesso.");
},
function(error){
console.error("Ops..nãorolouainstalaçãodoServiceWorkers",error);
});

23. Interceptando requests
//assets/worker.js
varbase="https://meu.server.com";
vardata_url=newURL("/data/posts.json",base)+"";
self.addEventListener("fetch",function(e){
varurl=e.request.url;
console.log(url);
if(url==data_url){
e.respondWith(
newResponse(JSON.stringify({
posts:{/*...*/}
}),{
headers:{'Content-Type':'application/json'},
status:200
})
);
}
});

26. Cacheando seus assets
//assets/worker.js
self.version=1;
varbase="https://meu.server.com"
//ListenerparaainstalaçãodoServiceWorkers
self.addEventListener("install",function(e){
varmyResources=newCache(
base+"/index.html",
base+"/assets/application.css",
base+"/assets/application.js",
base+"/assets/logo.png",
base+"/data/posts.json",
base+"/data/posts_fallback.json"
);
e.waitUntil(myResources.ready());
caches.set("caches-"+self.version,myResources);
});

27. Request+ Cache
//assets/worker.js
self.version=2;
varbase="https://meu.server.com"
vardata_url=newURL("/data/posts.json",base)+"";
self.addEventListener("fetch",
function(e){
if(e.request.url==data_url){
e.respondWith(
caches.match(e.request)
.catch(function(){
returne.default;
})
.catch(function(){
returncaches.match("/data/posts_fallback.json");
})
);
}
}
);

30. EXEMPLO DE
SERVICEWORKERS
https://jakearchibald.github.io/trained-to-thrill/

31. E A SEGURANÇA DISSO?
Funcionaapenas com https
Escopo por domains

32. BACKGROUND SYNC
Aindamuito recente

33. //mainscript
navigator.serviceWorker.register("/assets/worker.js");
navigator.serviceWorker.ready.then(function(sw){
//ReturnsaPromise
navigator.sync.register(
"my_data_sync",
{
minInterval:86400*1000, //ms,default:heuristic
repeating:true, //default:false
data:'', //default:emptystring
description:'', //default:emptystring
lang:'', //default:documentlang
dir:'' //default:documentdir
}
).then(function(){//Success
//Noresolvedvalue
//Success,syncisnowregistered
},
function(){//Failure
//IfnoSWregistration
//User/UAdeniedpermission
//Syncidalreadyregistered
});
});

34. //assets/worker.js
self.onsync=function(event){
vardata=JSON.parse(event.data);
if(event.id==="my_data_sync"){
if(data.whatever==="foo"){
//rejectionisindicationthattheUAshouldtry
//later(especiallywhennetworkisok)
event.waitUntil(doAsyncStuff());
}
}else{
//Garbagecollectunknownsyncs(perhapsfromolderpages).
navigator.sync.unregister(event.id);
}
};

35. GEOFENCING
Nem aspec foidefinida.

36. BLUETOOTH
Spec aindaengatinhando
https://github.com/WebBluetoothCG/web-bluetooth
http://www.w3.org/community/web-bluetooth

37. ONDE FUNCIONA?
https://jakearchibald.github.io/isserviceworkerready/

38. PORQUE ESSE HYPE
TODO?
JavaScriptchegando no app nativo
Evolução e maior controle das aplicações
Acesso afuncionalidades do sistemado usuário (bluetooth,
push notifications...)

39. OBRIGADO!
link dapalestra: bit.ly/serviceworkers-poa
meu twitter: @eduardojmatos
fontes: http://bit.ly/serviceworkers-links