JavaScript remains one of the most popular programming languages in the world, and reasonably so. Ever since its introduction in 1995, JavaScript has evolved constantly to meet the latest market standards.

It is this continuous growth that has led to the development of complex concepts, like workers. Commonly divided into three primary sections, web workers, worklets, and service workers hold the key to JavaScript in 2022, and ahead.

Simply stated, workers are scripts that run in a separate thread than the main browser thread. If the main thread has excessive activities, it can reduce the site’s speed, leading to unresponsive and jittery interactions. Thus, by establishing these workers, the system can run codes without blocking, avoiding the infamous jumping cursor during complex computations. 

However, these workers are not used for UI updates, meaning they cannot access the DOM. While the explanation is simple enough for any JavaScript user, the fact that there are three similar workers with similar features can be confusing.

That is why the article will explain the difference between Web Workers, Service Workers, and Worklets.

What is a Web Worker?

Web workers have been in the market for a long time. Despite not possessing the fancy features like Service Workers, they are a great tool to put off heavy load from the main thread. There are no specific use-cases for Web Workers, which makes them readily available to separate the load at any moment.

Developed using the Web Workers API, they possess a dedicated JavaScript file. 

const webWorker = new Worker(‘worker.js’);

This starts running the code within the worker.js file, which can be anything. Similar to other workers, Web Workers cannot access the DOM either. It means that the sole way to convey information between the main script and the workers is done with window.postMessage().

/* application.js */

/ Create worker

const webWorker = new Worker(‘worker.js’);

// Send message to worker

webWorker.postMessage(‘Hello!’);

// Receive message from worker

webWorker.onmessage = function(e) {

  console.log(e.data);

}

Here is an example where the messages from the main script can be read with a return response.

/* worker.js */

// Receive message from main file

self.onmessage = function(e) {

  console.log(e.data);

// Send message to main file

  self.postMessage(workerResult);

}

What is a Service Worker?

Unlike Web Workers, Service Workers have a dedicated role of being a proxy between the network and the browser and/or cache.

Similar to Web Workers, they are registered in the primary JavaScript file as a dedicated worker. 

/* main.js */

navigator.serviceWorker.register(‘//d2btv6z6utd61g.cloudfront.net/service-worker.js’);

However, they have some extra features, allowing them to serve the proxy purpose. After installing and activating Service Workers, they can intercept any type of network requests from the main script. An example of this would be:

/* 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) {

    // …

});

Once the request has been intercepted, Service Workers can respond to it instead of reaching the network. Thus allows the web applications to function offline. 

/* service-worker.js */

self.addEventListener(‘fetch’, function(event) {

    // Return data from cache

    event.respondWith(

        caches.match(event.request);

    );

});

What is a Worklet?

Similar to Service Workers, Worklets are specific workers. However, they are lightweight and their roles are highly specific. A Worklet allows developers to connect to different sections of the browser’s rendering procedure.

The browser runs numerous steps while rendering a web page. Here is an example that will show you how to put together an audio worklet. 

The process starts with creating a specific file for the Worklet, and the given codes will show how to build GainNode on AudioWorkletProcessor and AudioWorkletNode.

First, you need to set up the Index.html:

<!doctype html>

<html>

<script>

 const context = new AudioContext();

 // Loads module script via AudioWorklet.

 context.audioWorklet.addModule(‘gain-processor.js’).then(() => {

   let oscillator = new OscillatorNode(context);

   // After the resolution of module loading, an AudioWorkletNode can be

   // constructed.

   let gainWorkletNode = new AudioWorkletNode(context, ‘gain-processor’);

   // AudioWorkletNode can be interoperable with other native AudioNodes.

   oscillator.connect(gainWorkletNode).connect(context.destination);

   oscillator.start();

 });

</script>

</html>

On the next step, you place the gain-processor.js:

class GainProcessor extends AudioWorkletProcessor {

 // Custom AudioParams can be defined with this static getter.

 static get parameterDescriptors() {

   return [{ name: ‘gain’, defaultValue: 1 }];

 }

 constructor() {

   // The super constructor call is required.

   super();

 }

 process(inputs, outputs, parameters) {

   const input = inputs[0];

   const output = outputs[0];

   const gain = parameters.gain;

   for (let channel = 0; channel < input.length; ++channel) {

     const inputChannel = input[channel];

     const outputChannel = output[channel];

     if (gain.length === 1) {

       for (let i = 0; i < inputChannel.length; ++i)

         outputChannel[i] = inputChannel[i] * gain[0];

     } else {

       for (let i = 0; i < inputChannel.length; ++i)

         outputChannel[i] = inputChannel[i] * gain[i];

     }

   }

   return true;

 }

}

registerProcessor(‘gain-processor’, GainProcessor);

In Conclusion

Web Workers, Service Workers, and Worklets have different purposes, making them a crucial part of the client. However, knowing the difference between the three is useful to make optimal use of them. For instance, using Web Workers for heavy-duty computation or Service Workers for push notifications and intercepting network requests creates an efficient operational space.

BigStep Technologies houses 200+ professionals who can expand your knowledge on this and similar subjects in no time. Our experts can explain, teach, and build highly functional progressive web apps using such technologies. You can get in touch with them at info@bigsteptech.com to elevate your business operations today.