Stratégies de boîte de travail

Lors de la première introduction des service workers, un ensemble de stratégies de mise en cache courantes a émergé. Une stratégie de mise en cache est un modèle qui détermine comment un service worker génère une réponse après avoir reçu un événement de récupération.

workbox-strategies fournit les stratégies de mise en cache les plus courantes. Il est donc facile de les appliquer dans votre service worker.

Nous n'allons pas entrer dans les détails en dehors des stratégies prises en charge par Workbox, mais vous pouvez en savoir plus dans le Cookbook hors connexion.

Utiliser des stratégies

Dans les exemples suivants, nous vous montrerons comment utiliser les stratégies de mise en cache Workbox avec workbox-routing. Vous pouvez définir certaines options avec chaque stratégie, qui sont abordées dans la section "Configurer les stratégies" de ce document.

Dans la section sur l'utilisation avancée, nous verrons comment utiliser directement les stratégies de mise en cache sans workbox-routing.

Stale-While-Revalidate

Diagramme "Obsolète pendant la revalidation"

Le modèle stale-while-revalidate vous permet de répondre à la requête le plus rapidement possible avec une réponse mise en cache si elle est disponible, en revenant à la requête réseau si elle n'est pas mise en cache. La requête réseau est ensuite utilisée pour mettre à jour le cache. Contrairement à certaines implémentations de stale-while-revalidate, cette stratégie envoie toujours une demande de revalidation, quel que soit l'âge de la réponse mise en cache.

Il s'agit d'une stratégie assez courante lorsque la ressource la plus récente n'est pas vitale pour l'application.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Cache First (cache avec réseau de secours)

Diagramme "Cache First"

Les applications Web hors connexion s'appuient fortement sur le cache. Toutefois, pour les ressources non critiques qui peuvent être mises en cache progressivement, l'option Cache first est la meilleure.

S'il existe une réponse dans le cache, la requête sera traitée à l'aide de la réponse mise en cache et le réseau ne sera pas utilisé du tout. S'il n'y a pas de réponse mise en cache, la requête sera traitée par une requête réseau et la réponse sera mise en cache afin que la prochaine requête soit traitée directement à partir du cache.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

Réseau en premier (réseau avec retour au cache)

Diagramme Network First

Pour les requêtes qui sont mises à jour fréquemment, la stratégie Network first est la solution idéale. Par défaut, il essaie de récupérer la dernière réponse du réseau. Si la requête aboutit, la réponse est placée dans le cache. Si le réseau ne renvoie pas de réponse, la réponse mise en cache sera utilisée.

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

Réseau uniquement

Schéma "Réseau uniquement"

Si vous avez besoin que des requêtes spécifiques soient traitées par le réseau, la stratégie Réseau uniquement est celle à utiliser.

import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

Cache uniquement

Diagramme "Cache uniquement"

La stratégie cache uniquement garantit que les réponses sont obtenues à partir d'un cache. Cette méthode est moins courante dans Workbox, mais peut être utile si vous avez votre propre étape de précache.

import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

Configurer des stratégies

Toutes les stratégies vous permettent de configurer les éléments suivants :

  • Nom du cache à utiliser dans la stratégie.
  • Restrictions d'expiration du cache à utiliser dans la stratégie.
  • Tableau de plug-ins dont les méthodes de cycle de vie seront appelées lors de la récupération et de la mise en cache d'une requête.

Modifier le cache utilisé par une stratégie

Vous pouvez modifier le cache utilisé par une stratégie en fournissant un nom de cache. Cela peut s'avérer utile si vous souhaitez séparer vos composants pour faciliter le débogage.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

Utiliser des plug-ins

Workbox est fourni avec un ensemble de plug-ins qui peuvent être utilisés avec ces stratégies.

Pour utiliser l'un de ces plug-ins (ou un plug-in personnalisé), il vous suffit de transmettre des instances à l'option plugins.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

Stratégies personnalisées

En plus de configurer des stratégies, Workbox vous permet de créer vos propres stratégies personnalisées. Pour ce faire, importez et étendez la classe de base Strategy à partir de workbox-strategies :

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

Dans cet exemple, handle() est utilisé comme stratégie de requête pour définir une logique de traitement spécifique. Deux stratégies de demande peuvent être utilisées :

  • handle() : exécute une stratégie de requête et renvoie un Promise qui sera résolu avec un Response, en appelant tous les rappels de plug-in pertinents.
  • handleAll() : semblable à handle(), mais renvoie deux objets Promise. La première est équivalente à ce que renvoie handle(), et la seconde se résout lorsque les promesses ajoutées à event.waitUntil() dans la stratégie sont terminées.

Les deux stratégies de requête sont appelées avec deux paramètres :

  • request : Request pour lequel la stratégie renverra une réponse.
  • handler : instance StrategyHandler créée automatiquement pour la stratégie actuelle.

Créer une stratégie

Voici un exemple de nouvelle stratégie qui réimplémente le comportement de NetworkOnly :

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

Notez que handler.fetch() est appelé à la place de la méthode fetch native. La classe StrategyHandler fournit un certain nombre d'actions de récupération et de mise en cache qui peuvent être utilisées chaque fois que handle() ou handleAll() est utilisé :

  • fetch : récupère une requête donnée et appelle les méthodes de cycle de vie des plug-ins requestWillFetch(), fetchDidSucceed() et fetchDidFail().
  • cacheMatch : correspond à une requête du cache et appelle les méthodes de cycle de vie du plug-in cacheKeyWillBeUsed() et cachedResponseWillBeUsed().
  • cachePut : place une paire requête/réponse dans le cache et appelle les méthodes de cycle de vie du plug-in cacheKeyWillBeUsed(), cacheWillUpdate() et cacheDidUpdate().
  • fetchAndCachePut : appelle fetch() et exécute cachePut() en arrière-plan sur la réponse générée par fetch().
  • hasCallback : prend un rappel en entrée et renvoie "true" si la stratégie comporte au moins un plug-in avec le rappel donné.
  • runCallbacks : exécute tous les rappels de plug-in correspondant à un nom donné, dans l'ordre, en transmettant un objet de paramètre donné (fusionné avec l'état actuel du plug-in) comme seul argument.
  • iterateCallbacks : accepte un rappel et renvoie un itérable de rappels de plug-in correspondants, où chaque rappel est encapsulé avec l'état actuel du gestionnaire (c'est-à-dire que lorsque vous appelez chaque rappel, tout paramètre d'objet que vous lui transmettez est fusionné avec l'état actuel du plug-in).
  • waitUntil : ajoute une promesse aux promesses de durée de vie étendue de l'événement associé à la requête en cours de traitement (généralement un FetchEvent).
  • doneWaiting : renvoie une promesse qui est résolue une fois que toutes les promesses transmises à waitUntil() ont été réglées.
  • destroy : arrête l'exécution de la stratégie et résout immédiatement toutes les promesses waitUntil() en attente.

Stratégie de course personnalisée pour le réseau de cache

L'exemple suivant est basé sur cache-network-race du Cookbook hors connexion (que Workbox ne fournit pas), mais va plus loin et met toujours à jour le cache après une requête réseau réussie. Voici un exemple de stratégie plus complexe qui utilise plusieurs actions.

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

Utilisation avancée

Si vous souhaitez utiliser les stratégies dans votre propre logique d'événement de récupération, vous pouvez utiliser les classes de stratégie pour exécuter une requête via une stratégie spécifique.

Par exemple, pour utiliser la stratégie "stale-while-revalidate", vous pouvez procéder comme suit :

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

Vous trouverez la liste des classes disponibles dans la documentation de référence workbox-strategies.

Types

CacheFirst

Implémentation d'une stratégie de requête cache-first.

Une stratégie de cache en premier est utile pour les éléments qui ont été révisés, tels que les URL comme /styles/example.a8f5f1.css, car ils peuvent être mis en cache pendant de longues périodes.

Si la requête réseau échoue et qu'aucune correspondance n'est trouvée dans le cache, une exception WorkboxError est générée.

Propriétés

  • constructor

    vide

    Crée une instance de la stratégie et définit toutes les propriétés d'option documentées comme propriétés d'instance publiques.

    Remarque : Si une classe de stratégie personnalisée étend la classe de stratégie de base et n'a pas besoin de plus que ces propriétés, elle n'a pas besoin de définir son propre constructeur.

    La fonction constructor se présente comme suit : 

    (options?: StrategyOptions) => {...}

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    vide

    La fonction _awaitComplete se présente comme suit : 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • Renvoie

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • Renvoie

      Promise<Response>

  • handle

    vide

    Exécute une stratégie de requête et renvoie un Promise qui sera résolu avec un Response, en appelant tous les rappels de plug-in pertinents.

    Lorsqu'une instance de stratégie est enregistrée avec un workbox-routing.Route Workbox, cette méthode est automatiquement appelée lorsque la route correspond.

    Vous pouvez également utiliser cette méthode dans un écouteur FetchEvent autonome en la transmettant à event.respondWith().

    La fonction handle se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renverra un tuple de promesses [response, done], où le premier (response) équivaut à ce que renvoie handle(), et le second est une promesse qui se résoudra une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre de l'exécution de la stratégie seront terminées.

    Vous pouvez attendre la promesse done pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) se termine correctement.

    La fonction handleAll se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      [Promise<Response>, Promise<void>]

      Tuple de promesses [response, done] pouvant être utilisé pour déterminer quand la réponse est résolue et quand le gestionnaire a terminé tout son travail.

CacheOnly

Implémentation d'une stratégie de requête cache-only.

Cette classe est utile si vous souhaitez profiter des plug-ins Workbox.

En l'absence de correspondance dans le cache, une exception WorkboxError sera générée.

Propriétés

  • constructor

    vide

    Crée une instance de la stratégie et définit toutes les propriétés d'option documentées comme propriétés d'instance publiques.

    Remarque : Si une classe de stratégie personnalisée étend la classe de stratégie de base et n'a pas besoin de plus que ces propriétés, elle n'a pas besoin de définir son propre constructeur.

    La fonction constructor se présente comme suit : 

    (options?: StrategyOptions) => {...}

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    vide

    La fonction _awaitComplete se présente comme suit : 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • Renvoie

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • Renvoie

      Promise<Response>

  • handle

    vide

    Exécute une stratégie de requête et renvoie un Promise qui sera résolu avec un Response, en appelant tous les rappels de plug-in pertinents.

    Lorsqu'une instance de stratégie est enregistrée avec un workbox-routing.Route Workbox, cette méthode est automatiquement appelée lorsque la route correspond.

    Vous pouvez également utiliser cette méthode dans un écouteur FetchEvent autonome en la transmettant à event.respondWith().

    La fonction handle se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renverra un tuple de promesses [response, done], où le premier (response) équivaut à ce que renvoie handle(), et le second est une promesse qui se résoudra une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre de l'exécution de la stratégie seront terminées.

    Vous pouvez attendre la promesse done pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) se termine correctement.

    La fonction handleAll se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      [Promise<Response>, Promise<void>]

      Tuple de promesses [response, done] pouvant être utilisé pour déterminer quand la réponse est résolue et quand le gestionnaire a terminé tout son travail.

NetworkFirst

Implémentation d'une stratégie de requête network first.

Par défaut, cette stratégie met en cache les réponses avec un code d'état 200 ainsi que les réponses opaques. Les réponses opaques sont des requêtes multi-origines dont la réponse n'est pas compatible avec CORS.

Si la requête réseau échoue et qu'aucune correspondance n'est trouvée dans le cache, une exception WorkboxError est générée.

Propriétés

  • constructor

    vide

    La fonction constructor se présente comme suit : 

    (options?: NetworkFirstOptions) => {...}

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    vide

    La fonction _awaitComplete se présente comme suit : 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • Renvoie

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • Renvoie

      Promise<Response>

  • handle

    vide

    Exécute une stratégie de requête et renvoie un Promise qui sera résolu avec un Response, en appelant tous les rappels de plug-in pertinents.

    Lorsqu'une instance de stratégie est enregistrée avec un workbox-routing.Route Workbox, cette méthode est automatiquement appelée lorsque la route correspond.

    Vous pouvez également utiliser cette méthode dans un écouteur FetchEvent autonome en la transmettant à event.respondWith().

    La fonction handle se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renverra un tuple de promesses [response, done], où le premier (response) équivaut à ce que renvoie handle(), et le second est une promesse qui se résoudra une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre de l'exécution de la stratégie seront terminées.

    Vous pouvez attendre la promesse done pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) se termine correctement.

    La fonction handleAll se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      [Promise<Response>, Promise<void>]

      Tuple de promesses [response, done] pouvant être utilisé pour déterminer quand la réponse est résolue et quand le gestionnaire a terminé tout son travail.

NetworkFirstOptions

Propriétés

  • cacheName

    chaîne facultatif

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • networkTimeoutSeconds

    number facultatif

  • plugins

    WorkboxPlugin[] facultatif

NetworkOnly

Implémentation d'une stratégie de requête réseau uniquement.

Cette classe est utile si vous souhaitez profiter des plug-ins Workbox.

Si la requête réseau échoue, une exception WorkboxError est générée.

Propriétés

  • constructor

    vide

    La fonction constructor se présente comme suit : 

    (options?: NetworkOnlyOptions) => {...}

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    vide

    La fonction _awaitComplete se présente comme suit : 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • Renvoie

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • Renvoie

      Promise<Response>

  • handle

    vide

    Exécute une stratégie de requête et renvoie un Promise qui sera résolu avec un Response, en appelant tous les rappels de plug-in pertinents.

    Lorsqu'une instance de stratégie est enregistrée avec un workbox-routing.Route Workbox, cette méthode est automatiquement appelée lorsque la route correspond.

    Vous pouvez également utiliser cette méthode dans un écouteur FetchEvent autonome en la transmettant à event.respondWith().

    La fonction handle se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renverra un tuple de promesses [response, done], où le premier (response) équivaut à ce que renvoie handle(), et le second est une promesse qui se résoudra une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre de l'exécution de la stratégie seront terminées.

    Vous pouvez attendre la promesse done pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) se termine correctement.

    La fonction handleAll se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      [Promise<Response>, Promise<void>]

      Tuple de promesses [response, done] pouvant être utilisé pour déterminer quand la réponse est résolue et quand le gestionnaire a terminé tout son travail.

NetworkOnlyOptions

Propriétés

  • fetchOptions

    RequestInit facultatif

  • networkTimeoutSeconds

    number facultatif

  • plugins

    WorkboxPlugin[] facultatif

StaleWhileRevalidate

Implémentation d'une stratégie de requête stale-while-revalidate.

Les ressources sont demandées en parallèle à partir du cache et du réseau. La stratégie répondra avec la version mise en cache si elle est disponible, sinon elle attendra la réponse du réseau. Le cache est mis à jour avec la réponse du réseau à chaque requête réussie.

Par défaut, cette stratégie met en cache les réponses avec un code d'état 200 ainsi que les réponses opaques. Les réponses opaques sont des requêtes multi-origines dont la réponse n'est pas compatible avec CORS.

Si la requête réseau échoue et qu'aucune correspondance n'est trouvée dans le cache, une exception WorkboxError est générée.

Propriétés

  • constructor

    vide

    La fonction constructor se présente comme suit : 

    (options?: StrategyOptions) => {...}

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    vide

    La fonction _awaitComplete se présente comme suit : 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • Renvoie

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • Renvoie

      Promise<Response>

  • handle

    vide

    Exécute une stratégie de requête et renvoie un Promise qui sera résolu avec un Response, en appelant tous les rappels de plug-in pertinents.

    Lorsqu'une instance de stratégie est enregistrée avec un workbox-routing.Route Workbox, cette méthode est automatiquement appelée lorsque la route correspond.

    Vous pouvez également utiliser cette méthode dans un écouteur FetchEvent autonome en la transmettant à event.respondWith().

    La fonction handle se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renverra un tuple de promesses [response, done], où le premier (response) équivaut à ce que renvoie handle(), et le second est une promesse qui se résoudra une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre de l'exécution de la stratégie seront terminées.

    Vous pouvez attendre la promesse done pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) se termine correctement.

    La fonction handleAll se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      [Promise<Response>, Promise<void>]

      Tuple de promesses [response, done] pouvant être utilisé pour déterminer quand la réponse est résolue et quand le gestionnaire a terminé tout son travail.

Strategy

Classe de base abstraite dont toutes les autres classes de stratégie doivent hériter :

Propriétés

  • constructor

    vide

    Crée une instance de la stratégie et définit toutes les propriétés d'option documentées comme propriétés d'instance publiques.

    Remarque : Si une classe de stratégie personnalisée étend la classe de stratégie de base et n'a pas besoin de plus que ces propriétés, elle n'a pas besoin de définir son propre constructeur.

    La fonction constructor se présente comme suit : 

    (options?: StrategyOptions) => {...}

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    vide

    La fonction _awaitComplete se présente comme suit : 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • Renvoie

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • Renvoie

      Promise<Response>

  • _handle

    vide

    La fonction _handle se présente comme suit : 

    (request: Request, handler: StrategyHandler) => {...}

    • Renvoie

      Promise<Response>

  • handle

    vide

    Exécute une stratégie de requête et renvoie un Promise qui sera résolu avec un Response, en appelant tous les rappels de plug-in pertinents.

    Lorsqu'une instance de stratégie est enregistrée avec un workbox-routing.Route Workbox, cette méthode est automatiquement appelée lorsque la route correspond.

    Vous pouvez également utiliser cette méthode dans un écouteur FetchEvent autonome en la transmettant à event.respondWith().

    La fonction handle se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renverra un tuple de promesses [response, done], où le premier (response) équivaut à ce que renvoie handle(), et le second est une promesse qui se résoudra une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre de l'exécution de la stratégie seront terminées.

    Vous pouvez attendre la promesse done pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) se termine correctement.

    La fonction handleAll se présente comme suit : 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • options

      FetchEvent | HandlerCallbackOptions

      FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • Renvoie

      [Promise<Response>, Promise<void>]

      Tuple de promesses [response, done] pouvant être utilisé pour déterminer quand la réponse est résolue et quand le gestionnaire a terminé tout son travail.

StrategyHandler

Classe créée chaque fois qu'une instance de stratégie appelle workbox-strategies.Strategy~handle ou workbox-strategies.Strategy~handleAll, qui encapsule toutes les actions de récupération et de mise en cache autour des rappels de plug-in et qui suit le moment où la stratégie est "terminée" (c'est-à-dire que toutes les promesses event.waitUntil() ajoutées ont été résolues).

Propriétés

  • constructor

    vide

    Crée une instance associée à la stratégie et à l'événement transmis qui gère la requête.

    Le constructeur initialise également l'état qui sera transmis à chacun des plug-ins gérant cette requête.

    La fonction constructor se présente comme suit : 

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • événement

    ExtendableEvent

  • params

    facultatif

  • request

    Requête

  • url

    URL facultatif

  • cacheMatch

    vide

    Fait correspondre une requête à partir du cache (et appelle toutes les méthodes de rappel de plug-in applicables) à l'aide des cacheName, matchOptions et plugins définis sur l'objet de stratégie.

    Les méthodes de cycle de vie de plug-in suivantes sont appelées lorsque vous utilisez cette méthode :

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

    La fonction cacheMatch se présente comme suit : 

    (key: RequestInfo) => {...}

    • clé

      RequestInfo

      Requête ou URL à utiliser comme clé de cache.

    • Renvoie

      Promise<Response>

      Une réponse correspondante, si elle est trouvée.

  • cachePut

    vide

    Place une paire requête/réponse dans le cache (et appelle toutes les méthodes de rappel de plug-in applicables) à l'aide de cacheName et plugins définis sur l'objet de stratégie.

    Les méthodes de cycle de vie de plug-in suivantes sont appelées lorsque vous utilisez cette méthode :

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    La fonction cachePut se présente comme suit : 

    (key: RequestInfo, response: Response) => {...}

    • clé

      RequestInfo

      Requête ou URL à utiliser comme clé de cache.

    • réponse

      Réponse

      Réponse à mettre en cache.

    • Renvoie

      Promise<boolean>

      false si un cacheWillUpdate a empêché la mise en cache de la réponse, et true dans le cas contraire.

  • détruire

    vide

    Arrête l'exécution de la stratégie et résout immédiatement toutes les promesses waitUntil() en attente.

    La fonction destroy se présente comme suit : 

    () => {...}

  • doneWaiting

    vide

    Renvoie une promesse qui se résout une fois que toutes les promesses transmises à workbox-strategies.StrategyHandler~waitUntil ont été réglées.

    Remarque : Tout travail effectué après la résolution de doneWaiting() doit être transmis manuellement à la méthode waitUntil() d'un événement (et non à la méthode waitUntil() de ce gestionnaire), sinon le thread du service worker peut être arrêté avant la fin de votre travail.

    La fonction doneWaiting se présente comme suit : 

    () => {...}

    • Renvoie

      Promise<void>

  • extraire

    vide

    Récupère une requête donnée (et appelle toutes les méthodes de rappel de plug-in applicables) à l'aide de fetchOptions (pour les requêtes de non-navigation) et de plugins définies sur l'objet Strategy.

    Les méthodes de cycle de vie de plug-in suivantes sont appelées lorsque vous utilisez cette méthode :

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

    La fonction fetch se présente comme suit : 

    (input: RequestInfo) => {...}

    • entrée

      RequestInfo

      URL ou requête à récupérer.

    • Renvoie

      Promise<Response>

  • fetchAndCachePut

    vide

    Appelle this.fetch() et exécute (en arrière-plan) this.cachePut() sur la réponse générée par this.fetch().

    L'appel à this.cachePut() invoque automatiquement this.waitUntil(). Vous n'avez donc pas besoin d'appeler manuellement waitUntil() sur l'événement.

    La fonction fetchAndCachePut se présente comme suit : 

    (input: RequestInfo) => {...}

    • entrée

      RequestInfo

      Requête ou URL à récupérer et à mettre en cache.

    • Renvoie

      Promise<Response>

  • getCacheKey

    vide

    Vérifie la liste des plug-ins pour le rappel cacheKeyWillBeUsed et exécute séquentiellement tous les rappels trouvés. L'objet Request final renvoyé par le dernier plug-in est traité comme clé de cache pour les lectures et/ou écritures du cache. Si aucun rappel de plug-in cacheKeyWillBeUsed n'a été enregistré, la requête transmise est renvoyée sans modification.

    La fonction getCacheKey se présente comme suit : 

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • request

      Requête

    • mode

      "read"
       | "write"

    • Renvoie

      Promise<Request>

  • hasCallback

    vide

    Renvoie "true" si la stratégie comporte au moins un plug-in avec le rappel donné.

    La fonction hasCallback se présente comme suit : 

    (name: C) => {...}

    • nom

      C

      Nom du rappel à vérifier.

    • Renvoie

      booléen

  • iterateCallbacks

    vide

    Accepte un rappel et renvoie un itérable de rappels de plug-in correspondants, où chaque rappel est encapsulé avec l'état actuel du gestionnaire (c'est-à-dire que lorsque vous appelez chaque rappel, tout paramètre d'objet que vous lui transmettez est fusionné avec l'état actuel du plug-in).

    La fonction iterateCallbacks se présente comme suit : 

    (name: C) => {...}

    • nom

      C

      Nom du rappel à exécuter

    • Renvoie

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    vide

    Exécute tous les rappels de plug-in correspondant au nom donné, dans l'ordre, en transmettant l'objet de paramètre donné (fusionné avec l'état actuel du plug-in) comme seul argument.

    Remarque : Étant donné que cette méthode exécute tous les plug-ins, elle ne convient pas aux cas où la valeur de retour d'un rappel doit être appliquée avant d'appeler le rappel suivant. Pour savoir comment traiter ce cas, consultez workbox-strategies.StrategyHandler#iterateCallbacks ci-dessous.

    La fonction runCallbacks se présente comme suit : 

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • nom

      C

      Nom du rappel à exécuter dans chaque plug-in.

    • param

      Omit<indexedAccess"state"
      >

      Objet à transmettre en tant que premier (et unique) paramètre lors de l'exécution de chaque rappel. Cet objet sera fusionné avec l'état actuel du plug-in avant l'exécution du rappel.

    • Renvoie

      Promise<void>

  • waitUntil

    vide

    Ajoute une promesse aux https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises de l'événement associé à la requête en cours de traitement (généralement un FetchEvent).

    Remarque : Vous pouvez attendre workbox-strategies.StrategyHandler~doneWaiting pour savoir quand toutes les promesses ajoutées ont été réglées.

    La fonction waitUntil se présente comme suit : 

    (promise: Promise<T>) => {...}

    • promesse

      Promise<T>

      Promesse à ajouter aux promesses de durée de vie étendue de l'événement qui a déclenché la requête.

    • Renvoie

      Promise<T>

StrategyOptions

Propriétés

  • cacheName

    chaîne facultatif

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[] facultatif