{
  "id": "guide/web-worker",
  "title": "Background processing using web workers",
  "contents": "\n\n\n<div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/web-worker.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n  <h1 id=\"background-processing-using-web-workers\">Background processing using web workers<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/web-worker#background-processing-using-web-workers\"><i class=\"material-icons\">link</i></a></h1>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\">Web workers</a> allow you to run CPU-intensive computations in a background thread,\nfreeing the main thread to update the user interface.\nIf you find your application performs a lot of computations, such as generating CAD drawings or doing heavy geometrical calculations, using web workers can help increase your application's performance.</p>\n<div class=\"alert is-helpful\">\n<p>The CLI does not support running Angular itself in a web worker.</p>\n</div>\n<h2 id=\"adding-a-web-worker\">Adding a web worker<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/web-worker#adding-a-web-worker\"><i class=\"material-icons\">link</i></a></h2>\n<p>To add a web worker to an existing project, use the Angular CLI <code>ng generate</code> command.</p>\n<code-example language=\"bash\">\nng generate web-worker &#x3C;location>\n</code-example>\n<p>You can add a web worker anywhere in your application.\nFor example, to add a web worker to the root component, <code>src/app/app.component.ts</code>, run the following command.</p>\n<code-example language=\"bash\">\nng generate web-worker app\n</code-example>\n<p>The command performs the following actions.</p>\n<ul>\n<li>\n<p>Configures your project to use web workers, if it isn't already.</p>\n</li>\n<li>\n<p>Adds the following scaffold code to <code>src/app/app.worker.ts</code> to  receive messages.</p>\n <code-example language=\"typescript\" header=\"src/app/app.worker.ts\">\n addEventListener('message', ({ data }) => {\n   const response = `worker response to ${data}`;\n   postMessage(response);\n });\n</code-example>\n</li>\n<li>\n<p>Adds the following scaffold code to <code>src/app/app.component.ts</code> to use the worker.</p>\n<code-example language=\"typescript\" header=\"src/app/app.component.ts\">\nif (typeof Worker !== 'undefined') {\n  // Create a new\n  const worker = new Worker('./app.worker', { type: 'module' });\n  worker.onmessage = ({ data }) => {\n    console.log(`page got message: ${data}`);\n  };\n  worker.postMessage('hello');\n} else {\n  // Web workers are not supported in this environment.\n  // You should add a fallback so that your program still executes correctly.\n}\n</code-example>\n</li>\n</ul>\n<p>After you generate this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.</p>\n<div class=\"alert is-important\">\n<p>Some environments or platforms, such as <code>@angular/platform-server</code> used in <a href=\"guide/universal\">Server-side Rendering</a>, don't support web workers. To ensure that your application will work in these environments, you must provide a fallback mechanism to perform the computations that the worker would otherwise perform.</p>\n</div>\n\n  \n</div>\n\n<!-- links to this doc:\n - guide/architecture-next-steps\n-->\n<!-- links from this doc:\n - guide/universal\n - guide/web-worker#adding-a-web-worker\n - guide/web-worker#background-processing-using-web-workers\n - https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\n - https://github.com/angular/angular/edit/master/aio/content/guide/web-worker.md?message=docs%3A%20describe%20your%20change...\n-->"
}