diff options
author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/serviceworkercontainer | |
parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip |
convert content to md
Diffstat (limited to 'files/fr/web/api/serviceworkercontainer')
3 files changed, 129 insertions, 173 deletions
diff --git a/files/fr/web/api/serviceworkercontainer/getregistration/index.md b/files/fr/web/api/serviceworkercontainer/getregistration/index.md index d18712f2ff..795e44e476 100644 --- a/files/fr/web/api/serviceworkercontainer/getregistration/index.md +++ b/files/fr/web/api/serviceworkercontainer/getregistration/index.md @@ -3,55 +3,39 @@ title: ServiceWorkerContainer.getRegistration() slug: Web/API/ServiceWorkerContainer/getRegistration translation_of: Web/API/ServiceWorkerContainer/getRegistration --- -<p>{{APIRef("Service Workers API")}}</p> +{{APIRef("Service Workers API")}} -<p>La méthode <strong><code>getRegistration()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} fournis un objet {{domxref("ServiceWorkerRegistration")}} dont la porté inclue l'URL du document. Cette méthode retourne une {{jsxref("Promise")}} qui se résout avec un {{domxref("ServiceWorkerRegistration")}} ou <code>undefined</code>.</p> +La méthode **`getRegistration()`** de l'interface {{domxref("ServiceWorkerContainer")}} fournis un objet {{domxref("ServiceWorkerRegistration")}} dont la porté inclue l'URL du document. Cette méthode retourne une {{jsxref("Promise")}} qui se résout avec un {{domxref("ServiceWorkerRegistration")}} ou `undefined`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>serviceWorkerContainer</em>.getRegistration(<em>scope</em>).then(function(<em>serviceWorkerRegistration</em>) { ... });</pre> + serviceWorkerContainer.getRegistration(scope).then(function(serviceWorkerRegistration) { ... }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>scope</code> {{optional_inline}}</dt> - <dd>Un identifiant unique pour l'enregistrement du service worker que vous voulez récupérer. L'URL de porté de l'enregistrement . C'est souvent une URL relative.</dd> -</dl> +- `scope` {{optional_inline}} + - : Un identifiant unique pour l'enregistrement du service worker que vous voulez récupérer. L'URL de porté de l'enregistrement . C'est souvent une URL relative. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Une {{domxref("Promise")}} qui est résolue avec un objet {{domxref("ServiceWorkerRegistration")}} ou <code>undefined</code>.</p> +Une {{domxref("Promise")}} qui est résolue avec un objet {{domxref("ServiceWorkerRegistration")}} ou `undefined`. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">navigator.serviceWorker.getRegistration('/app').then(function(registration) { +```js +navigator.serviceWorker.getRegistration('/app').then(function(registration) { if(registration){ document.querySelector('#status').textContent = 'ServiceWorkerRegistration found.'; } }); -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statuts</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statuts | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> - - -<p>{{Compat("api.ServiceWorkerContainer.getRegistration")}}</p> -</div> +{{Compat("api.ServiceWorkerContainer.getRegistration")}} diff --git a/files/fr/web/api/serviceworkercontainer/index.md b/files/fr/web/api/serviceworkercontainer/index.md index 9201074b47..c7de9a158f 100644 --- a/files/fr/web/api/serviceworkercontainer/index.md +++ b/files/fr/web/api/serviceworkercontainer/index.md @@ -3,51 +3,46 @@ title: ServiceWorkerContainer slug: Web/API/ServiceWorkerContainer translation_of: Web/API/ServiceWorkerContainer --- -<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> +{{SeeCompatTable}}{{APIRef("Service Workers API")}} -<p>L’interface <code>ServiceWorkerContainer</code> de l’<a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> fournit un objet représentant le service worker comme une unité globale de l’écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l’état des services workers et de leurs enregistrements.</p> +L’interface `ServiceWorkerContainer` de l’[API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API) fournit un objet représentant le service worker comme une unité globale de l’écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l’état des services workers et de leurs enregistrements. -<p>Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée.</p> +Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt> - <dd>Retourne un objet {{domxref("ServiceWorker")}} si son état est <code>activated</code> (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne <code>null</code> si la requête est un rechargement forcé (<em>Majuscule</em> + rechargement) ou si il n'y a pas de worker actif.</dd> -</dl> +- {{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}} + - : Retourne un objet {{domxref("ServiceWorker")}} si son état est `activated` (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne `null` si la requête est un rechargement forcé (*Majuscule* + rechargement) ou si il n'y a pas de worker actif. -<dl> - <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt> - <dd>Détermine si oui ou non un service worker est prêt à contrôler la page. Cette propriété retourne une {{jsxref("Promise")}} qui ne sera jamais rejetée, et se résoudra en un {{domxref("ServiceWorkerRegistration")}} avec un worker en état {{domxref("ServiceWorkerRegistration.active")}}.</dd> -</dl> +<!----> -<h3 id="Gestionnaires_d'événement">Gestionnaires d'événement</h3> +- {{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}} + - : Détermine si oui ou non un service worker est prêt à contrôler la page. Cette propriété retourne une {{jsxref("Promise")}} qui ne sera jamais rejetée, et se résoudra en un {{domxref("ServiceWorkerRegistration")}} avec un worker en état {{domxref("ServiceWorkerRegistration.active")}}. -<dl> - <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt> - <dd>Un gestionnaire d’événement lancé quand un événement {{Event("controllerchange")}} se produit — quand le {{domxref("ServiceWorkerRegistration")}} associé au document ajoute un nouveau worker en état {{domxref("ServiceWorkerRegistration.active")}}.</dd> - <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt> - <dd>Un gestionnaire d’événement lancé quand un événement {{Event("error")}} se produit dans le service worker associé.</dd> - <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt> - <dd>Un gestionnaire d’événement lancé quand un événement {{Event("message")}} se produit — quand des messages entrants sont reçus par l’objet {{domxref("ServiceWorkerContainer")}} (e.g. par un appel à {{domxref("MessagePort.postMessage()")}}.)</dd> -</dl> +### Gestionnaires d'événement -<h2 id="Méthodes">Méthodes</h2> +- {{domxref("ServiceWorkerContainer.oncontrollerchange")}} + - : Un gestionnaire d’événement lancé quand un événement {{Event("controllerchange")}} se produit — quand le {{domxref("ServiceWorkerRegistration")}} associé au document ajoute un nouveau worker en état {{domxref("ServiceWorkerRegistration.active")}}. +- {{domxref("ServiceWorkerContainer.onerror")}} + - : Un gestionnaire d’événement lancé quand un événement {{Event("error")}} se produit dans le service worker associé. +- {{domxref("ServiceWorkerContainer.onmessage")}} + - : Un gestionnaire d’événement lancé quand un événement {{Event("message")}} se produit — quand des messages entrants sont reçus par l’objet {{domxref("ServiceWorkerContainer")}} (e.g. par un appel à {{domxref("MessagePort.postMessage()")}}.) -<dl> - <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt> - <dd>Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un <code>scriptURL</code> donné.</dd> - <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt> - <dd>Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni. Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>. </dd> - <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt> - <dd>Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un <code>ServiceWorkerContainer</code> dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>. </dd> -</dl> +## Méthodes -<h2 id="Exemples">Exemples</h2> +- {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} + - : Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un `scriptURL` donné. +- {{domxref("ServiceWorkerContainer.getRegistration()")}} + - : Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni. Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). +- {{domxref("ServiceWorkerContainer.getRegistrations()")}} + - : Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un `ServiceWorkerContainer` dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). -<p>Cet extrait de code provient de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">exemple service worker fallback-response</a> (voir <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>). Le code test si le navigateur supporte les services workers. Alors le code enregistre le service worker et détermine si la page est activement contrôlée par le service worker. Si elle ne l’est pas, il invite l’utilisateur à recharger la page pour permettre au service worker de prendre le contrôle. Ce code indique aussi les échecs d’enregistrement.</p> +## Exemples -<pre class="brush: js">if ('serviceWorker' in navigator) { +Cet extrait de code provient de [exemple service worker fallback-response](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126) (voir [fallback-response live](http://googlechrome.github.io/samples/service-worker/fallback-response/)). Le code test si le navigateur supporte les services workers. Alors le code enregistre le service worker et détermine si la page est activement contrôlée par le service worker. Si elle ne l’est pas, il invite l’utilisateur à recharger la page pour permettre au service worker de prendre le contrôle. Ce code indique aussi les échecs d’enregistrement. + +```js +if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() { if (navigator.serviceWorker.controller) { document.querySelector('#status').textContent = 'The service worker is currently handling network operations.'; @@ -63,35 +58,23 @@ translation_of: Web/API/ServiceWorkerContainer aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq'; aElement.textContent = 'unavailable'; document.querySelector('#status').appendChild(aElement); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.ServiceWorkerContainer")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a href="https://github.com/mdn/sw-test">Service workers : exemple basique</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a></li> - <li>{{jsxref("Promise")}}</li> - <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utiliser les web workers</a></li> -</ul> +} +``` + +## Spécifications + +| Spécification | Status | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilité navigateurs + +{{Compat("api.ServiceWorkerContainer")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Service workers : exemple basique](https://github.com/mdn/sw-test) +- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- {{jsxref("Promise")}} +- [Utiliser les web workers](/fr/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/serviceworkercontainer/register/index.md b/files/fr/web/api/serviceworkercontainer/register/index.md index ebb85bd058..c7c1d85c5f 100644 --- a/files/fr/web/api/serviceworkercontainer/register/index.md +++ b/files/fr/web/api/serviceworkercontainer/register/index.md @@ -12,124 +12,113 @@ tags: - register translation_of: Web/API/ServiceWorkerContainer/register --- -<div>{{APIRef("Service Workers API")}}</div> +{{APIRef("Service Workers API")}} -<p>La méthode <strong><code>register()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la <code>scriptURL</code> donnée.</p> +La méthode **`register()`** de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la `scriptURL` donnée. -<p>En cas de succès, un <code>ServiceWorkerRegistration</code> attache la <code>scriptURL</code> fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous n'avez pas besoin de vérifier si un enregistrement existe déjà.</p> +En cas de succès, un `ServiceWorkerRegistration` attache la `scriptURL` fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous n'avez pas besoin de vérifier si un enregistrement existe déjà. -<p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p> +Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un `ServiceWorker` ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>serviceWorkerContainer</em>.register(<em>scriptURL</em>, <em>options</em>) - .then(function(<em>serviceWorkerRegistration</em>) { ... })</pre> + serviceWorkerContainer.register(scriptURL, options) + .then(function(serviceWorkerRegistration) { ... }) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>scriptURL</code></dt> - <dd>L' URL du script contenant le <code>ServiceWorker</code>. Le fichier qui a enregistré le <code>ServiceWorker</code> doit avoir un <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">JavaScript MIME type</a> valide.</dd> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>Un objet contenant les options d'enregistrement. Les options sont: - <ul> - <li><code>scope</code>: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un <code>ServiceWorker</code>; c'est-à-dire quelle plage d'URL un <code>ServiceWorker</code> peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un <code>ServiceWorker</code> est limité au répertoire qui contient le script du <code>ServiceWorker</code>. Consultez la section <a href="#Exemples">Exemples</a> pour plus d'informations sur son fonctionnement.</li> - <li>{{non-standard_inline}} <code>type</code>: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic".</li> - <li>{{non-standard_inline}} <code>updateViaCache</code>: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports".</li> - </ul> - </dd> -</dl> +- `scriptURL` + - : L' URL du script contenant le `ServiceWorker`. Le fichier qui a enregistré le `ServiceWorker` doit avoir un [JavaScript MIME type](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types) valide. +- `options` {{optional_inline}} -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : Un objet contenant les options d'enregistrement. Les options sont: -<p>Une {{jsxref("Promise")}} qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}.</p> + - `scope`: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un `ServiceWorker`; c'est-à-dire quelle plage d'URL un `ServiceWorker` peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un `ServiceWorker` est limité au répertoire qui contient le script du `ServiceWorker`. Consultez la section [Exemples](#Exemples) pour plus d'informations sur son fonctionnement. + - {{non-standard_inline}} `type`: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic". + - {{non-standard_inline}} `updateViaCache`: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports". -<h2 id="Exemples">Exemples</h2> +### Valeur de retour -<p>Les exemples décrits ici doivent être pris ensemble pour obtenir une meilleure compréhension de comment la portée des <code>ServiceWorker</code> s'applique à une page.</p> +Une {{jsxref("Promise")}} qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}. -<p>L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du <code>ServiceWorker</code> dans ce cas, s'il est inclus dans <code>example.com/index.html</code>, contrôlera <code>example.com/index.html</code>, ainsi que les pages en dessous, comme <code>example.com/product/description.html</code>.</p> +## Exemples -<pre class="brush: js">if ('serviceWorker' in navigator) { +Les exemples décrits ici doivent être pris ensemble pour obtenir une meilleure compréhension de comment la portée des `ServiceWorker` s'applique à une page. + +L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du `ServiceWorker` dans ce cas, s'il est inclus dans `example.com/index.html`, contrôlera `example.com/index.html`, ainsi que les pages en dessous, comme `example.com/product/description.html`. + +```js +if ('serviceWorker' in navigator) { // Register a service worker hosted at the root of the // site using the default scope. navigator.serviceWorker.register('/sw.js').then( - (registration) => { + (registration) => { console.log('Service worker registration succeeded:', registration) }, - /*catch*/ (error) => { + /*catch*/ (error) => { console.log('Service worker registration failed:', error) } ) } else { console.log('Service workers are not supported.') -}</pre> +} +``` -<p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, s'appliquerait exactement aux mêmes pages que l'exemple ci-dessus. N'oubliez pas que la portée, lorsqu'elle est incluse, utilise l'emplacement de la page comme base.</p> +Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, s'appliquerait exactement aux mêmes pages que l'exemple ci-dessus. N'oubliez pas que la portée, lorsqu'elle est incluse, utilise l'emplacement de la page comme base. -<p>Sinon, si ce code était inclus dans une page à <code>example.com/product/description.html</code>, avec le fichier Javascript résidant à <code>example.com/product/sw.js</code>, alors le service worker ne s'appliquerait qu'aux ressources sous <code>example.com /product</code>.</p> +Sinon, si ce code était inclus dans une page à `example.com/product/description.html`, avec le fichier Javascript résidant à `example.com/product/sw.js`, alors le service worker ne s'appliquerait qu'aux ressources sous `example.com /product`. -<pre class="brush: js">if ('serviceWorker' in navigator) { +```js +if ('serviceWorker' in navigator) { // declaring scope manually navigator.serviceWorker.register('/sw.js', { scope: './' }).then( - (registration) => { + (registration) => { console.log('Service worker registration succeeded:', registration) }, - /*catch*/ (error) => { + /*catch*/ (error) => { console.log('Service worker registration failed:', error) } ) } else { console.log('Service workers are not supported.') } -</pre> +``` -<p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p> +Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un `ServiceWorker` ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut. -<p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, ne s'appliquerait qu'aux ressources sous <code>example.com/product</code>.</p> +Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, ne s'appliquerait qu'aux ressources sous `example.com/product`. -<pre class="brush: js">if ('serviceWorker' in navigator) { +```js +if ('serviceWorker' in navigator) { // declaring scope manually navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then( - (registration) => { + (registration) => { console.log('Service worker registration succeeded:', registration) }, - /*catch*/ (error) => { + /*catch*/ (error) => { console.log('Service worker registration failed:', error) } ) } else { console.log('Service workers are not supported.') -}</pre> - -<p>Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête <a href="https://w3c.github.io/ServiceWorker/#service-worker-allowed">Service-Worker-Allowed</a> sur le script du <code>ServiceWorker</code>, et alors vous pouvez spécifier une portée maximale pour ce <code>ServiceWorker</code> au-dessus de l'emplacement du <code>ServiceWorker</code>.</p> - -<h2 id="Spécifications">Spécifications</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('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.ServiceWorkerContainer.register")}}</p> - -<h2 id="Voir_également">Voir également</h2> - -<ul> - <li><a href="https://www.w3.org/TR/service-workers/#navigator-service-worker-register">W3.org ServiceWorker Register</a></li> - <li><a href="https://w3c.github.io/ServiceWorker/#dom-serviceworkercontainer-register">W3c.github.io ServiceWorker Register</a></li> - <li><a href="https://www.w3.org/TR/service-workers/#enumdef-serviceworkerupdateviacache">W3.org option update via cache</a></li> - <li><a href="https://html.spec.whatwg.org/multipage/workers.html#workertype">WHATWG.org Worker Type</a></li> -</ul> +} +``` + +Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête [Service-Worker-Allowed](https://w3c.github.io/ServiceWorker/#service-worker-allowed) sur le script du `ServiceWorker`, et alors vous pouvez spécifier une portée maximale pour ce `ServiceWorker` au-dessus de l'emplacement du `ServiceWorker`. + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.ServiceWorkerContainer.register")}} + +## Voir également + +- [W3.org ServiceWorker Register](https://www.w3.org/TR/service-workers/#navigator-service-worker-register) +- [W3c.github.io ServiceWorker Register](https://w3c.github.io/ServiceWorker/#dom-serviceworkercontainer-register) +- [W3.org option update via cache](https://www.w3.org/TR/service-workers/#enumdef-serviceworkerupdateviacache) +- [WHATWG.org Worker Type](https://html.spec.whatwg.org/multipage/workers.html#workertype) |