Developing an understanding of service workers and their role in an app.

1. S E R V I C E
W O R K E R S
w i t h S a l l y a n d L a r r y

2. Hi Larry! Let's learn a little
about service workers
today.
Service
Workers...
Do they do
something with
building apps?

3. That means we can access the app
when we don't have signal?
Exactly! Service workers make
working offline possible.
Yes!

4. It's a JavaScript file? Does
that mean it works with the
DOM?
Service Workers are just
another JavaScript file
that we create.
No - and that's what
makes it work offline.

5. Really? How does the service worker
work with the browser?
Even though service workers
don't have access to the DOM it
does have access to the browser
capabilities
I'm glad you asked - it's really
interesting!

6. Yes, that's right.
When you go to a website you either
type it in or click on a link, right?
Okay, after you type or click on the
URL your computer uses the cables
and satellites to contact the web
server that's hosting your website.
The information you're looking for
is then sent to you on those cables
and satellites from the web server.

7. Search for
www.hocking.edu
Sees the homepage for www.hocking.edu
For example, if Susie is looking to check
out Hocking College she can do a search
online and click on the link for
www.hocking.edu. Susie's computer uses
cables, radio towers and satellites to find
the server where the Hocking College
website is hosted. The server sends her the
files (the web pages) she's asked for.

8. If a Service Worker file is included,
Susie's search goes to the Service Worker
first.
Search for
www.hocking.edu
Sees the homepage for www.hocking.edu

9. Well, the service worker leaves
instructions to the browser that
Susie is using. Those instructions
will be performed before the
request is sent further.
Do you see how Susie's request went
to a service worker instead of going
straight to the radio towers, cables
and satellites?
Yes, what does it do there?

10. Yes! That's why these service
worker pages don't access the DOM.
If no other pages are loaded yet,
there's nothing for it to look
through.
For example, the service worker can
tell the browser "If the user is asking
for a particular URL, run this
JavaScript file (the service worker
file) first."
So the browser runs that file first before
any of the other pages are searched for
or loaded?

11. There are three different analogies we can use
to help better understand. Let's go over
them.
Cookie Virus Toolbox
Cookies and Service
Workers are downloaded
when accessing a
website
Service Workers are
more powerful than
cookies as they contain
a set of instructions.
Those instructions are
reviewed before making
a requests to the
website that originally
installed the service
worker.
Viruses and Service
Workers are installed
in the background
when first visit a
website.
Afterwards when a
request to the website
is made, the service
worker intercepts it.
The service worker
can only handle
requests for the
original website that
installed the service
worker.
Tools and Service
Workers don't do
much on their own
but they are useful
when needing to
access something.
Service workers
allow access to
powerful browser
features
Instructions can be
written in service
workers to take
advantage of the
tools

12. Yes! You got it!
You can see that all three
analogies help with the
understanding of what a service
worker does.
Yes, so basically the service worker
JavaScript file is downloaded onto
our computer when we first visit a
website. The next time we visit our
browser reads those instructions first.
Does that sound right?

13. So you can see that service
workers can be very powerful.
But you know what they say
"With great power, comes great
responsibility".
Yeah, I think I've heard that before.
Think about it. If there was a
hacker who wanted to create
havoc all they would have to do is
impersonate a website and write
their own service worker with evil
instructions. So there are some
policies that need to be followed.

14. It's important to be sure that the
service worker really belongs to the
site it claims it's from. For example if
a service worker says its for
www.example.com - it really is from
www.example.com
Okay, I think I know what you mean. Can
you explain a bit more?
Certainly! Sometimes webpages use
third party providers to hold images
and other assets. That works fine for
those instances. The service workers
HAVE to be part of the original
website. It can't be hosted elsewhere.

15. The same origin is one policy that
service workers have to follow.
Okay, what is the other one?
Service workers can only be used on
HTTPS websites. If a website is only
HTTP and doesn't have the S
(indicates it's secured), the service
worker won't work.

16. When publishing your website for
others to see you need to be sure your
site is secured with HTTPS, but you
don't need to do that while your still
building your app.
That's good! I wasn't sure how that was
going to work when we're still in testing
phase. How else can we see our site with
the service worker in action?
You can build and test with the
service worker while working with
your local host (web server on your
own computer).

17. Hopefully this helps explain what a
Service Worker is and how it help
build apps for users to use - even if
they aren't online or connected.
If you have questions please feel free
to reach out to Tasha Penwell at
Hocking College at the information
below.
Text: 740-300-1684
Email: penwellt31810@hocking.edu
Source: https://abookapart.com/