Background processing using web workers

Web workers let you run CPU-intensive computations in a background thread, freeing the main thread to update the user interface. Application's performing a lot of computations, like generating Computer-Aided Design (CAD) drawings or doing heavy geometric calculations, can use web workers to increase performance.

Adding a web worker

To add a web worker to an existing project, use the Angular CLI ng generate command.

      
ng generate web-worker <location>
    

You can add a web worker anywhere in your application. For example, to add a web worker to the root component, src/app/app.component.ts, run the following command.

      
ng generate web-worker app
    

The command performs the following actions.

1. Configures your project to use web workers, if it isn't already.

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

   src/app/app.worker.ts

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

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

   src/app/app.component.ts

         
   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.
    }
       

After you create this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.

To ensure that your application works in these environments, you must provide a fallback mechanism to perform the computations that the worker would otherwise perform.