ExtendableEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

L'interface ExtendableEvent étend la durée de vie des événements install et activate envoyés dans la portée globale dans le cycle de vie du service worker. Elle s'assure que les événements fonctionnels (comme FetchEvent) ne soient pas distribués avant de mettre à jour les schémas de la base de données et de vider l'ancien cache.

Si waitUntil() est appelé en dehors du gestionnaire ExtendableEvent, le navigateur doit lever une exception InvalidStateError ; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des promesses à vie étendue.

Note : Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir le bug 1180274).

Cette interface hérite de l'interface Event.

must be a string

Note : Cette interface est disponible seulement quand la portée globale est ServiceWorkerGlobalScope. Elle n'est pas disponible quand c'est un objet Window ou un autre type de worker.

Constructeur

ExtendableEvent(): Crée un nouvel objet ExtendableEvent.

Propriétés

N'implémente pas de propriétés spécifiques, mais hérite de celles de son parent, Event.

Méthodes

Hérite des méthodes de son parent Event.

ExtendableEvent.waitUntil(): Étend la durée de vie de l'évènement. Cette méthode doit être appelée dans le gestionnaire d'évènement install pour le worker en cours d'installation (voir installing) et dans le gestionnaire d'évènement activate pour le worker actif (voir active).

Exemples

Ce fragment de code est tiré de l'exemple du service worker utilisant prefetch (voir l'exemple en live). Ce code appelle ExtendableEvent.waitUntil() dans le gestionnaire d'évènement ServiceWorkerGlobalScope.oninstall, retardant le traitement du worker ServiceWorkerRegistration.installing après l'installation jusqu'à ce que la promesse se résolve. La promesse se résout quand toutes les ressources ont été récupérées et mises en cache, ou quand une exception est levée.

Ce fragment de code montre aussi une bonne pratique pour construire des versions de cache utilisées par le service worker. Même s'il n'y a qu'un cache dans cet exemple, la même approche peut être utilisée pour plusieurs caches. Il lie un identifiant court pour un cache avec un nom de cache spécifique et versionné.

var CACHE_VERSION = 1;
var CURRENT_CACHES = {
  prefetch: "prefetch-cache-v" + CACHE_VERSION,
};

self.addEventListener("install", function (event) {
  var urlsToPrefetch = [
    "./static/pre_fetched.txt",
    "./static/pre_fetched.html",
    "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Installation en cours. Ressources à pré-charger :",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT_CACHES["prefetch"])
      .then(function (cache) {
        cache
          .addAll(
            urlsToPrefetch.map(function (urlToPrefetch) {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(function () {
            console.log(
              "Toutes les ressources ont été chargées et mises en cache.",
            );
          });
      })
      .catch(function (error) {
        console.error("Erreur de pré-chargement :", error);
      }),
  );
});

Attention : Au moment du chargement des ressources, il est très important d'utiliser {mode: 'no-cors'} s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le CORS. Dans cet exemple, www.chromium.org ne prend pas en charge le CORS.

Spécifications

Specification
Service Workers # extendableevent-interface

Compatibilité des navigateurs

BCD tables only load in the browser