From 8bfaaf164aa8ce619473677c1da5d2043bbfd30b Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Mon, 1 Apr 2019 15:43:20 +0100 Subject: [PATCH] docs: add Web Worker guide (#29633) Followup to https://github.com/angular/angular-cli/pull/13700 PR Close #29633 --- .github/CODEOWNERS | 1 + aio/content/guide/web-worker.md | 46 +++++++++++++++++++++++++++++++++ aio/content/navigation.json | 9 +++++-- 3 files changed, 54 insertions(+), 2 deletions(-) create mode 100644 aio/content/guide/web-worker.md diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 32d4676688..9c5f350a36 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -414,6 +414,7 @@ /packages/compiler-cli/src/ngtools/** @angular/tools-cli @angular/framework-global-approvers /aio/content/guide/ivy.md @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes +/aio/content/guide/web-worker.md @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes diff --git a/aio/content/guide/web-worker.md b/aio/content/guide/web-worker.md new file mode 100644 index 0000000000..9572d2072c --- /dev/null +++ b/aio/content/guide/web-worker.md @@ -0,0 +1,46 @@ +# Using Web Workers with Angular CLI + +[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) allow you to run CPU intensive computations in a background thread, freeing the main thread to update the user interface. + +If you find your application becomes unresponsive while processing data, using Web Workers can help. + +## Adding a Web Worker + +You can add a web worker anywhere in your application. If the file that contains your expensive computation is `src/app/app.component.ts`, you can add a Web Worker using `ng generate web-worker app`. + +Running this command will: + +- configure your project to use Web Workers, if it isn't already. +- add `src/app/app.worker.ts` with scaffolded code to receive messages: + + ```typescript + addEventListener('message', ({ data }) => { + const response = `worker response to ${data}`; + postMessage(response); + }); + ``` + +- add scaffolded code to `src/app/app.component.ts` to use the worker: + + ```typescript + if (typeof Worker !== 'undefined') { + // Create a new + const worker = new Worker('./app.worker', { type: 'module' }); + 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 the initial scaffolding, you will need to refactor your code to use the Web Worker by sending messages to and from. + +## Caveats + +There are two important things to keep in mind when using Web Workers in Angular projects: + +- Some environments or platforms, like `@angular/platform-server` used in [Server-side Rendering](guide/universal), don't support Web Workers. You have to provide a fallback mechanism to perform the computations that the worker would perform to ensure your application will work in these environments. +- Running Angular itself in a Web Worker via [**@angular/platform-webworker**](api/platform-webworker) is not yet supported in Angular CLI. diff --git a/aio/content/navigation.json b/aio/content/navigation.json index fbd60ad6fd..c549fd2c61 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -70,7 +70,7 @@ "url": "getting-started/routing", "title": "Routing", "tooltip": "Introduction to routing between components using the browser's URL" - }, + }, { "url": "getting-started/data", "title": "Managing Data", @@ -564,6 +564,11 @@ "url": "guide/ivy", "title": "Angular Ivy", "tooltip": "Opting into Angular Ivy with Angular CLI." + }, + { + "url": "guide/web-worker", + "title": "Web Workers", + "tooltip": "Using Web Workers with Angular CLI." } ] }, @@ -828,4 +833,4 @@ "url": "https://v2.angular.io" } ] -} \ No newline at end of file +}