Web Worker とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。
Web Worker の概念と使い方
Worker オブジェクトは Worker() などのコンストラクターで生成されるオブジェクトで、名前を持つ JavaScript ファイルを実行します。 Worker のスレッドで実行されるコードはこのファイルに書かれており、今いる window とは別のグローバルなコンテキストの中で Worker がコードを実行します。Dedicated Worker (専用ワーカー) の場合、そのコンテキストは DedicatedWorkerGlobalScope オブジェクトで表現されます (通常の Worker は単一のスクリプトで使用されますが、 Worker を共有する際は SharedWorkerGlobalScope を使用します)。
Worker のスレッドではあらゆるコードを実行できますが、いくつか例外があります。例えば、 Worker から DOM を直接操作することは出来ません。また、 window にデフォルトで用意されているメソッドやプロパティには Worker から使用できないものもあります。しかし、 WebSockets や IndexedDB のようなデータストレージに加え、 Firefox OS における Data Store API など、 window に含まれていても使用できるものは数多くあります。詳しくは Worker から使用できる関数とクラス を参照してください。
Worker とメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は postMessage() メソッドを使ってメッセージを送信し、受け取ったメッセージには onmessage イベントハンドラーで返信します (メッセージは Message イベントの data 属性に格納されます)。なお、送信したデータは受取先でコピーされます (共有ではありません)。
メインスレッドのページと同じオリジンであれば、 Web Workers は新しい Worker をいくつでも生成できます。また、 Worker はネットワーク I/O において XMLHttpRequest を使用しますが、 XMLHttpRequest における responseXML と channel 属性は必ず null を返す点で通常と異なります。
Dedicated Worker の他にも、 Worker の種類には以下のようなものがあります。
- Shared Worker (共有ワーカー) は、 iframe などの異なる window で実行されている複数のスクリプトから利用できる Worker です。それらのスクリプトと Worker は同じドメイン内にある必要があります。スクリプトどうしがアクティブなポートで通信しなければならないので、 Dedicated Worker よりも少し複雑です。詳しくは
SharedWorkerを参照してください。 - ServiceWorker は、複数のウェブアプリケーション間やブラウザ、 (利用可能なら) ネットワークとの間でプロキシサーバーとして動くものです。他の Worker とは異なり、 Service Worker はオフラインでのユーザーエクスペリエンスを実現するために設計されています。ネットワークへのリクエストに割り込み、オンライン・オフラインそれぞれの場合に適した結果をユーザに返します。また、サーバ上のリソースの更新も担います。 Service Worker を使うことで、プッシュ通知やバックグラウンド同期の API も利用可能になります。
- Chrome Worker は Firefox 上でのみ使える Worker です。アドオンの開発時、拡張機能で Web Workers を使いたいとき、または Worker の中で js-ctypes を使いたいときに用いることが出来ます。詳しくは
ChromeWorkerを参照してください。 - Audio Worker は、音声処理を Worker のコンテキスト内でスクリプトで直接実行する能力を提供します。
メモ: Web Worker の仕様にあるように、Worker のエラーイベントはバブルするべきではありません (see バグ 1188141。これは Firefox 42 で実装されました。
Web Worker インターフェイス
AbstractWorkerWorkerやSharedWorkerなど、すべての Worker に共通な抽象オブジェクトです。Worker- 実行している Worker のスレッドを表します。実行している Worker のコードへメッセージを送る際に用います。
WorkerLocationWorkerで実行されるスクリプトの絶対位置を定義します。SharedWorker- 複数のウィンドウ、 iframe、ワーカーなどいくつかの閲覧コンテキストから「アクセス可能な」具体的な種類の Worker を表します。
WorkerGlobalScopeWindowのように通常のウェブコンテンツと同じ動作をする Worker の一般的なスコープを表します。これと異なる種類の Worker は、このインタフェースに独自の機能をいくつか加えたスコープを持ちます。DedicatedWorkerGlobalScope- Dedicated Worker のスコープを表します。
WorkerGlobalScopeを継承しており、独自の機能がいくつか加えられています。 SharedWorkerGlobalScope- Shared Worker のスコープを表します。
WorkerGlobalScopeを継承しており、独自の機能がいくつか加えられています。 WorkerNavigator- ユーザエージェント (クライアント) に関する識別名と状態を表します。
例
簡単なデモと基本的な使い方は以下を参照してください。
- Basic dedicated worker example (run dedicated worker).
- Basic shared worker example (run shared worker).
このデモの動く仕組みを詳しく知りたい場合は Web Worker を使用するを参照してください。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard Web Workers の定義 |
現行の標準 | 初回定義 |
ブラウザーの対応
現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから！
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| 基本対応 | 4 | (有) | 3.5 (1.9.1) | 10 | 10.6 | 4 |
| Shared worker | 4 | 未サポート | 29 (29) | 未サポート | 10.6 | 4 |
| 構造化された複製を使用したデータの受け渡し | 13 | (有) | 8 (8) | 10 | 11.5 | 6 |
| 転送可能なオブジェクトを使用したデータの受け渡し | 17webkit 21 |
未サポート | 18 (18) | 未サポート | 15 | 6 |
グローバル URL |
10webkit 32 |
(有) | 21 (21) | 11 | 15 | 6webkit 7 |
| 機能 | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 標準サポート | 4.4 | 4 | (有) | 1.0 (1.9.1) | 11.5 | 5.1 |
| Shared Worker | 未サポート | 4 | 未サポート | 29.0 (29) | 未サポート | 未サポート |
| 構造化された複製を使用したデータの受け渡し | 未サポート | 4 | (有) | 8.0 (8) | 未サポート | 未サポート |
| 転送可能なオブジェクトを使用したデータの受け渡し | 未サポート | 未サポート | 未サポート | 18.0 (18) | 未サポート | 未サポート |
グローバル URL |
(有) | (有) | (有) | 21.0 (21) | (有) | 6webkit 7 |