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.
HELPFUL:
The Angular CLI does not support running itself in 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.
Configures your project to use web workers, if it isn't already.
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'
) {
const
worker =
new
Worker
(
new
URL
(
'./app.worker'
,
import
.
meta
.
url
));
worker.
onmessage
=
(
{ data }
) =>
{
console
.
log
(
`page got message:
${data}
`
);
};
worker.
postMessage
(
'hello'
);
}
else
{
}
After you create this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.
IMPORTANT:
Some environments or platforms, such as
@angular/platform-server
used in
Server-side Rendering
, don't support web workers.
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.