An introduction to Service Worker in JavaScript

Tabrez Khan
Mar 23 · 4 min read

Photo by Pop & Zebra on Unsplash

A service worker is a script that runs separately in the background.

But, wait. What background? What does it mean by “runs separately” ?

Well, to answer that let’s first understand the nature of JavaScript. JavaScript is a single threaded language, which means one call stack, one heap memory and one execution context. As expected, JavaScript executes code in an order, one after another. So it must finish executing a piece of code before moving on to the next.

So, no matter how many scripts (or files) you split your code into, it will always run as a single script because it has one execution context.

So when I say it runs separately, it means that it runs concurrently to the main thread, without blocking the main thread or the web page’s UI.

A normal network request

Above image shows a normal network request that goes form client to server and the response comes back from server to the client.

A network request with service worker

Above image shows, how a network request will go back and forth if there is a service worker registered.

A service worker sits between the client and the server, you can think of it as a proxy. It can intercept every request that goes in and out of the client. So, you can manipulate network request in anyway you want.

Service worker works collectively with CacheStorage API and IndexedDB of the browser to support offline experience and gives developers complete control over the experience.

Service worker has no access to the DOM API, so it can’t manipulate the DOM directly. However, it can communicate with the page via postMessage interface to manipulate the DOM.

Note: For security reasons, service worker only runs over HTTPS

Life Cycle

Life cycle of a service worker

A service worker goes through 3 steps in its life cycle:

  • Register: In this event, a service worker is registered against an origin and a path. The path determines the scope of the service worker that is which part of your web app can a service worker control. The default scope is the location of the service worker file. But let’s say you changed the scope to /myapp/, then the service worker can control requests from like /myapp/ or /myapp/one or /myapp/someendpoint but it cannot control the path higher in hierarchy like https://www.example.com/

Use Cases

Now, let’s look at few use cases of the Service Worker -

  • You can enhance the performance of your web page, for example storing the resource in the browser cache that the user is likely to need in near future.

Conclusion

Using service worker is great way if you want to make your web applications faster and give your users, a better and reliable experience.

If you would like to know more about service worker, go to links mentioned below:

Let me know your thoughts in the comments.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade