🙆
外部ドメインの Web Worker を利用する方法
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'
}));
}
})();
参考リンク
Discussion