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

公開:2020/12/26
更新:2020/12/26
2 min読了の目安(約1800字TECH技術記事

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

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

Demo

https://blog.abct93.com/sample-develop/html/SampleWorker.html

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

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

実装が完了したら、静的ホスティング可能なサービスにデプロイします。今回はGithub Pagesにアップしました。
SampleWorker.js

SampleWorker.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://blog.abct93.com/sample-develop/js/SampleWorker.js';

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

    // Workerスレッドから結果の受け取り
    myWorker.onmessage = (event) => 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