diff options
Diffstat (limited to 'files/pt-br/web/api/sharedworker/index.html')
| -rw-r--r-- | files/pt-br/web/api/sharedworker/index.html | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/files/pt-br/web/api/sharedworker/index.html b/files/pt-br/web/api/sharedworker/index.html new file mode 100644 index 0000000000..6aa6257435 --- /dev/null +++ b/files/pt-br/web/api/sharedworker/index.html @@ -0,0 +1,188 @@ +--- +title: SharedWorker +slug: Web/API/SharedWorker +tags: + - API + - Interface + - NeedsTranslation + - Reference + - SharedWorker + - TopicStub + - Web Workers + - Workers +translation_of: Web/API/SharedWorker +--- +<div>{{APIRef("Web Workers API")}}</div> + +<p>The <code><strong>SharedWorker</strong></code> interface represents a specific kind of worker that can be <em>accessed</em> from several browsing contexts, such as several windows, iframes or even workers. They implement an interface different than dedicated workers and have a different global scope, {{domxref("SharedWorkerGlobalScope")}}.</p> + +<div class="note"> +<p><strong>Note:</strong> If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port).</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: In Firefox, shared workers cannot be shared between private (i.e. browsing in a private window) and non-private documents (see {{bug(1177621)}}.)</p> +</div> + +<h2 id="Constructors">Constructors</h2> + +<dl> + <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt> + <dd>Creates a shared web worker that executes the script at the specified URL.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p> + +<dl> + <dt>{{domxref("AbstractWorker.onerror")}}</dt> + <dd>Is an {{domxref("EventListener")}} that is called whenever an {{domxref("ErrorEvent")}} of type <code>error</code> bubbles through the worker.</dd> + <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("MessagePort")}} object used to communicate and control the shared worker.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}, and implements methods from {{domxref("AbstractWorker")}}.</em></p> + +<h2 id="Example">Example</h2> + +<p>In our <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>), we have two HTML pages, each of which uses some JavaScript to perform a simple calculation. The different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different windows.</p> + +<p>The following code snippet shows creation of a <code>SharedWorker</code> object using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. Both scripts contain this:</p> + +<pre class="brush: js">var myWorker = new SharedWorker('worker.js'); +</pre> + +<p>Both scripts then access the worker through a {{domxref("MessagePort")}} object created using the {{domxref("SharedWorker.port")}} property. If the onmessage event is attached using addEventListener, the port is manually started using its <code>start()</code> method:</p> + +<pre class="brush: js">myWorker.port.start();</pre> + +<p>When the port is started, both scripts post messages to the worker and handle messages sent from it using <code>port.postMessage()</code> and <code>port.onmessage</code>, respectively:</p> + +<pre class="brush: js">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'); +}</pre> + +<p>Inside the worker we use the {{domxref("SharedWorkerGlobalScope.onconnect")}} handler to connect to the same port discussed above. The ports associated with that worker are accessible in the {{event("connect")}} event's <code>ports</code> property — we then use {{domxref("MessagePort")}} <code>start()</code> method to start the port, and the <code>onmessage</code> handler to deal with messages sent from the main threads.</p> + +<pre class="brush: js">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. +}</pre> + +<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', "#sharedworker", "SharedWorker")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("Web Workers")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Support</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatGeckoDesktop(29.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(10.60)}}</td> + <td>5<br> + {{CompatNo}} 6.1</td> + </tr> + <tr> + <td>Constructor <code>name</code> option</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("33.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.5</td> + <td>5.1<br> + {{CompatNo}} 7.1</td> + </tr> + <tr> + <td>Constructor <code>name</code> option</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Worker")}}</li> + <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> |
