この記事は 個人開発エンジニア応援 - 個人開発の成果や知見を共有しよう！- - Qiita の参加記事です。
はじめに
Web Worker用のスクリプトをサイトのオリジンとは別でホストしたいというとき、
クロスオリジン制約により、スクリプトとサイトのオリジンが異なる場合はWeb Workerを起動できません。
なんとかできないかと調べていたところ、スクリプトのBlobを指すURLをつくることでできたので記事にします。
方法
Web Worker用のスクリプトをfetchし、Blobとして取得します。
そして、そのBlobを指すオブジェクトURLを生成し、そのURLでWorkerを起動します。
Workerを終了させるときは、オブジェクトURLも開放してあげます。
// Workerを起動するとき
const response = await fetch(WORKER_URL);
const blob = await response.blob();
const objectUrl = URL.createObjectURL(blob);
const worker = new Worker(objectUrl);
// Workerを終了させるとき
worker.terminate();
URL.revokeObjectURL(objectUrl);