Hey, Mark, thanks for the question.

Yes, Web Workers and Service Workers do appear to be pretty similar: both work in the background, mimicking multi-threading; both communicate back to your main JS via a postMessage; and neither can directly interact with the DOM. And it is possible that they can both handle some of the same tasks.

Web Workers are more for heavy JS tasks, the kind of stuff that might greatly slow, or even completely block, your site’s UI. Stuff like compiling or crunching a bunch of data, generating resource-intensive charts or diagrams, etc. This can all be pushed off to a Web Worker, while the main JS goes about some other task(s), and when the Web Worker is done, it will send the completed work back to the main JS to do whatever with.

Service Workers, once instantiated, monitor any attempts to contact the outside world, so they are more for customizing server communication requests. I have seen people do stuff like pre-download and cache assets, so that when they are needed they can be served them directly from the browser, rather than waiting for the server roundtrip, or storing server communications if a device loses connectivity temporarily, then once the connection is back, pushing and pulling again to get things synced, I have even seen someone used Modernizr to check if a device can handle webp images and then use Service Workers to change the extension for any jpg images to webp images…

I hope this helps clear things up at least a little. But the best way to get to know them each better, is by digging in and playing with them all to find out what works, what doesn’t, and what makes more sense in various situations.

Thanks for reading, and for the question!