FetchEvent
==========

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le paramètre passé au gestionnaire `ServiceWorkerGlobalScope.onfetch`, `FetchEvent` représente une action de récupération qui est délivrée sur la `ServiceWorkerGlobalScope` (en-US) d'un `ServiceWorker`. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode `FetchEvent.respondWith()` (en-US) , qui permet de renvoyer une réponse arbitraire à la page controlée.

Constructeur
------------

`FetchEvent.FetchEvent()` (en-US)

Crée un nouvel objet `FetchEvent`.

Propriétés
----------

*Hérite de son ancêtre, `Event`*.

`FetchEvent.isReload` (en-US) Lecture seule 

Retourne un `Boolean` qui est à `true` si l'évènement a été délivré avec l'intention de recharger la page, ou `false` sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel.

`FetchEvent.request` (en-US) Lecture seule 

Retourne la `Request` qui a déclenché l'évènement.

`FetchEvent.clientId` (en-US) Lecture seule 

Retourne l'id du `Client` controlé par le service worker en cours.

### Propriétés dépréciées

`FetchEvent.client` (en-US) Lecture seule 

Retourne le `Client` controlé par le service worker en cours.

Méthodes
--------

*Hérite de son parent,* *`ExtendableEvent`*.

`FetchEvent.respondWith()` (en-US)

Promesse qui est résolue en retournant une `Response` ou une erreur réseau à `Fetch`.

`ExtendableEvent.waitUntil()` (en-US)

Étend la durée de vie de l'évènement. Utilisée pour notifier le navigateur dans le cas de tâches qui durent plus longtemps que le simple retour d'une réponse, comme la diffusion (*streaming*) et la mise en cache.

Exemples
--------

Ce extrait de code provient de l'exemple Service Worker Fetch (lancer l'exemple dans le navigateur). Dans une partie antérieure du code, un `InstallEvent` (en-US) contrôle la mise en cache de plusieurs ressources. Le gestionnaire `ServiceWorkerGlobalScope.onfetch` attends ensuite l'évènement `fetch` . Une fois déclenché, `FetchEvent.respondWith()` (en-US) retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet `Cache`. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau.

Le code gère aussi les exceptions émises depuis l'opération `ServiceWorkerGlobalScope.fetch()` (en-US). A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié.


```js
self.addEventListener("fetch", function (event) {
  console.log("Gestion de l'évènement de fetch pour", event.request.url);

  event.respondWith(
    caches.match(event.request).then(function (response) {
      if (response) {
        console.log("Réponse trouvée en cache:", response);

        return response;
      }
      console.log(
        "Pas de réponse trouvée en cache. Sur le point de la récupérer via le réseau...",
      );

      return fetch(event.request)
        .then(function (response) {
          console.log("La réponse du réseau est:", response);

          return response;
        })
        .catch(function (error) {
          console.error("Récupération échouée:", error);

          throw error;
        });
    }),
  );
});
```

Spécifications
--------------

| Specification |
| --- |
| Service Workers # fetchevent-interface |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Promise`
* Fetch API