Service Workers e o futuro das aplicações no seu browser
-
Upload
eduardo-matos -
Category
Software
-
view
149 -
download
0
Transcript of Service Workers e o futuro das aplicações no seu browser
![Page 1: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/1.jpg)
SERVICEWORKERSE O FUTURO DAS APLICAÇÕES NO SEU BROWSER
![Page 3: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/3.jpg)
LABORATÓRIO DEPROGRAMAÇÃO
*estamos contratando!
![Page 4: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/4.jpg)
POA É A SAN FRANCISCO DO
BRASIL!
![Page 5: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/5.jpg)
O QUE É UM WORKER?
![Page 6: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/6.jpg)
Primeira definição de Worker surgiu com o WebWorkershttp://www.html5rocks.com/en/tutorials/workers/basics/
![Page 7: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/7.jpg)
BROWSER EXECUTANDOTAREFAS SEM BLOQUEAR
A INTERFACEResumindo: scripts rodando em paralelo à pagina
EX: tarefas que exigem alto processamento
![Page 8: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/8.jpg)
// main scriptvar worker = new Worker('worker.js');
worker.addEventListener('message', function(e) { console.log('Worker diz: ', e.data);}, false);
worker.postMessage('Oi, eu sou o Worker!');
// worker.jsself.addEventListener('message', function(e) { self.postMessage(e.data);}, false);
![Page 9: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/9.jpg)
![Page 10: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/10.jpg)
REGRAS COMUNS DE UMWORKER
Não acessa o DOMNão acessa o windowNão acessa o documentAcessa o navigatorAcessa o location (ready-only)
![Page 11: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/11.jpg)
E O SERVICEWORKERS?
![Page 12: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/12.jpg)
Usa o mesmo conceito do WebWorker de isolar execução deum scriptControla programaticamente o cache da sua aplicaçãoServe como um proxy da sua aplicação[futuramente] BackgroundSync (!!)[futuramente] Geofencing (!!!)[futuramente] Push Notifications (!!!!)[futuramente] Bluetooth (!!!!!)
![Page 13: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/13.jpg)
![Page 14: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/14.jpg)
OFFLINE CONTROL
![Page 15: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/15.jpg)
![Page 16: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/16.jpg)
VAI APPLICATIONCACHE!
![Page 17: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/17.jpg)
A forma de cachear arquivos parecia simples...
http://diveintohtml5.info/offline.html
![Page 18: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/18.jpg)
![Page 19: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/19.jpg)
APPCACHE IS ADOUCHEBAG!
http://alistapart.com/article/application-cache-is-a-douchebaghttp://sergiolopes.org/palestra-appcache-html5-offline
http://eduardomatos.me/appcache-manifest-e-serviceworker-as-partes-boas-e-ruins
![Page 20: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/20.jpg)
LÁ VEM OSERVICEWORKERS
![Page 21: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/21.jpg)
![Page 22: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/22.jpg)
// main scriptnavigator.serviceWorker.register("/assets/worker.js").then( function ( serviceWorker ) { serviceWorker.postMessage("ServiceWorkers instalado com sucesso."); }, function ( error ) { console.error("Ops.. não rolou a instalação do ServiceWorkers", error); });
![Page 23: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/23.jpg)
Interceptando requests // assets/worker.js var base = "https://meu.server.com";
var data_url = new URL("/data/posts.json", base) + "";
self.addEventListener("fetch", function(e) { var url = e.request.url; console.log(url); if (url == data_url) { e.respondWith( new Response(JSON.stringify({ posts: { /* ... */ } }), { headers: { 'Content-Type': 'application/json' }, status: 200 }) ); } });
![Page 24: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/24.jpg)
![Page 25: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/25.jpg)
![Page 26: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/26.jpg)
Cacheando seus assets // assets/worker.jsself.version = 1;
var base = "https://meu.server.com"
// Listener para a instalação do ServiceWorkersself.addEventListener("install", function ( e ) { var myResources = new Cache ( 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);});
![Page 27: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/27.jpg)
Request + Cache // assets/worker.jsself.version = 2;
var base = "https://meu.server.com"var data_url = new URL("/data/posts.json", base) + "";
self.addEventListener("fetch", function ( e ) { if (e.request.url == data_url) { e.respondWith( caches.match( e.request ) .catch( function () { return e.default; }) .catch( function () { return caches.match("/data/posts_fallback.json"); }) ); } });
![Page 28: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/28.jpg)
![Page 29: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/29.jpg)
![Page 30: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/30.jpg)
EXEMPLO DESERVICEWORKERS
https://jakearchibald.github.io/trained-to-thrill/
![Page 31: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/31.jpg)
E A SEGURANÇA DISSO?Funciona apenas com httpsEscopo por domains
![Page 32: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/32.jpg)
BACKGROUND SYNCAinda muito recente
![Page 33: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/33.jpg)
// main scriptnavigator.serviceWorker.register("/assets/worker.js");
navigator.serviceWorker.ready.then(function (sw) { // Returns a Promise navigator.sync.register( "my_data_sync", { minInterval: 86400 * 1000, // ms, default: heuristic repeating: true, // default: false data: '', // default: empty string description: '', // default: empty string lang: '', // default: document lang dir: '' // default: document dir } ).then(function() { // Success // No resolved value // Success, sync is now registered }, function() { // Failure // If no SW registration // User/UA denied permission // Sync id already registered });});
![Page 34: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/34.jpg)
// assets/worker.js self.onsync = function(event) { var data = JSON.parse(event.data);
if (event.id === "my_data_sync") { if (data.whatever === "foo") { // rejection is indication that the UA should try // later (especially when network is ok) event.waitUntil(doAsyncStuff()); } } else { // Garbage collect unknown syncs (perhaps from older pages). navigator.sync.unregister(event.id); } };
![Page 35: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/35.jpg)
GEOFENCINGNem a spec foi definida.
![Page 36: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/36.jpg)
BLUETOOTHSpec ainda engatinhando
https://github.com/WebBluetoothCG/web-bluetoothhttp://www.w3.org/community/web-bluetooth
![Page 37: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/37.jpg)
ONDE FUNCIONA?https://jakearchibald.github.io/isserviceworkerready/
![Page 38: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/38.jpg)
PORQUE ESSE HYPETODO?
JavaScript chegando no app nativoEvolução e maior controle das aplicaçõesAcesso a funcionalidades do sistema do usuário (bluetooth,push notifications...)
![Page 39: Service Workers e o futuro das aplicações no seu browser](https://reader030.fdocuments.net/reader030/viewer/2022020102/55c6826bbb61eb6d378b4754/html5/thumbnails/39.jpg)
OBRIGADO!link da palestra: bit.ly/serviceworkers-poa
meu twitter: @eduardojmatos
fontes: http://bit.ly/serviceworkers-links