Stratégies de boîte de travail

Lorsque les services workers ont été introduits pour la première fois, un ensemble de stratégies de mise en cache courantes a vu le jour. 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 afin de pouvoir les appliquer facilement dans votre service worker.

Nous ne nous attarderons pas sur les stratégies autres que celles compatibles avec Workbox, mais vous pouvez en savoir plus dans le guide de référence sur le mode 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. Certaines options que vous pouvez définir avec chaque stratégie sont décrites dans la section Configurer des stratégies de ce document.

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

Stale-While-Revalidate

Schéma de l'obsolescence lors de 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 reprenant 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 la stratégie "obsolète lors de la validation", cette stratégie envoie toujours une requête de validation, quel que soit l'âge de la réponse mise en cache.

Il s'agit d'une stratégie assez courante dans laquelle la ressource la plus à jour n'est pas essentielle à l'application.

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

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

Cacher d'abord (recours au réseau en cas d'échec du cache)

Schéma de mise en cache en premier

Les applications Web hors connexion s'appuient fortement sur le cache, mais pour les composants non critiques qui peuvent être mis en cache progressivement, l'option cache first (mise en cache en premier) est la meilleure.

Si une réponse est présente 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. Si aucune réponse n'est mise en cache, la requête est traitée par une requête réseau et la réponse est mise en cache afin que la requête suivante soit diffusée directement à partir du cache.

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

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

Réseau d'abord (recours au cache en cas de défaillance du réseau)

Schéma de réseau en premier

Pour les requêtes qui sont fréquemment mises à jour, la stratégie network first est la solution idéale. Par défaut, il tente 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 parvient pas à renvoyer de réponse, la réponse mise en cache est 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 devez traiter des requêtes spécifiques à partir du réseau, la stratégie à utiliser est Réseau uniquement.

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

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

Cache uniquement

Schéma "Cache uniquement"

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

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 indiquant 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 pouvant ê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 requête peuvent être utilisées:

  • handle(): effectuez une stratégie de requête et renvoyez un Promise qui se résout avec un Response, en appelant tous les rappels de plug-in pertinents.
  • handleAll(): semblable à handle(), mais renvoie deux objets Promise. Le premier est équivalent à ce que handle() renvoie, et le second 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 renvoie 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é au lieu 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: extrait une requête donnée et appelle les méthodes de cycle de vie des plug-ins requestWillFetch(), fetchDidSucceed() et fetchDidFail()
  • cacheMatch: met en correspondance une requête à partir du cache et appelle les méthodes de cycle de vie des plug-ins cacheKeyWillBeUsed() et cachedResponseWillBeUsed().
  • cachePut: place une paire de requête/réponse dans le cache et appelle les méthodes de cycle de vie des plug-ins 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 la valeur "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, le paramètre d'objet que vous lui transmettez sera fusionné avec l'état actuel du plug-in).
  • waitUntil: ajoute une promesse aux promesses de durée de vie prolongée de l'événement associé à la requête en cours de traitement (généralement un FetchEvent).
  • doneWaiting: renvoie une promesse qui se résout une fois que toutes les promesses transmises à waitUntil() ont été résolues.
  • 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 de réseau de cache personnalisée

L'exemple suivant est basé sur cache-network-race du livre de recettes 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. Il s'agit d'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 "obsolète pendant la validation", procédez 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 de workbox-strategies.

Types

CacheFirst

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

Une stratégie de mise en 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 de cache n'est trouvée, 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

    • retours

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promise<Response>

  • handle

    vide

    Effectue une stratégie de requête et renvoie un Promise qui se résout 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 le parcours 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

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

    • retours

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renvoie un tuple de promesses [response, done], où l'ancien (response) est équivalent à ce que handle() renvoie, et le dernier est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() lors de l'exécution de la stratégie sont 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

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

    • retours

      [Promise<Response>, Promise<void>]

      Un tuple de promesses [response, done] qui peut être utilisé pour déterminer quand la réponse se résout et quand le gestionnaire a terminé tout son travail.

CacheOnly

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

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

En l'absence de correspondance 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

    • retours

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promise<Response>

  • handle

    vide

    Effectue une stratégie de requête et renvoie un Promise qui se résout 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 le parcours 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

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

    • retours

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renvoie un tuple de promesses [response, done], où l'ancien (response) est équivalent à ce que handle() renvoie, et le dernier est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() lors de l'exécution de la stratégie sont 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

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

    • retours

      [Promise<Response>, Promise<void>]

      Un tuple de promesses [response, done] qui peut être utilisé pour déterminer quand la réponse se résout, ainsi que lorsque 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 le CORS.

Si la requête réseau échoue et qu'aucune correspondance de cache n'est trouvée, 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

    • retours

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promise<Response>

  • handle

    vide

    Effectue une stratégie de requête et renvoie un Promise qui se résout 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 le parcours 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

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

    • retours

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renvoie un tuple de promesses [response, done], où l'ancien (response) est équivalent à ce que handle() renvoie, et le dernier est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() lors de l'exécution de la stratégie sont 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

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

    • retours

      [Promise<Response>, Promise<void>]

      Un tuple de promesses [response, done] qui peut être utilisé pour déterminer quand la réponse se résout 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éservée au réseau.

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

    • retours

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promise<Response>

  • handle

    vide

    Effectue une stratégie de requête et renvoie un Promise qui se résout 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 le parcours 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

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

    • retours

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renvoie un tuple de promesses [response, done], où l'ancien (response) est équivalent à ce que handle() renvoie, et le dernier est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() lors de l'exécution de la stratégie sont 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

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

    • retours

      [Promise<Response>, Promise<void>]

      Un tuple de promesses [response, done] qui peut être utilisé pour déterminer quand la réponse se résout 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 obsolète pendant la validation.

Les ressources sont demandées en parallèle au cache et au réseau. La stratégie répond avec la version mise en cache si elle est disponible, sinon elle attend la réponse du réseau. Le cache est mis à jour avec la réponse 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 le CORS.

Si la requête réseau échoue et qu'aucune correspondance de cache n'est trouvée, 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

    • retours

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promise<Response>

  • handle

    vide

    Effectue une stratégie de requête et renvoie un Promise qui se résout 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 le parcours 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

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

    • retours

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renvoie un tuple de promesses [response, done], où l'ancien (response) est équivalent à ce que handle() renvoie, et le dernier est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() lors de l'exécution de la stratégie sont 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

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

    • retours

      [Promise<Response>, Promise<void>]

      Un tuple de promesses [response, done] qui peut être utilisé pour déterminer quand la réponse se résout et quand le gestionnaire a terminé tout son travail.

Strategy

Classe de base abstraite à partir de laquelle 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

    • retours

      Promise<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promise<Response>

  • _handle

    vide

    La fonction _handle se présente comme suit : 

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

    • retours

      Promise<Response>

  • handle

    vide

    Effectue une stratégie de requête et renvoie un Promise qui se résout 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 le parcours 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

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

    • retours

      Promise<Response>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais au lieu de renvoyer simplement un Promise qui se résout en Response, il renvoie un tuple de promesses [response, done], où l'ancien (response) est équivalent à ce que handle() renvoie, et le dernier est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() lors de l'exécution de la stratégie sont 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

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

    • retours

      [Promise<Response>, Promise<void>]

      Un tuple de promesses [response, done] qui peut être utilisé pour déterminer quand la réponse se résout 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 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èrent la requête.

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

    La fonction constructor se présente comme suit : 

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

  • événement

    ExtendableEvent

  • params

    tout facultatif

  • request

    Requête

  • url

    URL (facultatif)

  • cacheMatch

    vide

    Associe une requête 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 du 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.

    • retours

      Promise<Response>

      Une réponse correspondante, le cas échéant.

  • 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 des cacheName et plugins définis sur l'objet de stratégie.

    Les méthodes de cycle de vie du 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.

    • retours

      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ésolues.

    Remarque: tout travail effectué après la finalisation 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 : 

    () => {...}

    • retours

      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 autres que de navigation) et de plugins définis sur l'objet Strategy.

    Les méthodes de cycle de vie du 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 à extraire.

    • retours

      Promise<Response>

  • fetchAndCachePut

    vide

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

    L'appel de this.cachePut() appelle 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 à extraire et mettre en cache.

    • retours

      Promise<Response>

  • getCacheKey

    vide

    Vérifie la liste des plug-ins pour le rappel cacheKeyWillBeUsed et exécute tous les rappels trouvés dans la séquence. L'objet Request final renvoyé par le dernier plug-in est traité comme la clé de cache pour les lectures et/ou les écritures de 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"

    • retours

      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 à rechercher.

    • retours

      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, le paramètre d'objet que vous lui transmettez sera 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

    • retours

      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 n'est pas adaptée aux cas où la valeur de retour d'un rappel doit être appliquée avant d'appeler le rappel suivant. Consultez workbox-strategies.StrategyHandler#iterateCallbacks ci-dessous pour savoir comment gérer ce cas.

    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 seul) 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.

    • retours

      Promise<void>

  • waitUntil

    vide

    Ajoute une promesse à la [extend lifetime promises]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ésolues.

    La fonction waitUntil se présente comme suit : 

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

    • promesse

      Promise<T>

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

    • retours

      Promise<T>

StrategyOptions

Propriétés

  • cacheName

    chaîne facultatif

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[] facultatif