Learn to Code via Tutorials on Repl.it!

← Back to all posts
Battle of the workers! Service workers vs Web workers: what are they and what do they do?
h
Baconman321 (566)

If

you have ever used a Web Worker, you know the power of this technology. Same with if you have used a Service Worker. The fact alone that they allow multithreaded programs for a single threaded language is electrifying enough, but oh, no... there's so much more.
If you don't know what a Service Worker or what a Web Worker is, then this is exactly for you. This won't cover in depth coding examples of how these work, but rather explain what they do. Want to know more? Just sit back and read

THE BATTLE OF THE WORKERS!!!

Got your attention now, didn't I?

What are workers?

Workers, from web workers to service workers, allow you to use JavaScript running on different threads (that's amazing, right?!). There are different workers, which is why we are reviewing 2. The first opponent:

THE WEB WORKER

A worthy opponent? Oh, yes!


JavaScript was developed to be a single-threaded technology. While this offers benefits, it also offers frustration of not being able to handle things the way you can do with other languages. The W3C knew this, and so they began to create a powerful application to help the web developers. According to sitepoint, the web worker draft standard was first published in 2009. This allowed developers to register a second execution thread to execute JavaScript in what is known as a web worker. Not only that, but you could also communicate between the main thread and the web worker! This allows you to give heavy execution work to the web worker, and let your main thread handle something else. Obviously this is very powerful. In fact, sortacraft (made by tussiez) uses this to handle creating new game chunks in the web worker, then send the data over to the main thread to be generated in the game world. See how powerful this is? Registering a web worker is as simple as

let worker = new Worker('webworker.js');

webworker.js would be the js file that is to be executed as a web worker. This web worker feature is a worthy opponent. Let's meet the second and last opponent of this fantasy...

THE SERVICE WORKER!!!

ARGH!

Don't you hate it when you're offline? When all you can do is play minecraft or something not requiring internet? I wish they had something to cache websites and serve that cached file when you're offline, but there isn't something like that... right???

SERVICE WORKER TO THE RESCUE!

A service worker acts like a proxy between the website and the internet. Technically, it can do heavy computations as well, but it's job is to make sure that you get the right resource when you load a webpage from a website. It basically sits on your computer and loads a file when you request something based on what it's told to do. This is the main purpose of the service worker. It, too also has a seperate thread. It can do everything from serving cached files that are big and take up internet data to... even making a website work offline! OOOOOOOO, now wouldn't that be nice?!
Registering one is as simple as

navigator.serviceWorker.register('serviceworker.js');

Again, serviceworker.js is the file that is being treated as a service worker. This isn't a tutorial on how to use them, just showing what they are capable of.
Now that we have shown both opponents, let's see how they are different, then see which of them wins the title for "best worker".

The difference?

Web Workers and Service Workers both run on a different thread than the main thread, which is used to execute JavaScript files otherwise. However, that doesn't mean that they are the same. Web workers typically are used for heavy, high process hogging jobs, like big calculations (hey, rocket science ain't easy). Service workers, however, are used as a proxy for a website. These play different roles, and so they have different features. Web Workers have an easy postMessage() feature, while Service Workers do not (there is another way, but let's save that for now). Also, web workers are only accessible by the script that called it (unless you create a shared worker). Service workers, rather have "clients", web pages that it controls and serves content to.
As you can see, they are quite different. However, they both have the basic JavaScript syntax and commands. They both can't use the window object or local storage/session storage. They can use indexedDB however.

Either way, they are both different for their different uses.

The winner? A TIE!

I just couldn't choose one...

The thing is, they are both amazing and both really great to use. Depending on what you want to do, you could need a Service worker, a Web worker, or both! It depends on what you are doing.
Let's review shall we?
A Service worker is:

  • A JavaScript file that acts like a proxy, sits on the computer and serves content to the website it was registered on.
  • Can be used offline.
  • Is great for caching files and serving them.

A Web worker is:

  • A JavaScript file that is run on another thread.
  • Used for heavy computational processes.
  • Helpful to minimize main thread work.

So, as you can see they are good for what they are made for.


I hope you liked this tutorial, and I hope you found it helpful. Upvote if you liked it. Please give your comments/questions/feedback in the comments section down below. If you didn't like it, what could I do better?
That's all for now. Bacon Boi out!