ExtendableEvent

L'interface ExtendableEvent étend la durée de vie des évènemets install et activate envoyés dans la portée global dans le cycle de vie du service worker. Elle s'assure que les évènements fonctionnels (comme FetchEvent) ne sont pas distribués avant de mettre à jour les shé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 InvalidStateError; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des promesses à vie étendue.

Cette interface hérite de l'interface Event.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/fr/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/fr/docs/Web/API/ExtendableEvent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="191" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">ExtendableEvent</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Constructeur

ExtendableEvent()

Crée un nouvel object ExtendableEvent.

Propriétés

N'implémente pas de propriétés spécifiques, mais hérite celles de sont 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 installEventHandler pour le worker installing et dans active EventHandler pour le worker active. 

Exemples

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

Ce fragent de code montre aussi une bonne pratique pour construire des versions de cache utilisé 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);
    })
  );
});

Spécifications

Compatibilité des navigateurs

See also

• Utiliser les Service Workers
• Code de base d'un service workers
• Est-ce que les ServiceWorker sont prêt ?
• Promise
• Utilisation performate des web workers