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 との差分なし |