This document discusses service workers and their role in creating progressive web apps (PWAs). It covers the basics of service workers, how they enable features like offline access and push notifications, and tools like Workbox that can help generate service worker code. Real-world examples of using service workers for tasks like caching images and handling network requests are provided. Overall, the document presents service workers as a key technology for improving the user experience and developing high-quality PWAs.

1. SERVICE WORKERS
E O SEU PAPEL NA CRIAÇÃO DE PWAS

2. ARTUR FELIPE DE SOUSA
https://github.com/arturfsousa
https://twitter.com/arturfsousa
arturfelipe.sousa@gmail.com

3. WEB WORKERS
Execução de scripts fora da main thread

4. WEB WORKERS
VANTAGENS
‣ Não bloqueantes
‣ Comunicação via postMessage() e onmessage
‣ I/O via XMLHttpRequest
‣ Acessam Data Storages
‣ importScripts()

5. WEB WORKERS
DESVANTAGENS
‣ Não manipulam o DOM
‣ Não acessam window, document e parent
‣ Trafego de dados pode ser custoso

7. <script>
function doSomeHeavyStuff() {
const input = parseInt(document.getElementById('input').value, 10);
const result = summation(input);
document.getElementById('result').innerText = `Result: ${result}`;
}
function summation(n) {
let result = 0;
for (let i = 0; i <= n; i++) {
result += i;
}
return result;
}
</script>
SEM WORKER
demo-no-worker.html
https://github.com/arturfelipe/webworkers-demo

8. <script>
function doSomeHeavyStuff() {
const input = parseInt(document.getElementById('input').value, 10);
worker.postMessage(input);
}
const worker = new Worker('webworker.js');
worker.addEventListener('message', function(e) {
document.getElementById('result').innerText = `Result: ${e.data}`;
}, false);
</script>
COM WORKER
demo-worker.html
function summation(n) {
let result = 0;
for (let i = 0; i <= n; i++) {
result += i;
}
return result;
}
self.addEventListener('message', function(e) {
const result = summation(e.data);
self.postMessage(result);
}, false);
webworker.js
TROCA DE MENSAGENS

9. SEM WORKER

10. COM WORKER

11. VOU USAR AONDE?

12. WEB WORKERS
EXEMPLOS PRÁTICOS
‣ Análise de dados de audio, vídeo e imagem
‣ Análise pesada de texto (megadraft)
‣ Polling de serviços
‣ Processamento de arrays ou JSON gigantes

13. DOM CHANGELIST
SHARED ARRAY BUFFER
http://lucasfcosta.com/2017/04/30/JavaScript-From-Workers-to-Shared-Memory.html
https://github.com/whatwg/dom/issues/270
https://www.youtube.com/watch?v=q5HDhQtpDRU (2:00-10:10)

14. SERVICE WORKERS
Proxy de rede programável

15. Fonte: Vaadin

16. SERVICE WORKERS
CARACTERÍSTICAS
‣ É um Web Worker
‣ Intercepção e controle de requests/responses
‣ Cache de responses via Cache API
‣ Acesso a IndexedDB API
‣ Offline
‣ Só funcionam com HTTPS

17. CACHE API
Mecanismo de storage de pares Request/Response
caches.open('mycache')
.then(cache => {
const request = new Request('/');
const responseHeaders = { headers: { 'content-type': 'text/html' } };
const response = new Response('<h1>Hello</h1>', responseHeaders);
cache.put(request, response);
})

18. INDEXED DB
Mecanismo de storage indexado com suporte a objetos
let req = indexedDB.open('mydb', 1);
req.onsuccess = function() {
let dataBase = this.result;
let transaction = dataBase.transaction('beer', 'readwrite');
let store = transaction.objectStore('beer');
store.add({ name: 'La chouffe', type: 'Belgian Specialty Ale' });
};
req.onupgradeneeded = function(e) {
let store = e.currentTarget.result.createObjectStore('beer', {
keyPath: 'id',
autoIncrement: true
});
store.createIndex('name', 'name', { unique: true });
store.createIndex('type', 'type', { unique: false });
};

19. CICLO DE VIDA SW
SEM SERVICE WORKER (Primeiro Acesso)
Instalação
ErroAtivação
Idle
Finalizado
Fetch / Messages
navigator.serviceWorker.register('/sw.js')
Precache
CacheStorage cleanup
Runtime caching
WEBAPP
BACKGROUND

20. DEMO

21. <script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(register => {
console.log('[WEB] Service Worker registered :P', register);
})
.catch(err => {
console.log('[WEB] Service Worker fail to register :/', err);
});
}
function orderBeer() {
const img = new Image();
img.src = '/img/beer.svg';
img.className = 'beer';
document.getElementById('bar').appendChild(img);
}
</script>
index.html
REGISTRO

22. const CACHE_VERSION = 'v1';
const CACHE_NAME = `some-cool-bar-${CACHE_VERSION}`;
self.addEventListener('install', event => {
console.log(`[SW] Installing ${CACHE_NAME}`);
// Precaching
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log(`[SW] Precaching ${CACHE_NAME}`);
return cache.addAll([
'/',
'/img/beer.svg',
'/img/bar.svg',
'/img/milk.svg'
])
})
);
});
sw.js
INSTALAÇÃO
PRECACHING

23. self.addEventListener('activate', event => {
console.log(`[SW] Activated ${CACHE_NAME}`);
// Cache cleanup
event.waitUntil(
caches.keys()
.then(cacheNames => Promise.all(
cacheNames.map(cacheName => {
if (cacheName != CACHE_NAME) {
return caches.delete(cacheName);
}
})
))
);
});
sw.js
ATIVAÇÃO
CACHE CLEANUP
clients.claim();
Força o controle do SW

24. self.addEventListener('fetch', event => {
console.log(`[SW] Handling fetch ${CACHE_NAME}`);
event.respondWith(
caches.match(event.request)
.then(function(response) {
const url = new URL(event.request.url);
// Serve a glass of milk instead of a beer
if (url.origin == location.origin && url.pathname.endsWith('/img/beer.svg')) {
return caches.match('/img/milk.svg');
}
// Cache hit - return response from cache
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
sw.js
FETCH
RUNTIME CACHING / CONTROLE DE REQUESTS

25. https://developers.google.com/web/tools/workbox/

26. WIZARD
AUTO GERAÇÃO DO SW
module.exports = {
"globDirectory": "dist/",
"globPatterns": [
"**/*.{svg,html}"
],
"swDest": "dist/sw.js",
"swSrc": "src/sw.js"
};
workbox-config.js

27. TEMPLATE
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0-alpha.3/workbox-sw.js');
workbox.clientsClaim();
// Milk trick
workbox.routing.registerRoute(
//img/beer.svg$/,
() => caches.match('/img/milk.svg')
);
workbox.precaching.precacheAndRoute([]);
src/sw.js
Estratégia de cache

28. SW GERADO
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0-alpha.3/workbox-sw.js');
workbox.clientsClaim();
// Milk trick
workbox.routing.registerRoute(
//img/beer.svg$/,
() => caches.match('/img/milk.svg')
);
workbox.precaching.precacheAndRoute([
{
"url": "img/bar.svg",
"revision": "d86c626f2caadc7f73f5987f9af611b6"
},
{
"url": "img/beer.svg",
"revision": "30b921568452c89dfbafa350f6263fc7"
},
{
"url": "img/milk.svg",
"revision": "4f18cee564ab485eea01bed8cab7b856"
},
{
"url": "index.html",
"revision": "0edb00801da856632d63a14928efc4bd"
}
]);
dist/sw.js
Hash baseado no conteúdo dos arquivos

30. WORKBOX
ESTRATÉGIAS DE CACHE
‣ cacheFirst
‣ cacheOnly
‣ networkFirst
‣ networkOnly
‣ staleWhileRevalidate

31. PUSH NOTIFICATIONS
BACKGROUND SYNC
https://www.youtube.com/watch?v=l4e_LFozK2k

32. PROGRESSIVE WEB APPS
CONJUNTO DE CONCEITOS
MELHORIAS
NOVAS FEATURES DA WEB

33. MELHORAR A EXPERIÊNCIA
Performance
Service Workers
Offline
Push Notifications Background Sync
Add to Home Screen
CredentialsPayment

34. MOM
Measure
Optimize
Monitor
Speed Curve
WebPageTest
LightHouse
RUM
Mundo REAL
Real User Monitor

36. OBRIGADO
Referências em:
https://github.com/arturfsousa/serviceworkers-demo/blob/master/REFERENCES.md