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
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).
Service Worker is an alien in the web browser universe
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
- 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.
- 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)
- 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
documentand 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.