SharedWorker インターフェースは複数のブラウザコンテキストからアクセス可能な Worker を提供します。複数のブラウザコンテキストとは、複数のウィンドウや iframe、Worker などを指します。Dedicated Worker とは異なるインタフェースと、異なるグローバルスコープを持ちます。スコープに関しては SharedWorkerGlobalScope を参照してください。

付記:同じオリジン、つまりプロトコル、ホスト名、ポートが全て同じ場合にのみ、SharedWorker は異なるブラウザコンテキスト間で共有されます。

コンストラクタ

SharedWorker()
指定された URL のスクリプトを実行する SharedWorker を作成します。

プロパティ

EventTarget のプロパティを継承し、 AbstractWorker で定義されるプロパティを実装しています。

AbstractWorker.onerror
type error である ErrorEvent がバブリングした時に呼ばれる EventListener
SharedWorker.port 読取専用
通信とコントロールに利用される MessagePort オブジェクトを返します。

メソッド

EventTarget のメソッドを継承し、 AbstractWorker に定義されるメソッドを実装します。

SharedWorker の基本利用例 (ライブデモ) には 2 つの HTML ページがあり、それぞれでは JavaScript で単純な計算を行っています。それぞれのスクリプトは計算を行うために同じ JS ファイルを Worker に実行させています。2 つのページが別のウインドウで動作していたとしても、同じ Worker にアクセスできています。

SharedWorker オブジェクトは SharedWorker() コンストラクタを利用して、次のように作成します:

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

それぞれのスクリプトは MessagePort オブジェクトを通じて Worker にアクセスします。このオブジェクトは SharedWorker.port プロパティから取得できます。addEventListener を読んで onmessage イベントのハンドラを登録したら、start() メソッドを呼んでポートを手動で開始できます:

myWorker.port.start();

ポートが開始されたら、Worker に向けてメッセージを送ったり、送られたメッセージを受け取ったりできます。これらには port.postMessage()port.onmessage を利用します:

first.onchange = function() {
    myWorker.port.postMessage([first.value,second.value]);
    console.log('Message posted to worker');
  }

  second.onchange = function() {
    myWorker.port.postMessage([first.value,second.value]);
    console.log('Message posted to worker');
  }

  myWorker.port.onmessage = function(e) {
    result1.textContent = e.data;
    console.log('Message received from worker');
  }

Worker の内部では SharedWorkerGlobalScope.onconnect に対してハンドラを設定することで、上述したポートへの接続を処理できます。Worker に関連付けられたポートは  connect イベントの ports 属性で参照できます。MessagePort の start() メソッドによるポート開始後は、onmessage ハンドラでメインスレッドからのメッセージを処理します。

onconnect = function(e) {
    var port = e.ports[0];

    port.addEventListener('message', function(e) {
      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
      port.postMessage(workerResult);
    });

    port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}

仕様

仕様 状況 コメント
HTML Living Standard
SharedWorker の定義
現行の標準 Unknown との差分なし

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 4Edge ? Firefox 完全対応 29IE 完全対応 10Opera 完全対応 10.6Safari 未対応 5 — 6.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 33Opera Android 完全対応 11.5Safari iOS 未対応 5.1 — 7.1Samsung Internet Android 完全対応 あり
SharedWorker() constructorChrome 完全対応 4Edge ? Firefox 完全対応 29IE 完全対応 10Opera 完全対応 10.6Safari 未対応 5 — 6.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 33Opera Android 完全対応 11.5Safari iOS 未対応 5.1 — 7.1Samsung Internet Android 完全対応 あり
portChrome 完全対応 4Edge ? Firefox 完全対応 29IE 完全対応 10Opera 完全対応 10.6Safari 未対応 5 — 6.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 33Opera Android 完全対応 11.5Safari iOS 未対応 5.1 — 7.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: YuichiNukiyama, chikoski
最終更新者: YuichiNukiyama,