Stratégies de boîte de travail

Lorsque les service workers ont vu le jour, un ensemble de stratégies courantes de mise en cache ont vu le jour. Une stratégie de mise en cache est un modèle qui détermine la façon dont un service worker génère une réponse après la réception d'un événement de récupération.

workbox-strategies fournit les stratégies de mise en cache les plus courantes afin de faciliter et les appliquer à votre service worker.

Nous n'entrerons pas dans beaucoup de détails en dehors des stratégies prises en charge par Workbox, Pour en savoir plus, consultez notre livre de recettes hors connexion.

Utilisation des stratégies

Dans les exemples suivants, nous allons vous montrer comment utiliser la mise en cache de la boîte de travail. stratégies avec workbox-routing. Vous pouvez définir certaines options chaque stratégie abordée dans le section "Configuration des stratégies" de ce document.

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

Obsolète lors de la revalidation

Schéma des données obsolètes lors de la revalidation

La commande stale-while-revalidate vous permet de répondre à la requête le plus rapidement possible à l'aide d'une la réponse mise en cache le cas échéant, en recourant à la requête réseau si elle est non mis en cache. La requête réseau est ensuite utilisée pour mettre à jour le cache. Par opposition à quelques implémentations "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 : disposer des ressources les plus à jour n'est pas indispensable à l'application.

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

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

Cache d'abord (cache revenant au réseau)

Schéma du premier cache

Les applications Web hors connexion dépendent fortement du cache, mais pour les éléments non critiques et peuvent être mises en cache progressivement, mise en cache en premier est la meilleure option.

Si une réponse est disponible dans le cache, la requête est traitée à l'aide de la méthode mise en cache et le réseau ne sera pas utilisé du tout. Si aucun élément mis en cache la requête est traitée par une requête réseau, et la réponse sont mis en cache de sorte que la requête suivante soit traitée directement à partir du cache.

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

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

Le réseau d'abord (réseau de retour au cache)

Schéma du premier réseau

Pour les requêtes fréquemment mises à jour, en priorité sur le réseau est la solution idéale. Par défaut, il essaie de récupérer du réseau. Si la requête aboutit, la réponse dans le cache. Si le réseau ne parvient pas à renvoyer de réponse, la réponse mise en cache sera utilisé.

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 souhaitez que le réseau traite des requêtes spécifiques, Réseau uniquement est la stratégie à utiliser.

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

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

Cache uniquement

Schéma "Cache uniquement"

Le cache uniquement garantit que les réponses proviennent d'un cache. C'est moins fréquent dans la boîte de travail, mais cela peut être utile si vous disposez de votre propre étape de mise en cache préalable.

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

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

Configuration des stratégies

Toutes les stratégies vous permettent de configurer:

  • 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 sont appelées lorsque l'extraction et la mise en cache d'une requête.

Modification du cache utilisé par une stratégie

Vous pouvez modifier le cache d'une stratégie utilisée en fournissant un nom de cache. C'est si vous souhaitez séparer vos éléments 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 à 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. Il y vous pouvez utiliser deux stratégies de requête:

  • handle(): exécute une stratégie de requête et renvoie un Promise qui se résout avec une Response. en appelant tous les rappels de plug-ins pertinents.
  • handleAll(): semblable à handle(), mais renvoie deux objets Promise. Le premier est équivalente à celle renvoyée par handle(), et la seconde se résout lorsque les promesses qui étaient 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.

Élaboration d'une nouvelle 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 native fetch. StrategyHandler fournit un certain nombre d'actions d'extraction et de cache pouvant être utilisées chaque fois que handle() ou handleAll() est utilisé:

  • fetch: récupère une requête donnée et appelle requestWillFetch(), fetchDidSucceed() et fetchDidFail() méthodes de cycle de vie du plug-in
  • cacheMatch: établit une correspondance avec une requête du cache, appelle cacheKeyWillBeUsed() et Méthodes du cycle de vie du plug-in cachedResponseWillBeUsed()
  • cachePut: place une paire requête/réponse dans le cache et appelle cacheKeyWillBeUsed(). Méthodes de cycle de vie du plug-in cacheWillUpdate() et cacheDidUpdate()
  • fetchAndCachePut: appelle fetch() et exécute cachePut() en arrière-plan sur la réponse. généré par fetch().
  • hasCallback: accepte un rappel en tant qu'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 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 (lorsque vous appelez chaque rappel, quel que soit le paramètre d'objet transmis, il sera fusionné avec l'état actuel du plug-in).
  • waitUntil: ajoute une promesse aux promesses de durée de vie de l'événement associé à l'événement requête en cours de traitement (généralement une FetchEvent).
  • doneWaiting: renvoie une promesse qui se résout une fois que toutes les promesses transmises à waitUntil() ont été sont 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 concurrence réseau de cache personnalisée

L'exemple suivant est basé sur cache-network-race dans hors connexion (ce que ne propose pas Workbox), mais va plus loin et met toujours à jour après une requête réseau réussie. C'est 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 d'extraction, 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 utiliser la méthode suivantes:

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 cours disponibles dans la documents de référence sur les stratégies de boîte de travail.

Types

CacheFirst

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

Cette stratégie est utile pour les éléments qui ont été révisés, telles que /styles/example.a8f5f1.css, puisqu'elles peuvent être mis en cache pendant de longues périodes.

Si la requête réseau échoue et qu'il n'y a pas de correspondance de cache, cette méthode renvoie une exception WorkboxError.

Propriétés

  • constructor

    vide

    Crée une instance de la stratégie et définit toutes les options documentées en tant que propriétés d'instance publiques.

    Remarque: Si une classe de stratégie personnalisée étend la classe Strategy de base et fait n'a pas besoin de plus de ces propriétés, il n'est pas nécessaire de définir ses propres d'un 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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • retours

      Promesse<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit: 

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

    • retours

      Promise&lt;Response&gt;

  • handle

    vide

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

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

    Vous pouvez également utiliser cette méthode dans un FetchEvent autonome. en le 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&lt;Response&gt;

  • handleAll

    vide

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

    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 [response, done] qui peuvent être utilisées pour déterminer quand la réponse sera résolue ainsi que le moment où le gestionnaire a terminé son travail.

CacheOnly

L'implémentation d'une stratégie d'enchères en cache uniquement stratégie de requête.

Cette classe est utile si vous souhaitez profiter Plug-ins Workbox :

En l'absence de correspondance de 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 options documentées en tant que propriétés d'instance publiques.

    Remarque: Si une classe de stratégie personnalisée étend la classe Strategy de base et fait n'a pas besoin de plus de ces propriétés, il n'est pas nécessaire de définir ses propres d'un 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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • retours

      Promesse<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit: 

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

    • retours

      Promise&lt;Response&gt;

  • handle

    vide

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

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

    Vous pouvez également utiliser cette méthode dans un FetchEvent autonome. en le 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&lt;Response&gt;

  • handleAll

    vide

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

    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 [response, done] qui peuvent être utilisées pour déterminer quand la réponse sera résolue ainsi que le moment où le gestionnaire a terminé son travail.

NetworkFirst

Implémentation d'un en priorité sur le réseau stratégie de requête.

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

Si la requête réseau échoue et qu'il n'y a pas de correspondance de cache, cette méthode renvoie une exception WorkboxError.

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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • retours

      Promesse<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit: 

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

    • retours

      Promise&lt;Response&gt;

  • handle

    vide

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

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

    Vous pouvez également utiliser cette méthode dans un FetchEvent autonome. en le 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&lt;Response&gt;

  • handleAll

    vide

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

    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 [response, done] qui peuvent être utilisées pour déterminer quand la réponse sera résolue ainsi que le moment où le gestionnaire a terminé son travail.

NetworkFirstOptions

Propriétés

  • cacheName

    chaîne facultatif

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • networkTimeoutSeconds

    numéro facultatif

  • plugins

    WorkboxPlugin[] facultatif

NetworkOnly

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

Cette classe est utile si vous souhaitez profiter 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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • retours

      Promesse<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit: 

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

    • retours

      Promise&lt;Response&gt;

  • handle

    vide

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

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

    Vous pouvez également utiliser cette méthode dans un FetchEvent autonome. en le 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&lt;Response&gt;

  • handleAll

    vide

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

    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 [response, done] qui peuvent être utilisées pour déterminer quand la réponse sera résolue ainsi que le moment où le gestionnaire a terminé son travail.

NetworkOnlyOptions

Propriétés

  • fetchOptions

    RequestInit facultatif

  • networkTimeoutSeconds

    numéro facultatif

  • plugins

    WorkboxPlugin[] facultatif

StaleWhileRevalidate

Implémentation d'un stale-while-revalider. stratégie de requête.

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, attendre 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 dont le code d'état est 200 ainsi que les réponses opaques. Les réponses opaques sont des requêtes multi-origines pour lesquelles la réponse est compatible avec CORS.

Si la requête réseau échoue et qu'il n'y a pas de correspondance de cache, cette méthode renvoie une exception WorkboxError.

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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • retours

      Promesse<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit: 

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

    • retours

      Promise&lt;Response&gt;

  • handle

    vide

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

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

    Vous pouvez également utiliser cette méthode dans un FetchEvent autonome. en le 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&lt;Response&gt;

  • handleAll

    vide

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

    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 [response, done] qui peuvent être utilisées pour déterminer quand la réponse sera résolue ainsi que le moment où le gestionnaire a terminé son travail.

Strategy

Classe de base abstraite à partir de laquelle toutes les autres classes de stratégie doivent s'étendre:

Propriétés

  • constructor

    vide

    Crée une instance de la stratégie et définit toutes les options documentées en tant que propriétés d'instance publiques.

    Remarque: Si une classe de stratégie personnalisée étend la classe Strategy de base et fait n'a pas besoin de plus de ces propriétés, il n'est pas nécessaire de définir ses propres d'un 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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • retours

      Promesse<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit: 

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

    • retours

      Promise&lt;Response&gt;

  • _handle

    vide

    La fonction _handle se présente comme suit: 

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

    • retours

      Promise&lt;Response&gt;

  • handle

    vide

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

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

    Vous pouvez également utiliser cette méthode dans un FetchEvent autonome. en le 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&lt;Response&gt;

  • handleAll

    vide

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

    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 [response, done] qui peuvent être utilisées pour déterminer quand la réponse sera résolue ainsi que le moment où le gestionnaire a terminé son travail.

StrategyHandler

Une classe est créée chaque fois qu'une instance Strategy appelle workbox-strategies.Strategy~handle ou workbox-strategies.Strategy~handleAll qui englobe tous les processus d'extraction les actions de mise en cache autour des rappels de plug-in et garde une trace du moment où la stratégie est "terminé" (autrement dit, 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 demande.

    Le constructeur initialise également l'état qui sera transmis à chacune des les plug-ins qui traitent 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

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

    Les méthodes de cycle de vie du plug-in suivantes sont appelées lorsque cette méthode est utilisée:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    La fonction cacheMatch se présente comme suit: 

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

    • clé

      RequestInfo

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

    • retours

      Promise&lt;Response&gt;

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

  • cachePut

    vide

    Place une paire requête/réponse dans le cache (et appelle toute requête méthodes de rappel de plug-in) à 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 cette méthode est utilisée:

    • cacheKeyWillByUsed()
    • 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 au cache.

    • retours

      Promise&lt;boolean&gt;

      false si un cacheWillUpdate a provoqué la réponse. ne doivent pas être mises en cache, et true dans le cas contraire.

  • détruire

    vide

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

    La fonction destroy se présente comme suit: 

    () => {...}

  • doneWaiting

    vide

    Affiche une promesse qui se résout une fois toutes les promesses transmises à workbox-strategies.StrategyHandler~waitUntil s'est déroulée.

    Remarque: Tout travail effectué après le règlement de doneWaiting() doit être effectué manuellement. transmis à la méthode waitUntil() d'un événement (et non à la méthode waitUntil()), sinon le thread du service worker sera arrêté. avant que votre travail ne soit terminé.

    La fonction doneWaiting se présente comme suit: 

    () => {...}

    • retours

      Promesse<void>

  • extraire

    vide

    Récupère une requête donnée (et invoque tout rappel de plug-in applicable). ) à l'aide de fetchOptions (pour les requêtes sans navigation) et plugins définie sur l'objet Strategy.

    Les méthodes de cycle de vie du plug-in suivantes sont appelées lorsque cette méthode est utilisée:

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

    La fonction fetch se présente comme suit: 

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

    • entrée

      RequestInfo

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

    • retours

      Promise&lt;Response&gt;

  • fetchAndCachePut

    vide

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

    L'appel à this.cachePut() appelle automatiquement this.waitUntil(), Vous n'avez donc pas besoin d'appeler manuellement waitUntil() pour 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.

    • retours

      Promise&lt;Response&gt;

  • getCacheKey

    vide

    vérifie la liste des plug-ins pour le rappel cacheKeyWillBeUsed ; exécute l'un des rappels trouvés dans l'ordre. Request final L'objet renvoyé par le dernier plug-in est traité comme la clé de cache pour le cache en lecture et/ou en écriture. Si aucun rappel de plug-in cacheKeyWillBeUsed n'a 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&lt;Request&gt;

  • hasCallback

    vide

    Renvoie la valeur "true" si la stratégie comporte au moins un plug-in ayant la valeur .

    La fonction hasCallback se présente comme suit: 

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

    • nom

      C

      Nom du rappel à vérifier.

    • retours

      booléen

  • iterateCallbacks

    vide

    Accepte un rappel et renvoie un itérable de rappels de plug-ins correspondants. où chaque rappel est encapsulé avec l'état actuel du gestionnaire (par exemple, lorsque vous appelez chaque rappel. Quel que soit le paramètre d'objet transmis, sera fusionnée 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

      Générateur<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    vide

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

    Remarque: comme cette méthode exécute tous les plug-ins, elle n'est pas adaptée aux cas où la valeur renvoyée d'un rappel doit être appliquée avant l'appel le rappel suivant. Voir workbox-strategies.StrategyHandler#iterateCallbacks ci-dessous pour savoir comment gérer ce cas de figure.

    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 le l'état actuel du plug-in avant l'exécution du rappel.

    • retours

      Promesse<void>

  • waitUntil

    vide

    Ajoute une promesse au [prolongez les promesses de durée de vie]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises de l'événement associé à la requête en cours de traitement (généralement FetchEvent).

    Remarque: Vous pouvez patienter workbox-strategies.StrategyHandler~doneWaiting pour savoir quand toutes les promesses supplémentaires ont été conclues.

    La fonction waitUntil se présente comme suit: 

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

    • promesse

      Promesse<T>

      Une promesse qui vient s'ajouter aux promesses de durée de vie de l'événement qui a déclenché la requête.

    • retours

      Promesse<T>

StrategyOptions

Propriétés

  • cacheName

    chaîne facultatif

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[] facultatif