docs: add Web Worker guide (#29633)

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

PR Close #29633

.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
 
 
 

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.

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"
     }
   ]
-}
+}