Web WorkerとSharedWorkerの検出

Web Worker検出

Web WorkerはバックグラウンドスレッドでJavaScriptを実行することを可能にし、重い計算がUIスレッドをブロックするのを防ぎます。レスポンシブなWebアプリケーションの基本です。

検出

const hasWebWorker = typeof Worker !== 'undefined';
const hasSharedWorker = typeof SharedWorker !== 'undefined';

ワーカータイプ

タイプ	スコープ	共有	ユースケース
Dedicated Worker	単一ページ	なし	重い計算
Shared Worker	複数タブ	あり	タブ間の共有状態
Service Worker	スコープ内の全ページ	あり	オフライン、プッシュ、キャッシング

Dedicated Workerの作成

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};

// worker.js
onmessage = (e) => {
  const result = heavyComputation(e.data);
  postMessage(result);
};

Blob URLを使用したインラインワーカー

const code = \`
  onmessage = (e) => {
    const result = e.data.map(x => x * 2);
    postMessage(result);
  };
\`;
const blob = new Blob([code], { type: 'text/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

Transferableオブジェクト

大きなデータにはTransferableオブジェクトを使用してコピーを回避：

const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage({ buffer }, [buffer]);
// メインスレッドでbufferは空になる

制限事項

• DOMアクセスなし（document、windowなどなし）
• 限定的なAPI利用可能性（localStorage、alertなどなし）
• 小さなメッセージの通信オーバーヘッド
• モジュールワーカー（type: 'module'）のサポートは異なる