Create Web Workers In Angular

Introduction

 
In this article, we'll learn how to use web workers in Angular 8/9.
 

Web Workers

 
Web workers speed up in your application when we start working on CPU-intensive tasks. They let you offload work to a background thread. Once we allow a web worker to run, we can use it normally in our application, and the Angular cli will be able to split bundle and code.
 
The Following Browser versions which are supported in web workers:
  • Firefox: 3.5
  • Chrome: 4
  • Safari: 4
  • IE:10
  • Opera: 10.6

Installing AngularCLI

 
Let’s get started by installing Angular CLI, which is the official tool for creating and working with Angular projects. Open a new terminal and run the below command to install Angular CLI.
 
npm install -g @angular/cli.
 
If you want to install Angular 9, simply add @next
 
npm install --g @angular/cli@next
 
Please check the below command for the Angular version.
 
ng version
 
Create Web Workers In Angular 8/9
 
Steps to follow:
 
 
Step 1
 
Create an Angular project setup using the below command or however you want to create it.
 
ng new projectname
 
Example,
 
ng new webworker
 
Create Web Workers In Angular 8/9
 
Step 2
 
Now, we must generate web workers from our Angular cli. Open a new terminal and run the below command.
 
ng generate webWorker my-worker
 
Create Web Workers In Angular 8/9
 
Step 3
 
Now, Create a Web Worker Object in App.component.ts(main scripts)
  1. const worker = new Worker ('./my-worker.worker', {type: 'module'});   
We can do some code in App.component.ts (main scripts)
  1. if (typeof Worker !== 'undefined') {  
  2.     // Create a new  
  3.     const worker = new Worker('./my-worker.worker', {  
  4.         type: 'module'  
  5.     });  
  6.     worker.onmessage = ({  
  7.         data  
  8.     }) => {  
  9.         console.log(`page got message: ${data}`);  
  10.     };  
  11.     worker.postMessage('welcome');  
  12. else {  
  13.     console.log('Web Workers are not supported in this environment.');  
  14.     // Web Workers are not supported in this environment.  
  15.     // You should add a fallback so that your program still executes correctly.  
  16. }  
Step 4
 
Now, we can do some code in my-worker.worker.ts
  1. addEventListener('message', ({  
  2.     data  
  3. }) => {  
  4.     const response = `worker response to ${data}`;  
  5.     postMessage(response);  
  6. });   
  • Web Workers are supported in the browser
  • Create a new worker (main scripts).
  • Post message to the worker in my-worker.worker.ts.
  • When the worker gets the message, addEventListener will fire, and it will create a response to the object then it will call postMessage method. 
Step 5
 
Now, run the application.
 
npm start
 
Create Web Workers In Angular 8/9
 
Step 6
 
Now, we will get the following output,
 
Create Web Workers In Angular 8/9
 

Conclusion

 
Web Workers looks easy because it's very simple and cool. After reading this, you should understand the application's behavior.