🙆

外部ドメインの Web Worker を利用する方法

2021/06/26に公開約1,800字

Googleアカウント変更に伴って記事を移行しました。

実現したいこと・前提条件

  • Worker スレッドで実行したい処理がある
  • 同一リポジトリ配下に Web Worker 用の JS ファイルを配置できない。
  • S3 や Github Pages に配置して複数コンテンツで利用したい。

Web Worker 用のスクリプトを用意する

なんでもいいので Worker スレッド用の処理を実装します。
ここでは単純に渡された 2 つの値を乗算して返すだけのものにしてあります。

実装が完了したら、静的ホスティング可能なサービスにデプロイします。今回は Github Pages にアップしました。
https://mktbsh.github.io/assets/js/workers/sample.worker.js

sample.worker.js
onmessage = (e) => {
  console.log('Message received from main thread');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main thread');
  postMessage(workerResult);
}

メインスレッド側の処理を実装する

sample.js
(function () {
    // WebWorkerの処理を実装したスクリプトのURL
    const crossOriginScriptUrl = 'https://mktbsh.github.io/assets/js/workers/sample.worker.js';

    // Workerオブジェクトを生成
    const workerUrl = getWorkerURL(crossOriginScriptUrl);
    const myWorker = new Worker(workerUrl);
    // オブジェクトURLの解放
    URL.revokeObjectURL(workerUrl);

    // Workerスレッドから結果の受け取り
    myWorker.onmessage = (e) => console.log(e.data);

    document.getElementById('button').addEventListener('click', () => {
        const value1 = 100;
        const value2 = 1000;
        myWorker.postMessage([value1, value2]);
    });


    function getWorkerURL(url) {
        const content = `importScripts("${url}");`;
        return URL.createObjectURL(new Blob([content], {
            type: 'text/javascript'
        }));
    }
})();

参考リンク

https://stackoverflow.com/questions/21913673/execute-web-worker-from-different-origin

https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL
https://developer.mozilla.org/ja/docs/Web/API/URL/revokeObjectURL
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Using_web_workers
https://github.com/mdn/simple-web-worker

Discussion

ログインするとコメントできます