ウェブワーカー API

ウェブワーカー (Web Worker) とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。

ウェブワーカーの概念と使い方

ワーカーオブジェクトはコンストラクター（Worker() など）を用いて生成され、名前を持つ JavaScript ファイルを実行します。このファイルにはワーカースレッドで実行されるコードが書かれています。

ワーカースレッドの中では、 JavaScript の標準の一連の関数（String、Array、Object、JSON、など）に加え、任意のコードのほとんどを実行することができます。いくつかの例外があります。例えば、ワーカー内から直接 DOM を操作することはできません。また、 window オブジェクトの既定のメソッドやプロパティには使用できないものがあります。実行できるコードについては、以下のワーカーグローバルコンテキストと関数や利用可能な Web API を参照してください。

ワーカーとメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は postMessage() メソッドを使ってメッセージを送信したり、受け取ったメッセージには onmessage イベントハンドラーで返信したりします（メッセージはメッセージイベントの data 属性に格納されます）。なお、データは共有されるのではなく複製されます。

ワーカーが親ページと同じオリジン内でホスティングされるのであれば、新しいワーカーをいくつも起動することができます。また、ワーカーはネットワーク I/O において XMLHttpRequest を使用しますが、 XMLHttpRequest における responseXML および channel 属性は必ず null を返す点が通常と異なります。

ワーカーの種類

ワーカーにはいくつもの種類があります。

専用ワーカー (dedicated worker) は、単一のスクリプトで利用されるワーカーです。このコンテキストは DedicatedWorkerGlobalScope オブジェクトで表現されます。
共有ワーカー (shared worker) は、ワーカーと同じドメイン内にある限り、異なるウィンドウや iframe などで動作する複数のスクリプトで利用できるワーカーです。専用ワーカーよりも少し複雑で、スクリプトはアクティブなポートを介して通信する必要があります。
サービスワーカーは、基本的に複数のウェブアプリケーション間やブラウザー、（利用可能なら）ネットワークの間でプロキシーサーバーとして動くものです。他にも、効果的なオフライン操作を実現したり、ネットワークリクエストを遮断してネットワークが利用できるかどうかで適切なアクションを取ったり、サーバーにある資産を更新したりすることなどを目的としています。また、プッシュ通知やバックグラウンド同期APIへのアクセスも可能になる予定です。

Note: Web workers 仕様書によれば、ワーカーのエラーイベントはバブリングすべきではありません（バグ 1188141 を参照。これは Firefox 42 で実装されました）。

ワーカーグローバルコンテキストと関数

ワーカーは現在の window とは異なるグローバルなコンテキストで実行されます。 Window はワーカーから直接利用できませんが、同じメソッドの多くは共有されるミックスイン (WindowOrWorkerGlobalScope) で定義され、各自の WorkerGlobalScope から派生したコンテキストを通じてワーカーが利用できるようにします。

DedicatedWorkerGlobalScope （専用ワーカー向け）
SharedWorkerGlobalScope （共有ワーカー向け）
ServiceWorkerGlobalScope （サービスワーカー向け）

すべてのワーカーとメインスレッドで共通の関数（WindowOrWorkerGlobalScope からのもの）には、atob()、btoa()、clearInterval()、clearTimeout()、dump() Non-standard 、setInterval()、setTimeout() などがあります。

以下の関数はワーカーでのみ利用することができます。

WorkerGlobalScope.importScripts() （すべてのワーカー）
DedicatedWorkerGlobalScope.postMessage (en-US) （専用ワーカーのみ）

利用可能な Web API

Note: 掲載されている API が特定のバージョンのプラットフォームで対応している場合、一般的にウェブワーカーでも利用可能とみなされます。また、 https://worker-playground.glitch.me/ を使用して特定のオブジェクト/関数の対応をテストすることもできます。

ワーカーで利用可能な Web APIは、バーコード検出 API、放送チャンネル API、キャッシュ API、チャンネルメッセージ API、コンソール API, ウェブ暗号化 API (Crypto)、CustomEvent、エンコーディング API (TextEncoder、TextDecoder、など）、フェッチ API、FileReader、FileReaderSync （ワーカーでのみ動作）、FormData、ImageData、IndexedDB, ネットワーク情報 API, 通知 API、パフォーマンス API （Performance、PerformanceEntry、PerformanceMeasure、PerformanceMark、PerformanceObserver、PerformanceResourceTiming、など)、Promise、サーバー送信イベント、ServiceWorkerRegistration、URL API （URL など)、WebGL （OffscreenCanvas による）、WebSocket、XMLHttpRequest です。

ワーカーは他のワーカーを起動することができ、そのために Worker、WorkerGlobalScope、WorkerLocation、WorkerNavigator (en-US) も利用可能です。

ウェブワーカーのインターフェイス

Worker: 実行しているワーカーのスレッドを表します。実行しているワーカーのコードへメッセージを送る際に用います。
WorkerLocation: Worker で実行されるスクリプトの絶対位置を定義します。
SharedWorker: 複数の閲覧コンテキスト（すなわちウィンドウ、タブ、iframe）や他のワーカーからアクセス可能な特定の種類のワーカーを表します。
WorkerGlobalScope: あらゆるワーカーの一般的なスコープを表します（通常のウェブコンテンツに対して Window が行うのと同じ役割をします）。それぞれの種類のワーカーには、このインターフェイスを継承し、より具体的な機能を追加したスコープオブジェクトがあります。
DedicatedWorkerGlobalScope: 専用ワーカーのスコープを表します。 WorkerGlobalScope を継承しており、独自の機能がいくつか加えられています。
SharedWorkerGlobalScope: 共有ワーカーのスコープを表します。 WorkerGlobalScope を継承しており、独自の機能がいくつか加えられています。
WorkerNavigator (en-US): ユーザーエージェント（クライアント）に関する識別名と状態を表します。

例

簡単なデモと基本的な使い方は以下を参照してください。

これらのデモの動く仕組みを詳しく知りたい場合は。ウェブワーカーの使用を参照してください。

仕様書

Specification
HTML Standard # workers