1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: Worker
slug: Web/API/Worker
tags:
- API
- DOM
- Interface
- NeedsTranslation
- Reference
- TopicStub
- Web Workers
- Worker
- Workers
translation_of: Web/API/Worker
---
<p>{{APIRef("Web Workers API")}}</p>
<p>The <strong><code>Worker</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the <code>Worker()</code> constructor and specifying a script to be run in the worker thread.</p>
<p>Workers may in turn spawn new workers as long as those workers are hosted within the same origin as the parent page (Note: nested workers are <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">currently not implemented in Blink</a>). In addition workers may use <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> for network I/O, with the stipulation that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</p>
<p>Not <a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">all interfaces and functions are available</a> to the script associated with a <code>Worker</code>.</p>
<p>In Firefox, if you want to use workers in extensions and would like to have access to <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, you should use the {{ domxref("ChromeWorker") }} object instead.</p>
<h2 id="Properties">Properties</h2>
<p><em>Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p>
<h3 id="Event_handlers">Event handlers</h3>
<dl>
<dt>{{domxref("AbstractWorker.onerror")}}</dt>
<dd>An {{ domxref("EventListener") }} called whenever an {{domxref("ErrorEvent")}} of type <code>error</code> bubbles through to the worker. This is inherited from {{domxref("AbstractWorker")}}.</dd>
<dt>{{domxref("Worker.onmessage")}}</dt>
<dd>An {{ domxref("EventListener") }} called whenever a {{domxref("MessageEvent")}} of type <code>message</code> bubbles through the worker — i.e. when a message is sent to the parent document from the worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. The message is stored in the event's {{domxref("MessageEvent.data", "data")}} property.</dd>
</dl>
<h2 id="Constructors">Constructors</h2>
<dl>
<dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
<dd>Creates a dedicated web worker that executes the script at the specified URL. Workers can also be constructed using <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p>
<dl>
<dt>{{domxref("Worker.postMessage()")}}</dt>
<dd>Sends a message — which can consist of <code>any</code> JavaScript object — to the worker's inner scope.</dd>
<dt>{{domxref("Worker.terminate()")}}</dt>
<dd>Immediately terminates the worker. This does not offer the worker an opportunity to finish its operations; it is simply stopped at once. ServiceWorker instances do not support this method.</dd>
</dl>
<h2 id="Example">Example</h2>
<p>The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor and usage of the object:</p>
<pre class="brush: js">var myWorker = new Worker("worker.js");
first.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}</pre>
<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No change from {{SpecName("Web Workers")}}.</td>
</tr>
<tr>
<td>{{SpecName('Web Workers', "#worker", "Worker")}}</td>
<td>{{Spec2('Web Workers')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>Support varies for different types of workers. See each worker type's page for specifics.</p>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>4</td>
<td>3.5</td>
<td>10.0</td>
<td>10.6</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>4.4</td>
<td>3.5</td>
<td>1.0.1</td>
<td>10.0</td>
<td>11.5</td>
<td>5.1</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li>
<li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li>
<li>Other kind of workers: {{ domxref("SharedWorker") }} and <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
<li>Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions.</li>
</ul>
|
