外部ドメインのWeb Workerを利用する方法
実現したいこと・前提条件
- Workerスレッドで実行したい処理がある
- 同一リポジトリ配下にWeb Worker用のJSファイルを配置できない。
- S3やGithub Pagesに配置して複数コンテンツで利用したい。
Demo
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'
}));
}
})();