Using Web Workers in Angular to Optimize Performance 🏋🏼‍♀️

Web Workers are powerful way to offload computationally intensive tasks to separate main thread, ensuring your UI remains responsive, In this article, we will discuss the implementation of web Workers, communication between the main thread and worker thread, and their integration into an Angular Service.

Adding a web worker

ng generate web-worker app

Adds the following scaffold code to src/app/app.worker.ts to receive messages.

addEventListener('message', ({ data }) => {
   const response = `worker response to ${data}`;
   postMessage(response);
 });

Adds the following scaffold code to src/app/app.component.ts to use the worker.

if (typeof Worker !== 'undefined') {
   // Create a new
   const worker = new Worker(new URL('./app.worker', import.meta.url));
   worker.onmessage = ({ data }) => {
     console.log(`page got message: ${data}`);
   };
   worker.postMessage('hello');
 } else {
   // Web workers are not supported in this environment.
   // You should add a fallback so that your program still executes correctly.
 }

Now how can we handle multiple functions with one web worker.

The Example: Processing Proposal Items