Image for post
Image for post

Web workers vs Service workers vs Worklets

source: https://tech.ovoenergy.com/web-workers-vs-service-workers/

Web Workers

Web Workers have been around for a quite a while now. They don’t have all the fancy capabilities of Service Workers, but when you need to offload heavy work to a separate thread they are the way to go.

Service Workers

Service Workers offer a lot more functionality for creating Progressive Web Apps which give a great experience for offline users or users with slow internet connections. The Service Worker can be used as a proxy for network events, allowing us to cache resources for offline use.

In conclusion

Use a Web Worker for heavy computation on the client. Use a Service Worker for offline capabilities like intercepting network requests, as well as other fun stuff like push notifications and synchronization of content in the background.

Web workers

Web workers are the most general purpose type of worker. Unlike service workers and worklets as we will see below, they do not have a specific use case, other than the feature of being run separately to the main thread. As a result, web workers can be used to offload pretty much any heavy processing from the main thread.

Image for post
Image for post
/* main.js */ const myWorker = new Worker('worker.js');
/* main.js */

// Create worker
const myWorker = new Worker('worker.js');

// Send message to worker
myWorker.postMessage('Hello!');

// Receive message from worker
myWorker.onmessage = function(e) {
console.log(e.data);
}
/* worker.js */

// Receive message from main file
self.onmessage = function(e) {
console.log(e.data);

// Send message to main file
self.postMessage(workerResult);
}

Service workers

Service workers are a type of worker that serve the explicit purpose of being a proxy between the browser and the network and/or cache.

Image for post
Image for post
/* main.js */

navigator.serviceWorker.register('/service-worker.js');
/* service-worker.js */

// Install
self.addEventListener('install', function(event) {
// ...
});

// Activate
self.addEventListener('activate', function(event) {
// ...
});

// Listen for network requests from the main document
self.addEventListener('fetch', function(event) {
// ...
});
/* service-worker.js */

self.addEventListener('fetch', function(event) {
// Return data from cache
event.respondWith(
caches.match(event.request);
);
});

Worklets

Worklets are a very lightweight, highly specific, worker. They enable us as developers to hook into various parts of the browser’s rendering process.

Image for post
Image for post
/* main.js */

CSS.paintWorklet.addModule('myWorklet.js');
/* myWorklet.js */

registerPaint('myGradient', class {
paint(ctx, size, properties) {
var gradient = ctx.createLinearGradient(0, 0, 0, size.height / 3);

gradient.addColorStop(0, "black");
gradient.addColorStop(0.7, "rgb(210, 210, 210)");
gradient.addColorStop(0.8, "rgb(230, 230, 230)");
gradient.addColorStop(1, "white");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, size.width, size.height / 3);
}
});
div { 
background-image: paint(myGradient);
}

Recap

To recap, web workers, service workers, and worklets are all scripts that run on a separate thread to the browser’s main thread. Where they differ is in where they are used and what features they have to enable these use cases.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store