initial commit

3 files changed, 272 insertions, 0 deletions

diff --git a/files/fr/web/api/sharedworker/index.html b/files/fr/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..bb9e9f5a39
--- /dev/null
+++ b/files/fr/web/api/sharedworker/index.html
@@ -0,0 +1,116 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+tags:
+  - API
+  - Interface
+  - Reference
+  - Shared
+  - SharedWorker
+  - Worker
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>L'interface <code><strong>SharedWorker</strong></code> représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Remarque :</strong> si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)</p>
+</div>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Crée un web worker partagé qui exécute le script spécifié par l'URL.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Il hérite des propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Est un {{ domxref("EventListener") }} qui est appelé à chaque fois qu'un {{domxref("ErrorEvent")}} de type <code>error</code> se propage à travers le worker.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("MessagePort")}} utilisé pour communiquer et contrôler le worker partagé.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente les méthodes de {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre  <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.</p>
+
+<p>L'extrait de code suivant illustre la création d'un objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">SharedWorker</span><span class="punctuation token">(</span><span class="string token">"worker.js"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode <code>start()</code> :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">start<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement <code>port.postMessage()</code> et <code>port.onmessage</code> :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">first<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  second<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    result1<span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message reçu du worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété <code>ports</code> de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} <code>start()</code> pour démarrer le port, et le gestionnaire <code>onmessage</code> pour s'occuper des messages en provenance des threads principaux.</p>
+
+<pre class="brush: js  language-js"><code class="language-js">onconnect <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> port <span class="operator token">=</span> e<span class="punctuation token">.</span>ports<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+    port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> workerResult <span class="operator token">=</span> <span class="string token">'Result: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">*</span> e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span>workerResult<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    port<span class="punctuation token">.</span><span class="function token">start<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification de {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.SharedWorker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Worker") }}</li>
+ <li><a class="internal" href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworker/port/index.html b/files/fr/web/api/sharedworker/port/index.html
new file mode 100644
index 0000000000..80605091d8
--- /dev/null
+++ b/files/fr/web/api/sharedworker/port/index.html
@@ -0,0 +1,55 @@
+---
+title: SharedWorker.port
+slug: Web/API/SharedWorker/port
+translation_of: Web/API/SharedWorker/port
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>La propriété <code><strong>port</strong></code> de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le <em>worker</em> partagé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">myWorker.port;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("MessagePort")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple de code suivant montre la création de l'objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Plusieurs scriptes peuvent accéder au <em>worker</em> avec l'objet {{domxref("MessagePort")}} accessible grâce à la propriété <code>SharedWorker.port</code> — le port est ouvert avec la méthode <code>start()</code>.</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+myWorker.port.start();</pre>
+
+<p>Pour un exemple complet, voir <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">(en) Exemple basique de <em>worker</em> partagé</a> (<a class="external external-icon" href="https://mdn.github.io/simple-shared-worker/">(en) démonstration d'un <em>worker</em> partagé</a>.)</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorker.port")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("SharedWorker")}} auquel il appartient.</li>
+ <li><a href="https://anlexn.github.io/shared-worker-mdn/">(en) Une autre démonstration de multiplication.</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworker/sharedworker/index.html b/files/fr/web/api/sharedworker/sharedworker/index.html
new file mode 100644
index 0000000000..fb98ecbe33
--- /dev/null
+++ b/files/fr/web/api/sharedworker/sharedworker/index.html
@@ -0,0 +1,101 @@
+---
+title: SharedWorker()
+slug: Web/API/SharedWorker/SharedWorker
+translation_of: Web/API/SharedWorker/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>Le constructeur <code><strong>SharedWorker()</strong></code> crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la <a href="/fr/docs/Web/Security/Same-origin_policy">politique de même origine</a>.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monWorker = new SharedWorker(<em>uneURL</em>, <em>nom</em>);
+var monWorker = new SharedWorker(<em>uneURL</em>, <em>options</em>);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><em>uneURL</em></dt>
+ <dd>Une {{domxref("DOMString")}} qui représente l'URL du scripte du <em>worker</em> qui sera exécuté. Il doit obéir à la politique de même origine.</dd>
+ <dt>nom {{optional_inline}}</dt>
+ <dd>Une {{domxref("DOMString")}} indiquant un nom pour le {{domxref("SharedWorkerGlobalScope")}} représentant la portée du <em>worker</em>. Souvent utilisé pour le débogage.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Une objet contenant les propriétés qui peuvent être défini à la création. Les propriété possibles sont:
+ <ul>
+  <li><code>type</code>: Une {{domxref("DOMString")}} spécifiant le type de <em>worker</em> à créer. Les valeurs possibles sont: <code>classic</code> ou <code>module</code>. Si non spécifié, la valeur par défaut est <code>classic</code>.</li>
+  <li><code>credentials</code>: Une {{domxref("DOMString")}} spécifiant le type de crédit à utilisé pour le <em>worker</em>. La valeur peut être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. Si non spécifié ou si le type est <code>classic</code>, la valeur par défaut sera <code>omit</code> (pas de crédit nécéssaire).</dfn></li>
+  <li><dfn><code>name</code>: Une </dfn>{{domxref("DOMString")}} spécifiant un identifiant pour le {{domxref("SharedWorkerGlobalScope")}} représentant la porté du <em>worker</em>, souvent utilisé pour déboguer.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Le <em>woker</em> créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une <code>SecurityError</code> est levé si le document n'est pas autorisé à lancer le <em>worker</em>. Par exemple si l'URL a une syntaxe invalide ou si la politique de même origine est violée.</li>
+ <li>Une <code>NetworkError</code> est levé si le type MIME du script <em>worker</em> n'est pas correct. Le type MIME doit toujours être <code>text/javascript</code>.</li>
+ <li>Une <code>SyntaxError</code> est levée si <em>uneURL</em> ne peut pas être analysée.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} en utilisant le contructeur <code>SharedWorker()</code> et l'usage qui en est fait.</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+
+myWorker.port.start();
+
+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>Pour l'exemple en complet, voir <a class="external-icon external" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external-icon external" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorker.SharedWorker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("SharedWorker")}} auquel il appartient.</li>
+ <li><a href="https://anlexn.github.io/shared-worker-mdn/">Une autre démonstration de multiplication.</a></li>
+</ul>