diff --git a/aio/content/guide/web-worker.en.md b/aio/content/guide/web-worker.en.md new file mode 100644 index 0000000000..cdf2dd8a8e --- /dev/null +++ b/aio/content/guide/web-worker.en.md @@ -0,0 +1,58 @@ +# Background processing using web workers + +[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 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. + +
+ +The CLI does not support running Angular itself in a web worker. + +
+ +## 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. + +- 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') { + // 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 you generate this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker. + +
+ +Some environments or platforms, such as `@angular/platform-server` used in [Server-side Rendering](guide/universal), 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. + +
diff --git a/aio/content/guide/web-worker.md b/aio/content/guide/web-worker.md index cdf2dd8a8e..f57cb8fdd7 100644 --- a/aio/content/guide/web-worker.md +++ b/aio/content/guide/web-worker.md @@ -1,30 +1,30 @@ -# Background processing using web workers +# Procesamiento en segundo plano utilizando web workers -[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 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. +[Web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) te permiten ejecutar cálculos intensivos de CPU en un subproceso en segundo plano, +liberando el hilo principal para actualizar la interfaz de usuario. +Si encuentra que la aplicación realiza una gran cantidad de cálculos, como generar dibujos CAD o realizar cálculos geométricos pesados, el uso de web workers puede ayudar a aumentar el rendimiento de la aplicación.
-The CLI does not support running Angular itself in a web worker. +La CLI no admite la ejecución de Angular en un web worker.
-## Adding a web worker +## Agregando un web worker -To add a web worker to an existing project, use the Angular CLI `ng generate` command. +Para agregar un web worker a un proyecto existente, utilice el comando de Angular `ng generate` de la CLI. `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. +Puede agregar un trabajador web en cualquier lugar de la aplicación. +Por ejemplo, para agregar un web worker al componente raíz, `src/app/app.component.ts`, ejecute el siguiente comando. `ng generate web-worker app` -The command performs the following actions. +El comando realiza las siguientes acciones. -- 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. +- Configura el proyecto para que use web workers, si aún no lo está. +- Agrega el siguiente código a `src/app/app.worker.ts` para recibir mensajes. addEventListener('message', ({ data }) => { @@ -33,7 +33,7 @@ The command performs the following actions. }); -- Adds the following scaffold code to `src/app/app.component.ts` to use the worker. +- Agrega el siguiente código `src/app/app.component.ts` para usar el worker. if (typeof Worker !== 'undefined') { @@ -49,10 +49,10 @@ The command performs the following actions. } -After you generate this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker. +Después de generar este scaffolding inicial, debe refactorizar el código para usar el web worker enviando mensajes desde y hacia el worker.
-Some environments or platforms, such as `@angular/platform-server` used in [Server-side Rendering](guide/universal), 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. +Algunos entornos o plataformas, como `@angular/platform-server` utilizado en [Renderizado del lado del servidor](guide/universal), no admiten web workers. Para asegurarse de que la aplicación funcionará en estos entornos, debes proporcionar un mecanismo de reserva para realizar los cálculos que el worker realizaría de otro modo.