SharedWorker

SharedWorker インターフェイスは、ウィンドウ、iframe、ワーカーなど複数の閲覧コンテキストからアクセスできる、特定の種類のワーカーを表します。これらは専用ワーカーとは異なるインターフェイスを実装しており、異なるグローバルコンテキストである SharedWorkerGlobalScope を持ちます。

コンストラクター

SharedWorker()

指定された URL のスクリプトを実行する共有ウェブワーカーを作成します。

インスタンスプロパティ

EventTarget のプロパティを継承しています。

SharedWorker.port 読取専用

共有ワーカーとの通信および制御に使用される MessagePort オブジェクトを返します。

イベント

error

共有ワーカーでエラーが発生したときに発行されます。

メソッド

EventTarget のメソッドを継承しています。

例

基本的な共有ワーカーの例(共有ワーカーを実行)には 2 つの HTML ページがあり、それぞれでは JavaScript で単純な計算を行っています。異なるスクリプトが同じワーカーファイルを使用して計算を行っているため、ページが異なるウィンドウで実行されていても、どちらもアクセスすることができます。

以下のコードでは SharedWorker オブジェクトを、 SharedWorker() コンストラクターを使用して生成しています。どちらのスクリプトもこれを格納します。

const myWorker = new SharedWorker("worker.js");

どちらのスクリプトも、SharedWorker.port プロパティを使用して作成された MessagePort オブジェクトを通してワーカーにアクセスします。addEventListener を使用して onmessage イベントが関連づけられている場合、ポートはその start() メソッドを使用して手動で開始されます。

myWorker.port.start();

ポートが開始されると、どちらのスクリプトも port.postMessage() と port.onmessage を使用して、それぞれワーカーにメッセージを投稿し、ワーカーから送られたメッセージを処理します。

first.onchange = () => {
 myWorker.port.postMessage([first.value, second.value]);
 console.log("Message posted to worker");
};
second.onchange = () => {
 myWorker.port.postMessage([first.value, second.value]);
 console.log("Message posted to worker");
};
myWorker.port.onmessage = (e) => {
 result1.textContent = e.data;
 console.log("Message received from worker");
};

ワーカー内部では onconnect ハンドラーを使用して、前述と同じポートに接続します。そのワーカーに関連するポートは connect イベントの ports プロパティでアクセスできます。それから MessagePort を使用して、ワーカーを開始します。ポートを始めるには start() メソッドを、メインスレッドから送られるメッセージを処理するには onmessage ハンドラーを使用します。

onconnect = (e) => {
 const port = e.ports[0];
 port.addEventListener("message", (e) => {
 const workerResult = `Result: ${e.data[0] * e.data[1]}`;
 port.postMessage(workerResult);
 });
 port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

仕様書

ブラウザーの互換性

関連情報

• Worker