Service Worker, what are you ?

me : “Service Worker, what are you?”
Service Worker: “I’m a programmable network proxy.”
me : “… what?”

Service Worker sounds cool, but I don’t really know what it is

In July 2015, I was sitting in a theater in Austin Texas attending JavaScript Conference. The person on the stage was Jake Archibald, who at the time I only knew as funny British chap who talk about bathroom matter 🚽 a lot. I later found out he is kind of big deal™ for designing Service Worker spec.

On stage, in between his anecdote about UX epiphany in public bathroom, he introduced this new thing called Service Worker, which is a thing you can use to make your website act like native app (or at least that was my understanding).

It sounded very exciting, and I wanted to use that in my web projects. It was little tricky to understand at first though… it’s not a library, its not a new HTML element, it’s not a new JavaScript syntax. When I read “Introduction to ServiceWorker” type of articles, terms like “proxy” and “cache” always confused me. By doodling on paper while trying to understand what Service Worker does, I finally figured out, it’s an alien you can invite to live on user’s browser. Sounds strange? well, hear me out.

Service Worker is an alien in the web browser universe

Imagine your web browser is a planet (like the earth) that is part of your computer galaxy. In this planet, people speak language like HTML, CSS, and JavaScript to create society of web pages. If you are web developer you might know in-depth knowledge of this society from different types of elements (DOM) to recycling schedule (garbage collection).

This planet developed a way to connect with outside world by using a thing called Hyper Text Transfer Protocol. It’s a way to request resources from other galaxies (servers). This is how planet browser turn itself into collection of cat gifs and tweets. This is what makes planet browser super interesting and keep millions of users engaged.

HTTP sounds really cool magic trick, but in reality, you need to have pluming pipe called the Internet to connect with other galaxies using HTTP. The size and length of the pipe depends on how much you pay the Internet plummer (ISP) or what kind of infrastructure available at your region. When the pipe is narrow or long, it will take more time to get resources from other galaxy compare to short and wide pipe.

The thing is, this Internet pluming infrastructure is not always available to our planet browser. When the browser can not connect to the pipe, it throw itself back to an era when nothing modern existed, and shows dinosaur as reminder of good ‘ol days.

But wait ! Service Worker is here to help !

Service Worker is something that sits between the planet bowser and the Internet pluming pipe. Instead of making direct request to the other galaxy, you send your request to Service Worker, and ask them to do some work for you. It (to me at least) feels like an alien inside of UFO.

Here are 3 things you should know about your new friend Service Worker

1. Service Worker is something you summon. Unless you ask for it, there is no Service Worker. But once you ask Service Woker to help you, they will be there until they think they run out of things to do. There is no .terminate() like Web Worker does.
2. Service Worker is something that lives outside of web page. When you close a bowser window, usually everything go inactive. You can not download funny video or read next chapter of a book. Browser will be at rest 💯. However, by some browser miracle, Service Worker can be awaken when it’s needed, and goes away when it’s not needed even though you have browser window closed ! You (as a web developer making interesting things happen on the planet browser) do not have control over lifecycle of the Service Worker. (This is the reason why I think it’s a bit of an alien)
3. As mentioned, Service Worker lives outside of web page — which means it can not touch the element on the planet browser. You do not have access to window or document and can not modify DOM elements inside of Service Worker code.

So what kind of task can you ask Service Worker to do?

1. Interact with Cache

You can ask Service Worker to be the middle man watching out for fetch event. You can ask Service Worker to save certain resources in cache. When cached items are requested, Service Worker can respond with cache data without making external HTTP call. As long as resources are cached, browser can show content without the Internet connection.

2. Send Push Notification

By miracle of “Service Worker can be active when browser window is closed”, you can achieve things like push notification.

3. Run Background Sync

Active when browser is not open also means Service Worker can work in background while user is not looking. Let’s say you sent some file while the browser is off-line, Service Worker can upload that to external server when Internet connection is available.

If you were confused about Service Worker, I hope this shed some light :) Want to start dive into code ? I recommencement checking out Jake Archibald’s offline-cookbook for more code driven samples.

This post was originally published at kosamari.com on December 1, 2016.