Slide 1
Slide 1 text
INTRODUCTION
TO SERVICE
WORKERS
Slide 2
Slide 2 text
HELLO!
I am Matheus
Marabesi
You can find me at
@MatheusMarabesi
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
1.
PWA
Progressive web apps
Slide 5
Slide 5 text
PWA
Reliable
Load instantly and
never show the
downasaur, even in
uncertain network
conditions.
Fast
Respond quickly to
user interactions with
silky smooth
animations and no
janky scrolling.
Engaging
Feel like a natural app
on the device, with an
immersive user
experience.
5
Slide 6
Slide 6 text
PWA
Manifest
Allows you to control
how your app appears
and how it's launched.
Web push
notifications
Respond quickly to
user interactions with
silky smooth
animations and no
janky scrolling.
???
???
6
Slide 7
Slide 7 text
2.
THE PROBLEM
Connectivity 101
Slide 8
Slide 8 text
OFF
LINE
No connection at all.
8
Place your screenshot here
Slide 9
Slide 9 text
LIE
FI
Which is a term
related to bad
connection and high
latency.
9
Slide 10
Slide 10 text
3.
DEFINITIONS
Building the ground
Slide 11
Slide 11 text
“
Service workers
improves the user
experience in the
connectivity aspect
11
Slide 12
Slide 12 text
SERVICE WORKER
▹ A isolated script that can’t access
the DOM.
12
Slide 13
Slide 13 text
SERVICE WORKER
▹ A isolated script that can’t access
the DOM.
▹ Intercept requests and decides
when to go over the network or
send a cached version.
13
Slide 14
Slide 14 text
SERVICE WORKER
▹ A isolated script that can’t access
the DOM.
▹ Intercept requests and decides
when to go over the network or
send a cached version.
▹ Has a defined life cycle, installing,
waiting and active.
14
Slide 15
Slide 15 text
SERVICE WORKER
▹ A isolated script that can’t access
the DOM.
▹ Intercept requests and decides
when to go over the network or
send a cached version.
▹ Has a defined life cycle, installing,
waiting and active.
▹ Must have HTTPS
15
Slide 16
Slide 16 text
APP
LIKE
The service worker
add powers that only
native apps used to
have.
16
Slide 17
Slide 17 text
DEMO 01
Offline approach - intercepting request
17
Slide 18
Slide 18 text
4.
SERVICE
WORKER LIFE
CYCLE
Service worker 101
Slide 19
Slide 19 text
HTTP - REQUEST/RESPONSE
19
Server
02
Response/Ccache
03
01
User request
Slide 20
Slide 20 text
SERVICE WORKER -
REQUEST/RESPONSE 1
20
Service worker
02
01
User request
Slide 21
Slide 21 text
SERVICE WORKER -
REQUEST/RESPONSE 2
21
Service worker
02
01
User request
03
Update the content and notify the user
Cache first
Slide 22
Slide 22 text
DEMO 02
Dev tools
22
Slide 23
Slide 23 text
SETTING UP
The service worker controls any
page that matches the scope
property.
23
Slide 24
Slide 24 text
To install a service
worker, you must
start the process by
registering it on
your page. This tells
the browser where
the service worker
JavaScript file is.
24
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function(registration) {
// Registration was successful
}, function(err) {
// registration failed :(
});
});
}
Slide 25
Slide 25 text
SCOPES
The service worker controls any
page that matches the scope
property.
25
Slide 26
Slide 26 text
EXPLICIT 26
navigator.serviceWorker
.register('/sw.js', {scope: '/app'})
.then(
function(registration) {
console.log(registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
}
);
Slide 27
Slide 27 text
EXPLICIT
/app/
/app/whatever
/app
27
navigator.serviceWorker
.register('/sw.js', {scope: '/app/'})
.then(
function(registration) {
console.log(registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
}
);
Slide 28
Slide 28 text
IMPLICIT
28
navigator.serviceWorker
.register('/sw.js')
.then(
function(registration) {
console.log(registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
}
);
Slide 29
Slide 29 text
IMPLICIT
Based on the
location of the
service worker file.
29
navigator.serviceWorker
.register('/sw.js')
.then(
function(registration) {
console.log(registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
}
);
Slide 30
Slide 30 text
“
It is possible to use as
many service worker as
you want to.
30
Slide 31
Slide 31 text
MULTIPLE SERVICE
WORKERS
It is possible to use as many
Service worker as you want to.
31
folder1
index.html
sw1.js
folder2
index.html
sw2.js
folder3
index.html
sw3.js
Slide 32
Slide 32 text
SERVICE WORKER
LIFE CYCLE
Service worker lifecycle in the
first installation.
32
No service worker
Slide 33
Slide 33 text
DEMO 03
Service worker - life cycle
33
Slide 34
Slide 34 text
5.
CACHE API
Introduced in the Service
Worker specification
Slide 35
Slide 35 text
“
The Cache interface
provides a storage
mechanism for Request /
Response object pairs
that are cached, for
example as part of the
ServiceWorker life cycle.
35
Slide 36
Slide 36 text
The Cache API was
created to enable
Service Workers to
cache network
requests so that they
can provide
appropriate responses
even while offline.
CACHE API
36
Slide 37
Slide 37 text
The Cache API was
created to enable
Service Workers to
cache network
requests so that they
can provide
appropriate responses
even while offline.
CACHE API
However, the API can
also be used as a
general storage
mechanism.
37
Slide 38
Slide 38 text
The caches only
store pairs of
Request and
Response objects,
representing HTTP
requests and
responses,
respectively.
However, the
requests and
responses can
contain any kind of
data that can be
transferred over
HTTP.
38
const request = new Request('/images/sample1.jpg');
Slide 39
Slide 39 text
The Response
object constructor
accepts many types
of data, including
Blobs,
ArrayBuffers,
FormData objects,
and strings.
39
const request = new Request('/images/sample1.jpg');
const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');
Slide 40
Slide 40 text
The first is to use
cache.put(request,
response). request
is either a Request
object or a string -
if it is a string, then
new
Request(request)
is used instead.
response must be a
Response.
40
cache.put('/test.json', new Response('{"foo": "bar"}'));
Slide 41
Slide 41 text
The first is to use
cache.put(request,
response). request
is either a Request
object or a string -
if it is a string, then
new
Request(request)
is used instead.
response must be a
Response.
41
cache.put('/test.json', new Response('{"foo": "bar"}'));
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
Slide 42
Slide 42 text
DEMO 04
Cache API
42
Slide 43
Slide 43 text
6.
REAL WORLD
SCENARIO, BLOG
LIKE
Slide 44
Slide 44 text
7.
BONUS
Tools, what is going on and
the future.
Slide 45
Slide 45 text
WORKBOX
JavaScript Libraries for adding
offline support to web apps.
45
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Building Successful Websites: Case Studies for Mature
and Emerging Markets (Google I/O ’19)
47
Slide 48
Slide 48 text
OFFLINE
The web as an app.
THE FUTURE
Total success!
SW API
With great power comes great
responsibility.
48
Slide 49
Slide 49 text
THANKS!
Any questions?
You can find me at:
@MatheusMarabesi
49