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/serviceworkerregistration | |
| 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/serviceworkerregistration')
5 files changed, 189 insertions, 285 deletions
diff --git a/files/fr/web/api/serviceworkerregistration/active/index.md b/files/fr/web/api/serviceworkerregistration/active/index.md index 257fc3eb90..9fa64a83ab 100644 --- a/files/fr/web/api/serviceworkerregistration/active/index.md +++ b/files/fr/web/api/serviceworkerregistration/active/index.md @@ -3,55 +3,38 @@ title: ServiceWorkerRegistration.active slug: Web/API/ServiceWorkerRegistration/active translation_of: Web/API/ServiceWorkerRegistration/active --- -<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> +{{SeeCompatTable}}{{APIRef("Service Workers API")}} -<p>La propriété <strong><code>active</code></strong> de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un <em>service worker</em> dont le {{domxref("ServiceWorker.state")}} est <code>activating</code> ou <code>activated</code>. Cette propriété est initialement définie à <code>null</code>.</p> +La propriété **`active`** de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un _service worker_ dont le {{domxref("ServiceWorker.state")}} est `activating` ou `activated`. Cette propriété est initialement définie à `null`. -<p>Un <em>worker</em> actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option <code>scope</code> définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.)</p> +Un _worker_ actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option `scope` définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.) -<div class="note"> -<p><strong>Note :</strong> Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> -</div> +> **Note :** Cette fonctionnalité est disponible dans les [Web Workers](/en-US/docs/Web/API/Web_Workers_API). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">sw = ServiceWorker.active -</pre> + sw = ServiceWorker.active -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un objet {{domxref("ServiceWorker")}}, si le <em>worker</em> est actuellement dans un état <code>activating</code> ou <code>activated</code>.</p> +Un objet {{domxref("ServiceWorker")}}, si le _worker_ est actuellement dans un état `activating` ou `activated`. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<div> </div> -<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('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.<br> - </td> - </tr> - </tbody> -</table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- | +| {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<p>{{Compat("api.ServiceWorkerRegistration.active")}}</p> +## Compatibilité des navigateurs -<h2 id="Voir_aussi">Voir aussi</h2> +{{Compat("api.ServiceWorkerRegistration.active")}} -<ul> - <li><a href="/en-US/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 basic code example</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> - <li>{{jsxref("Promise")}}</li> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a></li> -</ul> +## Voir aussi + +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Service workers basic code example](https://github.com/mdn/sw-test) +- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) +- {{jsxref("Promise")}} +- [Utilisation des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md index 23379e7520..7e9aaa2230 100644 --- a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md +++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md @@ -13,60 +13,47 @@ tags: - getNotifications translation_of: Web/API/ServiceWorkerRegistration/getNotifications --- -<div>{{APIRef("Service Workers API")}}</div> +{{APIRef("Service Workers API")}} -<p>La méthode <strong><code>getNotifications()</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.</p> +La méthode **`getNotifications()`** de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>serviceWorkerRegistration</em>.getNotifications(<em>options</em>) -.then(function(<em>notificationsList</em>) { ... })</pre> + serviceWorkerRegistration.getNotifications(options) + .then(function(notificationsList) { ... }) -<h3 id="Paramétres">Paramétres</h3> +### Paramétres -<dl> - <dt>options {{optional_inline}}</dt> - <dd>Un objet contenant des options pour filtrer les notifications renvoyées. Les options disponibles sont: - <ul> - <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag de notification. Si spécifié, seules les notifications contenant cette balise seront renvoyées.</li> - </ul> - </dd> -</dl> +- options {{optional_inline}} -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : Un objet contenant des options pour filtrer les notifications renvoyées. Les options disponibles sont: -<p>Une {{jsxref ("Promise", "Promesse")}} qui se résout en une liste d'objets {{domxref ("Notification")}}.</p> + - `tag`: Un {{domxref ("DOMString")}} représentant un tag de notification. Si spécifié, seules les notifications contenant cette balise seront renvoyées. -<h2 id="Exemple">Exemple</h2> +### Valeur de retour -<pre class="brush: js">navigator.serviceWorker.register('sw.js') +Une {{jsxref ("Promise", "Promesse")}} qui se résout en une liste d'objets {{domxref ("Notification")}}. + +## Exemple + +```js +navigator.serviceWorker.register('sw.js') const options = { tag: 'user_alerts' } -navigator.serviceWorker.ready.then((registration) => { - registration.getNotifications(options).then((notifications) => { +navigator.serviceWorker.ready.then((registration) => { + registration.getNotifications(options).then((notifications) => { // do something with your notifications }) }) -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Notifications', '#dom-serviceworkerregistration-getnotifications', 'ServiceWorkerRegistration.getNotifications()')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.ServiceWorkerRegistration.getNotifications")}}</p> +``` + +## Spécifications + +| Spécification | État | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- | +| {{SpecName('Web Notifications', '#dom-serviceworkerregistration-getnotifications', 'ServiceWorkerRegistration.getNotifications()')}} | {{Spec2('Web Notifications')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.ServiceWorkerRegistration.getNotifications")}} diff --git a/files/fr/web/api/serviceworkerregistration/index.md b/files/fr/web/api/serviceworkerregistration/index.md index 7412dfa554..a261d8632d 100644 --- a/files/fr/web/api/serviceworkerregistration/index.md +++ b/files/fr/web/api/serviceworkerregistration/index.md @@ -14,73 +14,62 @@ tags: - Workers translation_of: Web/API/ServiceWorkerRegistration --- -<div> -<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> -</div> +{{SeeCompatTable}}{{APIRef("Service Workers API")}} -<p>The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</p> +The `ServiceWorkerRegistration` interface of the [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API) represents the service worker registration. You register a service worker to control one or more pages that share the same origin. -<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p> +The lifetime of a service worker registration is beyond that of the `ServiceWorkerRegistration` objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active `ServiceWorkerRegistration` objects. -<div class="note"> -<p><strong>Note :</strong> This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> -</div> +> **Note :** This feature is available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API). -<h2 id="Properties">Properties</h2> +## Properties -<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p> +_Also implements properties from its parent interface,_ {{domxref("EventTarget")}}. -<dl> - <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt> - <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd> - <dt>{{domxref("ServiceWorkerRegistration.installing")}}{{readonlyinline}}</dt> - <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd> - <dt>{{domxref("ServiceWorkerRegistration.waiting")}}{{readonlyinline}}</dt> - <dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd> - <dt>{{domxref("ServiceWorkerRegistration.active")}}{{readonlyinline}}</dt> - <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd> - <dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt> - <dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd> - <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> - <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd> - <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong>{{non-standard_inline}} </strong>{{readonlyinline}} </dt> - <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd> -</dl> +- {{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}} + - : Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}. +- {{domxref("ServiceWorkerRegistration.installing")}}{{readonlyinline}} + - : Returns a service worker whose state is `installing`. This is initially set to `null`. +- {{domxref("ServiceWorkerRegistration.waiting")}}{{readonlyinline}} + - : Returns a service worker whose state is `waiting`. This is initially set to `null`. +- {{domxref("ServiceWorkerRegistration.active")}}{{readonlyinline}} + - : Returns a service worker whose state is either `activating` or `activated`. This is initially set to `null`. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the `scope` option set when {{domxref("ServiceWorkerContainer.register")}} is first called.) +- {{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}} + - : Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration. +- {{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}} + - : Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. +- {{domxref("ServiceWorkerRegistration.sync")}} **{{non-standard_inline}}** {{readonlyinline}} + - : Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes. -<h3 id="Unimplemented_properties">Unimplemented properties</h3> +### Unimplemented properties -<dl> - <dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere.</dd> -</dl> +- {{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}} + - : Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere. -<h3 id="Event_handlers">Event handlers</h3> +### Event handlers -<dl> - <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt> - <dd>An <a href="/en-US/docs/Web/API/EventListener"><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd> -</dl> +- {{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}} + - : An [`EventListener`](/en-US/docs/Web/API/EventListener) property called whenever an event of type `updatefound` is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker. -<h2 id="Methods">Methods</h2> +## Methods -<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p> +_Also implements methods from its parent interface,_ {{domxref("EventTarget")}}. -<dl> - <dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt> - <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd> - <dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt> - <dd>Displays the notification with the requested title.</dd> - <dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt> - <dd>Checks the server for an updated version of the service worker without consulting caches.</dd> - <dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt> - <dd>Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.</dd> -</dl> +- {{domxref("ServiceWorkerRegistration.getNotifications()")}} + - : Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects. +- {{domxref("ServiceWorkerRegistration.showNotification()")}} + - : Displays the notification with the requested title. +- {{domxref("ServiceWorkerRegistration.update()")}} + - : Checks the server for an updated version of the service worker without consulting caches. +- {{domxref("ServiceWorkerRegistration.unregister()")}} + - : Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered. -<h2 id="Examples">Examples</h2> +## Examples -<p>In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and <code>updatefound</code> event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the <code>updatefound</code> event will not be fired.</p> +In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired. -<pre class="brush: js">if ('serviceWorker' in navigator) { +```js +if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { registration.addEventListener('updatefound', function() { @@ -99,52 +88,26 @@ translation_of: Web/API/ServiceWorkerRegistration }); } else { console.log('Service workers are not supported.'); -}</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('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td> - <td>{{Spec2('Push API')}}</td> - <td>Adds the {{domxref("PushManager","pushManager")}} property.</td> - </tr> - <tr> - <td>{{SpecName('Web Notifications')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.</td> - </tr> - <tr> - <td>{{SpecName('Background Sync')}}</td> - <td>{{Spec2('Background Sync')}}</td> - <td>Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ServiceWorkerRegistration")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> - <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> - <li>{{jsxref("Promise")}}</li> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> -</ul> +} +``` + +## Specifications + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}} | {{Spec2('Service Workers')}} | Initial definition. | +| {{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}} | {{Spec2('Push API')}} | Adds the {{domxref("PushManager","pushManager")}} property. | +| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method. | +| {{SpecName('Background Sync')}} | {{Spec2('Background Sync')}} | Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property. | + +## Browser compatibility + +{{Compat("api.ServiceWorkerRegistration")}} + +## See also + +- [Using Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Service workers basic code example](https://github.com/mdn/sw-test) +- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) +- {{jsxref("Promise")}} +- [Using web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/serviceworkerregistration/scope/index.md b/files/fr/web/api/serviceworkerregistration/scope/index.md index 19ef530db5..ab7bbaff13 100644 --- a/files/fr/web/api/serviceworkerregistration/scope/index.md +++ b/files/fr/web/api/serviceworkerregistration/scope/index.md @@ -11,45 +11,30 @@ tags: - scope translation_of: Web/API/ServiceWorkerRegistration/scope --- -<div>{{APIRef("Service Workers API")}}</div> +{{APIRef("Service Workers API")}} -<p>La propriété en lecture seule <strong><code>scope</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.</p> +La propriété en lecture seule **`scope`** de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}. -<div class="note"> -<p><strong>Note :</strong> Cette fonctionnalité est disponible dans <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> -</div> +> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/en-US/docs/Web/API/Web_Workers_API). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>serviceWorkerRegistration</em>.scope</pre> + serviceWorkerRegistration.scope -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-serviceworkerregistration-scope', 'ServiceWorkerRegistration.scope')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-serviceworkerregistration-scope', 'ServiceWorkerRegistration.scope')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.ServiceWorkerRegistration.scope")}}</p> +{{Compat("api.ServiceWorkerRegistration.scope")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> - <li><a href="https://github.com/mdn/sw-test">Exemple basique de code pour les Services workers</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker est-il prêt?</a></li> - <li>{{jsxref("Promise","Promesse")}}</li> - <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Utilisation des web workers</a></li> -</ul> +- [Utilisation des Service Workers](/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Exemple basique de code pour les Services workers](https://github.com/mdn/sw-test) +- [ServiceWorker est-il prêt?](https://jakearchibald.github.io/isserviceworkerready/) +- {{jsxref("Promise","Promesse")}} +- [Utilisation des web workers](/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.md b/files/fr/web/api/serviceworkerregistration/shownotification/index.md index fa1c3dfab1..99530c86a4 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.md +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.md @@ -12,62 +12,59 @@ tags: - showNotification translation_of: Web/API/ServiceWorkerRegistration/showNotification --- -<p>{{APIRef("Service Workers API")}}</p> - -<p>La méthode <strong><code>showNotification()</code></strong> de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.</p> - -<div class="note"> -<p><strong>Note :</strong> Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>serviceWorkerRegistration</em>.showNotification(<em>title</em>, [<em>options</em>])</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>title</code></dt> - <dd>Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.</dd> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: - <ul> - <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: - <ul> - <li>action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification.</li> - <li>title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.</li> - <li>icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.</li> - </ul> - Les réponses appropriées sont construites à l'aide de <code>event.action</code> dans l'événement {{event("notificationclick")}}.</li> - <li><code>badge</code>: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li> - <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li> - <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li> - <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li> - <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li> - <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li> - <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="https://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> - <li><code>renotify</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li> - <li><code>requireInteraction</code>: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li> - <li><code>silent</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li> - <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li> - <li><code>timestamp</code>: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.</li> - <li><code>vibrate</code>: Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.</li> - </ul> - </dd> -</dl> - -<h3 id="Valeur_de_retour">Valeur de retour</h3> - -<p>Un {{jsxref('Promise')}} qui se résout en <code>undefined</code>.</p> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: js">navigator.serviceWorker.register('sw.js') +{{APIRef("Service Workers API")}} + +La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif. + +> **Note :** Cette fonctionnalité est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API). + +## Syntaxe + + serviceWorkerRegistration.showNotification(title, [options]) + +### Paramètres + +- `title` + - : Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification. +- `options` {{optional_inline}} + + - : Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: + + - `actions`: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: + + - action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification. + - title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur. + - icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action. + + Les réponses appropriées sont construites à l'aide de `event.action` dans l'événement {{event("notificationclick")}}. + + - `badge`: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même. + - `body`: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre. + - `data`: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données. + - `dir`: La direction dans laquelle afficher la notification. La valeur par défaut est `auto`, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de `ltr` et `rtl` (bien que la plupart des navigateurs semblent ignorer ces paramètres.) + - `icon`: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification. + - `image`: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification. + - `lang`: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une [balise de langue BCP 47](https://www.rfc-editor.org/rfc/bcp/bcp47.txt). Consultez la page des [codes de langue à 2 lettres ISO](http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/) de Sitepoint pour une référence simple. + - `renotify`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est `false`, ce qui signifie qu'ils ne seront pas notifiés. + - `requireInteraction`: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est `false`. + - `silent`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est `false`, ce qui signifie qu'il ne sera pas silencieux. + - `tag`: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification. + - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer. + - `vibrate`: Un [modèle de vibration](/fr/docs/Web/Guide/API/Vibration#Vibration_patterns) que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, \[300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms. + +### Valeur de retour + +Un {{jsxref('Promise')}} qui se résout en `undefined`. + +## Exemples + +```js +navigator.serviceWorker.register('sw.js') function showNotification() { - Notification.requestPermission((result) => { + Notification.requestPermission((result) => { if (result === 'granted') { - navigator.serviceWorker.ready.then((registration) => { + navigator.serviceWorker.ready.then((registration) => { registration.showNotification('Vibration Sample', { body: 'Buzz! Buzz!', icon: '../images/touch/chrome-touch-icon-192x192.png', @@ -78,29 +75,18 @@ function showNotification() { } }) } -</pre> +``` -<p>Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}.</p> +Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}. -<p>Vous pouvez également récupérer les détails des {{domxref ("Notification", "Notifications")}} qui ont été déclenchés par le service worker actuel en utilisant {{domxref ("ServiceWorkerRegistration.getNotifications()")}}.</p> +Vous pouvez également récupérer les détails des {{domxref ("Notification", "Notifications")}} qui ont été déclenchés par le service worker actuel en utilisant {{domxref ("ServiceWorkerRegistration.getNotifications()")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotification','showNotification()')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotification','showNotification()')}} | {{Spec2('Web Notifications')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.ServiceWorkerRegistration.showNotification")}}</p> +{{Compat("api.ServiceWorkerRegistration.showNotification")}} |
