ウェブワーカー API
ウェブワーカー (Web Worker) とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。
概念と使い方
ワーカーオブジェクトはコンストラクター(Worker()
など)を用いて生成され、名前を持つ JavaScript ファイルを実行します。このファイルにはワーカースレッドで実行されるコードが書かれています。
ワーカースレッドの中では、 JavaScript の標準の一連の関数(String
、Array
、Object
、JSON
、など)に加え、任意のコードのほとんどを実行することができます。いくつかの例外があります。例えば、ワーカー内から直接 DOM を操作することはできません。また、 Window
オブジェクトの既定のメソッドやプロパティには使用できないものがあります。実行できるコードについては、対応している関数や対応している Web APIを参照してください。
ワーカーとメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は postMessage()
メソッドを使ってメッセージを送信したり、受け取ったメッセージには onmessage
イベントハンドラーで返信したりします(メッセージはメッセージ
イベントの data
属性に格納されます)。なお、データは共有されるのではなく複製されます。
ワーカーが親ページと同じオリジン内でホスティングされるのであれば、新しいワーカーをいくつも起動することができます。
また、ワーカーは fetch()
または XMLHttpRequest
API を使用してネットワークリクエストを作成することができます(ただし、 XMLHttpRequest
の responseXML
属性が常に null
になることに注意してください)。
ワーカーの種類
ワーカーにはいくつもの種類があります。
- 専用ワーカー (dedicated worker) は、単一のスクリプトで利用されるワーカーです。このコンテキストは
DedicatedWorkerGlobalScope
オブジェクトで表現されます。 - 共有ワーカー (shared worker) は、ワーカーと同じドメイン内にある限り、異なるウィンドウや iframe などで動作する複数のスクリプトで利用できるワーカーです。専用ワーカーよりも少し複雑で、スクリプトはアクティブなポートを介して通信する必要があります。
- サービスワーカー (service worker) は、基本的に複数のウェブアプリケーション間やブラウザー、(利用可能なら)ネットワークの間でプロキシーサーバーとして動くものです。他にも、効果的なオフライン操作を実現したり、ネットワークリクエストを遮断してネットワークが利用できるかどうかで適切なアクションを取ったり、サーバーにある資産を更新したりすることなどを目的としています。また、プッシュ通知やバックグラウンド同期APIへのアクセスも可能になる予定です。
ワーカーコンテキスト
Window
はワーカーから直接利用できませんが、同じメソッドの多くは共有されるミックスイン (WindowOrWorkerGlobalScope
) で定義され、各自の WorkerGlobalScope
から派生したコンテキストを通じてワーカーが利用できるようにします。
DedicatedWorkerGlobalScope
(専用ワーカー向け)SharedWorkerGlobalScope
(共有ワーカー向け)ServiceWorkerGlobalScope
(サービスワーカー向け)
インターフェイス
Worker
-
実行しているワーカーのスレッドを表します。実行しているワーカーのコードへメッセージを送る際に用います。
WorkerLocation
-
Worker
で実行されるスクリプトの絶対位置を定義します。 -
複数の閲覧コンテキスト(すなわちウィンドウ、タブ、iframe)や他のワーカーからアクセス可能な特定の種類のワーカーを表します。
WorkerGlobalScope
-
あらゆるワーカーの一般的なスコープを表します(通常のウェブコンテンツに対して
Window
が行うのと同じ役割をします)。それぞれの種類のワーカーには、このインターフェイスを継承し、より具体的な機能を追加したスコープオブジェクトがあります。 DedicatedWorkerGlobalScope
-
専用ワーカーのスコープを表します。
WorkerGlobalScope
を継承しており、独自の機能がいくつか加えられています。 -
共有ワーカーのスコープを表します。
WorkerGlobalScope
を継承しており、独自の機能がいくつか加えられています。 -
ユーザーエージェント(クライアント)に関する識別名と状態を表します。
例
簡単なデモと基本的な使い方は以下を参照してください。
これらのデモの動く仕組みを詳しく知りたい場合は。ウェブワーカーの使用を参照してください。
仕様書
Specification |
---|
HTML # workers |
関連情報
- ウェブワーカーの使用
Worker
インターフェイスSharedWorker
インターフェイス- サービスワーカー API