docs: add Web Worker guide (#29633)

Followup to https://github.com/angular/angular-cli/pull/13700

PR Close #29633
This commit is contained in:
Filipe Silva 2019-04-01 15:43:20 +01:00 committed by Jason Aden
parent 1f469cd7bb
commit 8bfaaf164a
3 changed files with 54 additions and 2 deletions

1
.github/CODEOWNERS vendored
View File

@ -414,6 +414,7 @@
/packages/compiler-cli/src/ngtools/** @angular/tools-cli @angular/framework-global-approvers /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/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

View File

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

View File

@ -70,7 +70,7 @@
"url": "getting-started/routing", "url": "getting-started/routing",
"title": "Routing", "title": "Routing",
"tooltip": "Introduction to routing between components using the browser's URL" "tooltip": "Introduction to routing between components using the browser's URL"
}, },
{ {
"url": "getting-started/data", "url": "getting-started/data",
"title": "Managing Data", "title": "Managing Data",
@ -564,6 +564,11 @@
"url": "guide/ivy", "url": "guide/ivy",
"title": "Angular Ivy", "title": "Angular Ivy",
"tooltip": "Opting into Angular Ivy with Angular CLI." "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" "url": "https://v2.angular.io"
} }
] ]
} }