From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/serviceworker/index.html | 114 +++++++++++++++++++ .../web/api/serviceworker/onstatechange/index.html | 125 +++++++++++++++++++++ 2 files changed, 239 insertions(+) create mode 100644 files/fr/web/api/serviceworker/index.html create mode 100644 files/fr/web/api/serviceworker/onstatechange/index.html (limited to 'files/fr/web/api/serviceworker') diff --git a/files/fr/web/api/serviceworker/index.html b/files/fr/web/api/serviceworker/index.html new file mode 100644 index 0000000000..4a1aed9b56 --- /dev/null +++ b/files/fr/web/api/serviceworker/index.html @@ -0,0 +1,114 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +tags: + - API + - Interface + - Reference + - Service Workers + - ServiceWorker + - Workers + - hors-ligne +translation_of: Web/API/ServiceWorker +--- +
{{APIRef("Service Workers API")}}
+ +

L'interface ServiceWorker de l'API ServiceWorker met à disposition une référence vers un service worker. Plusieurs  {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un worker, etc.) peuvent être associés au même service worker, chacun à travers un unique objet ServiceWorker.

+ +

Un objet ServiceWorker est disponible dans les propriétés  {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée).

+ +

L'interface ServiceWorker est distribuée à travers différents évènements de son cycle de vie — install et activate — et d'utilisation, comme fetch. Un objet ServiceWorker a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie.

+ +

Propriétés

+ +

L'interface ServiceWorker hérite des propriétés de son parent, le {{domxref("Worker")}}.

+ +
+
{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}
+
Retourne la scriptURL sérialisée du ServiceWorker, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le  ServiceWorker.
+
{{domxref("ServiceWorker.state")}} {{readonlyinline}}
+
Retourne le status du service worker. Il retourne l'une des valeurs suivantes : installing, installed, activating, activated, or redundant.
+
+ +

Gestionnaires d'évènements

+ +
+
{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}
+
Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type statechange est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.
+
+ +

Méthodes

+ +

L'interface du ServiceWorker hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.

+ +

Exemples

+ +

Ce fragment de code provient d'un exemple d'enregistrement d'évènement pour le service worker (démo en direct). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('service-worker.js', {
+      scope: './'
+    })
+    .then(({ installing, waiting, active }) => {
+      let serviceWorker
+      if (installing) {
+        serviceWorker = installing
+        document.querySelector('#kind').textContent = 'installé'
+      } else if (waiting) {
+        serviceWorker = waiting
+        document.querySelector('#kind').textContent = 'en attente'
+      } else if (active) {
+        serviceWorker = active
+        document.querySelector('#kind').textContent = 'actif'
+      }
+      if (serviceWorker) {
+        // logState(serviceWorker.state);
+        serviceWorker.addEventListener('statechange', (e) => {
+          // logState(e.target.state);
+        })
+      }
+    })
+    .catch((error) => {
+      // L'enregistrement s'est mal déroulé. Le fichier service-worker.js
+      // est peut-être indisponible ou contient une erreur.
+    })
+} else {
+  // Le navigateur ne supporte pas les service workers.
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.ServiceWorker")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/serviceworker/onstatechange/index.html b/files/fr/web/api/serviceworker/onstatechange/index.html new file mode 100644 index 0000000000..ae7d533316 --- /dev/null +++ b/files/fr/web/api/serviceworker/onstatechange/index.html @@ -0,0 +1,125 @@ +--- +title: ServiceWorker.onstatechange +slug: Web/API/ServiceWorker/onstatechange +tags: + - API + - Propriété + - Reference +translation_of: Web/API/ServiceWorker/onstatechange +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

Une propriété {{domxref("EventListener")}} appelée quand un évenement de type statechange est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.

+ +

Syntax

+ +
ServiceWorker.onstatechange = function(statechangeevent) { ... }
+ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
+ +

Examples

+ +

Ce fragment de code présente un exemple d'enregistrement d'évenements pour le service worker (démo live). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.

+ +
var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installé';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'en attente';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'actif';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}
+ +

Notez que quand l'évenement statechange est déclenché, la référence du service worker peut avoir changée. Par exemple :

+ +
navigator.serviceWorker.register(..).then(function(swr) {
+  swr.installing.state == "installé"
+  swr.installing.onstatechange = function() {
+    swr.installing == null;
+    // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement
+    // statechange est mis en queue, pendant que le worker sous jacent est peut être en
+    // état d'attente et sera immédiatement activé si possible.
+  }
+})
+ +

Specifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#service-worker-onstatechange-attribute', 'ServiceWorker.onstatechange')}}{{Spec2('Service Workers')}}Définition intiale
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support Basic{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Support basic{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
+
-- cgit v1.2.3-54-g00ecf