Як додати Web Workers до Angular

Що таке Web Workers

Як відомо, JavaScript працює в одному потоці (single thread), що може призвести до затримок у роботі всього додатка, якщо в ньому є важкі, що вимагають великої кількості процесорного часу, обчислювальні операції.

Web Workers API – це інструмент, який дозволяє створювати додатковий потік для скриптів та виконувати їх у фоновому режимі, що дозволяє програмі стабільно працювати при важких обчисленнях.

Web Workers в Angular

Web Workers API не є частиною Angular, проте worker-и можна створювати, додати та використовувати в будь-якому місці програми. У Angular CLI навіть є спеціальна команда для створення воркера.

ng generate web-worker app

Ця команда зробить кілька речей. Вона згенерує web worker в корені програми src/app/app.worker.ts наступного змісту:

addEventListener('message', ({ data }) => {
  const response = `Воркер відповідає на ${data}`;
  postMessage(response);
});

Якщо команда була виконана вперше, то також додати конфігураційний файл tsconfig.worker.json приблизно такого змісту:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

І оновиться файл angular.json.

Останнє, що зробить ця команда, додасть наступний код файлу src/app/app.component.ts

if (typeof Worker !== 'undefined') {
  // Створюється новий веб-воркер
  const worker = new Worker(new URL('./app.worker', import.meta.url));
  worker.onmessage = ({ data }) => {
    console.log(`Отримано повідомлення: ${data}`);
  };
  worker.postMessage('hello');
} else {
  // Web worker-и не підтримуються у цьому оточенні.
}

Таким чином, команда ng generate web-worker app виконує всю підготовчу роботу, залишається додати тільки код, який відповідає за обчислення, які хочеться проводити у фоновому режимі.