SharedWorker

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

メモ: SharedWorkerが複数の閲覧コンテキストからアクセスできる場合、それらの閲覧コンテキストはすべて、まったく同じオリジン(同じプロトコル、ホスト、ポート)を共有している必要があります。

EventTarget SharedWorker

コンストラクター

SharedWorker()

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

インスタンスプロパティ

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

SharedWorker.port 読取専用

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

イベント

error

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

メソッド

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

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

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

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

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

js
myWorker.port.start();

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

js
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 ハンドラーを使用します。

js
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.
};

仕様書

Specification
HTML
# shared-workers-and-the-sharedworker-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SharedWorker
SharedWorker() constructor
Support for ECMAScript modules
Strict MIME type checks for shared worker scripts
options.name parameter
options.sameSiteCookies parameter
options.type parameter
error event
port

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.

関連情報