Nelle applicazioni web abbiamo spesso la necessità di effettuare elaborazioni complesse. Il primo pensiero è delegare al server lo svolgimento di questi calcoli, utilizzando invece i web workers sarà possibile eseguire operazioni che richiedano un alto numero di risorse direttamente sul client, senza intaccare la fluidità della nostra applicazione.
Per poter creare un web worker, all'interno di applicazione Angular, che possa essere utilizzato dal componente app.component.ts, possiamo ricorrere alla CLI con il seguente comando.

ng generate web-worker app

Verranno effettuate delle modifiche per includere i web workers nella build, modificato il file app.component.ts e verrà inoltre creato il web worker app/app.worker.ts, nel quale potremo scrivere le operazioni da eseguire e restituire il risultato invocando il metodo postMessage.

postMessage(response);

All'interno di AppComponent, alla fine del file, troveremo le righe che ci consentiranno di creare e utilizzare il web worker; queste dovranno essere spostate dove necessario, all'interno del componente.

La comunicazione tra le parti è basata sugli eventi, per avere accesso al risultato della funzione è necessario implementare una callback che intercetti la risposta del metodo postMessage.

worker.onmessage = ({ data }) => {
  console.log(`page got message: ${data}`);
};

Successivamente possiamo eseguire le operazioni.

worker.postMessage('hello');

I web workers possono essere utili per eseguire calcoli su vaste liste, cache di dati, operazioni su testo come formattazione o controllo grammaticale, compressione/decompressione file o elaborazione di immagini. All'interno di una applicazione Angular la creazione dall'infrastruttura è facilitata dalla CLI che ci consente di implementarli con poche righe di codice.