SharedWorker

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

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

Note: Firefox では、プライベートブラウジングをしているウィンドウに代表されるプライベートなドキュメントと、そうでないドキュメントの間では SharedWorker は共有されません。(詳しくは バグ 1177621 を参照してください)

属性

EventTarget の属性を継承し、 AbstractWorker で定義される属性を実装しています。

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

コンストラクタ

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

メソッド

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

仕様

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

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support 4 29.0 (29.0) 未サポート 10.60 5
未サポート 6.1
Feature Android Chrome for Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile
Support 未サポート 未サポート 33.0 (33.0) 2.1 未サポート 11.5 5.1
未サポート 7.1

関連情報

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

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