Stratégies de boîte de travail

Lorsque les service workers ont été introduits pour la première fois, un ensemble de stratégies de mise en cache courantes est apparu. Une stratégie de mise en cache est un modèle qui détermine la manière dont 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 que vous puissiez facilement les appliquer dans votre service worker.

Nous n'entrerons pas dans les détails en dehors des stratégies compatibles avec Workbox, mais vous pouvez en savoir plus dans le livre de recettes hors connexion.

Utilisation des stratégies

Dans les exemples suivants, nous allons vous montrer comment utiliser les stratégies de mise en cache de la boîte de travail avec workbox-routing. Vous pouvez définir certaines options pour chaque stratégie. Ces options sont présentées dans la section Configurer des stratégies de cette documentation.

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

Diagramme "Obsolète 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, le cas échéant, 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 la méthode "stale-while-revalidate", cette stratégie envoie toujours une requête de revalidation, quel que soit l'âge de la réponse mise en cache.

Il s'agit d'une stratégie assez courante dans laquelle disposer des ressources les plus à jour n'est pas essentiel à l'application.

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

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

Mise en cache d'abord (reprise du cache sur le réseau)

Premier schéma de mise en cache

Les applications Web hors connexion s'appuient fortement sur le cache. Toutefois, pour les éléments non critiques qui peuvent être mis en cache progressivement, un cache en premier est la meilleure option.

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 n'est pas utilisé du tout. En l'absence de réponse mise en cache, la requête est satisfaite par une requête réseau et la réponse est mise en cache pour 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 en premier (réseau de retour au cache)

Premier schéma du réseau

Pour les requêtes qui sont fréquemment mises à jour, la stratégie idéale est la priorité au réseau. 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 mise en 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

Diagramme "Réseau uniquement"

Si vous souhaitez que des requêtes spécifiques soient traitées à 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

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 la boîte de travail, mais elle peut être utile si vous disposez de votre propre étape de mise en cache.

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 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 sont appelées lors de la récupération et de la mise en cache d'une requête.

Modification du cache utilisé par une stratégie

Vous pouvez modifier la stratégie de cache utilisée en fournissant un nom de cache. Cela est utile 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 que vous pouvez utiliser avec ces stratégies.

Pour utiliser l'un de ces plug-ins (ou un plug-in personnalisé), il vous suffit de transmettre les 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. 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 un Response, en appelant tous les rappels de plug-in pertinents.
  • handleAll(): semblable à handle(), mais renvoie deux objets Promise. La première correspond à ce que renvoie handle(), et la seconde est résolue 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éation d'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: 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: établit une correspondance avec 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 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 (par exemple, lorsque vous appelez chaque rappel, le paramètre d'objet que vous transmettez est fusionné avec l'état actuel du plug-in).
  • waitUntil: ajoute une promesse aux promesses de durée de vie de l'événement associé à la requête traitée (généralement un FetchEvent).
  • doneWaiting: renvoie une promesse qui se résout une fois que toutes les promesses transmises à waitUntil() ont été réglées.
  • destroy: arrête d'exécuter la stratégie et résout immédiatement toutes les promesses waitUntil() en attente.

Stratégie de concurrence réseau pour le cache personnalisé

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 utilisant 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 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 sur les stratégies de boîte de travail.

Types

CacheFirst

Mise en œuvre d'une stratégie de requête mise en cache.

Une stratégie axée sur la mise en cache est utile pour les éléments qui ont été révisés, tels que les URL telles que /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'il n'y a pas de correspondance avec le cache, une exception WorkboxError est générée.

Propriétés

  • constructor

    void

    Crée une instance de la stratégie et définit toutes les propriétés d'option 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 n'a pas besoin de plus de 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

    void

    La fonction _awaitComplete se présente comme suit : 

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

    • responseDone

      Promesse<Réponse>

    • handler

      StrategyHandler

    • request

      Requête

    • event

      ExtendableEvent

    • retours

      Promise<void>

  • Réponse

    void

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promesse<Réponse>

  • handle

    void

    Exécutez 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 une boîte de travail workbox-routing.Route, 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

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      Promesse<Réponse>

  • handleAll

    void

    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ù le premier (response) est équivalent à ce que handle() renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre 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) aboutit.

    La fonction handleAll se présente comme suit : 

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

    • options

      FetchEvent|HandlerCallbackOptions

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      [Promise<Response>,Promise<void>]

      Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.

CacheOnly

Une mise en œuvre d'une stratégie de requête de cache uniquement.

Cette classe est utile si vous souhaitez bénéficier des plug-ins Workbox.

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

Propriétés

  • constructor

    void

    Crée une instance de la stratégie et définit toutes les propriétés d'option 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 n'a pas besoin de plus de 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

    void

    La fonction _awaitComplete se présente comme suit : 

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

    • responseDone

      Promesse<Réponse>

    • handler

      StrategyHandler

    • request

      Requête

    • event

      ExtendableEvent

    • retours

      Promise<void>

  • Réponse

    void

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promesse<Réponse>

  • handle

    void

    Exécutez 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 une boîte de travail workbox-routing.Route, 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

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      Promesse<Réponse>

  • handleAll

    void

    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ù le premier (response) est équivalent à ce que handle() renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre 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) aboutit.

    La fonction handleAll se présente comme suit : 

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

    • options

      FetchEvent|HandlerCallbackOptions

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      [Promise<Response>,Promise<void>]

      Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.

NetworkFirst

Mise en œuvre d'une stratégie de requête privilégiant le réseau.

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

Si la requête réseau échoue et qu'il n'y a pas de correspondance avec le cache, une exception WorkboxError est générée.

Propriétés

  • constructor

    void

    La fonction constructor se présente comme suit : 

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

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    La fonction _awaitComplete se présente comme suit : 

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

    • responseDone

      Promesse<Réponse>

    • handler

      StrategyHandler

    • request

      Requête

    • event

      ExtendableEvent

    • retours

      Promise<void>

  • Réponse

    void

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promesse<Réponse>

  • handle

    void

    Exécutez 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 une boîte de travail workbox-routing.Route, 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

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      Promesse<Réponse>

  • handleAll

    void

    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ù le premier (response) est équivalent à ce que handle() renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre 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) aboutit.

    La fonction handleAll se présente comme suit : 

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

    • options

      FetchEvent|HandlerCallbackOptions

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      [Promise<Response>,Promise<void>]

      Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.

NetworkFirstOptions

Propriétés

  • cacheName

    string facultatif

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • networkTimeoutSeconds

    numéro facultatif

  • plugins

    WorkboxPlugin[] facultatif

NetworkOnly

Mise en œuvre d'une stratégie de requête réseau uniquement.

Cette classe est utile si vous souhaitez bénéficier des plug-ins Workbox.

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

Propriétés

  • constructor

    void

    La fonction constructor se présente comme suit : 

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

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    La fonction _awaitComplete se présente comme suit : 

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

    • responseDone

      Promesse<Réponse>

    • handler

      StrategyHandler

    • request

      Requête

    • event

      ExtendableEvent

    • retours

      Promise<void>

  • Réponse

    void

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promesse<Réponse>

  • handle

    void

    Exécutez 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 une boîte de travail workbox-routing.Route, 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

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      Promesse<Réponse>

  • handleAll

    void

    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ù le premier (response) est équivalent à ce que handle() renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre 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) aboutit.

    La fonction handleAll se présente comme suit : 

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

    • options

      FetchEvent|HandlerCallbackOptions

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      [Promise<Response>,Promise<void>]

      Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.

NetworkOnlyOptions

Propriétés

  • fetchOptions

    RequestInit facultatif

  • networkTimeoutSeconds

    numéro facultatif

  • plugins

    WorkboxPlugin[] facultatif

StaleWhileRevalidate

Une mise en œuvre d'une stratégie de requête stale-while-revalidate.

Les ressources sont demandées à la fois à partir du cache et du réseau en parallèle. La stratégie renvoie 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 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 des réponses opaques. Les réponses opaques sont des requêtes multi-origines pour lesquelles la réponse n'est pas compatible avec CORS.

Si la requête réseau échoue et qu'il n'y a pas de correspondance avec le cache, une exception WorkboxError est générée.

Propriétés

  • constructor

    void

    La fonction constructor se présente comme suit : 

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

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    La fonction _awaitComplete se présente comme suit : 

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

    • responseDone

      Promesse<Réponse>

    • handler

      StrategyHandler

    • request

      Requête

    • event

      ExtendableEvent

    • retours

      Promise<void>

  • Réponse

    void

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promesse<Réponse>

  • handle

    void

    Exécutez 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 une boîte de travail workbox-routing.Route, 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

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      Promesse<Réponse>

  • handleAll

    void

    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ù le premier (response) est équivalent à ce que handle() renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre 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) aboutit.

    La fonction handleAll se présente comme suit : 

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

    • options

      FetchEvent|HandlerCallbackOptions

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      [Promise<Response>,Promise<void>]

      Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.

Strategy

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

Propriétés

  • constructor

    void

    Crée une instance de la stratégie et définit toutes les propriétés d'option 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 n'a pas besoin de plus de 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

    void

    La fonction _awaitComplete se présente comme suit : 

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

    • responseDone

      Promesse<Réponse>

    • handler

      StrategyHandler

    • request

      Requête

    • event

      ExtendableEvent

    • retours

      Promise<void>

  • Réponse

    void

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promesse<Réponse>

  • _poignée

    void

    La fonction _handle se présente comme suit : 

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

    • retours

      Promesse<Réponse>

  • handle

    void

    Exécutez 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 une boîte de travail workbox-routing.Route, 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

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      Promesse<Réponse>

  • handleAll

    void

    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ù le premier (response) est équivalent à ce que handle() renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées à event.waitUntil() dans le cadre 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) aboutit.

    La fonction handleAll se présente comme suit : 

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

    • options

      FetchEvent|HandlerCallbackOptions

      Un FetchEvent ou un objet possédant les propriétés répertoriées ci-dessous.

    • retours

      [Promise<Response>,Promise<void>]

      Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.

StrategyHandler

Une classe créée chaque fois qu'une instance Strategy 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 effectue le suivi du moment où la stratégie est "terminée" (c'est-à-dire que toutes les promesses event.waitUntil() ajoutées sont résolues).

Propriétés

  • constructor

    void

    Crée une instance associée à la stratégie transmise et à l'événement qui traite 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)=> {...}

  • event

    ExtendableEvent

  • params

    Toute valeur facultatif

  • request

    Requête

  • url

    URL facultatif

  • cacheMatch

    void

    Met en correspondance 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.

    Lorsque vous utilisez cette méthode, les méthodes de cycle de vie des plug-ins suivantes sont appelées:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    La fonction cacheMatch se présente comme suit : 

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

    • clé

      RequestInfo

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

    • retours

      Promesse<Réponse>

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

  • cachePut

    void

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

    Lorsque vous utilisez cette méthode, les méthodes de cycle de vie des plug-ins suivantes sont appelées:

    • 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<boolean>

      false si une mise à jour de cacheWillUpdate a entraîné la non-mise en cache de la réponse, et true dans le cas contraire.

  • destroy

    void

    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

    void

    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 le réglage 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 de service worker sera arrêté avant la fin de votre tâche.

    La fonction doneWaiting se présente comme suit : 

    ()=> {...}

    • retours

      Promise<void>

  • fetch

    void

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

    Lorsque vous utilisez cette méthode, les méthodes de cycle de vie des plug-ins suivantes sont appelées:

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

    La fonction fetch se présente comme suit : 

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

    • entrée

      RequestInfo

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

    • retours

      Promesse<Réponse>

  • fetchAndCachePut

    void

    Appelle 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 à récupérer et à mettre en cache.

    • retours

      Promesse<Réponse>

  • getCacheKey

    void

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

    • Standard

      "read"
      |"write"

    • retours

      Promesse<Demande>

  • hasCallback

    void

    Renvoie la valeur "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)=> {...}

    • name

      C

      Nom du rappel à vérifier.

    • retours

      boolean

  • iterateCallbacks

    void

    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 (par exemple, lorsque vous appelez chaque rappel, le paramètre d'objet que vous transmettez est fusionné avec l'état actuel du plug-in).

    La fonction iterateCallbacks se présente comme suit : 

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

    • name

      C

      Nom du rappel à exécuter

    • retours

      Generator<NonNullable<indexedAccess>inconnu>

  • runCallbacks

    void

    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: Comme 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 l'appel du rappel suivant. Consultez workbox-strategies.StrategyHandler#iterateCallbacks ci-dessous pour savoir comment gérer cette demande.

    La fonction runCallbacks se présente comme suit : 

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

    • name

      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

    void

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

    Remarque: vous pouvez attendre workbox-strategies.StrategyHandler~doneWaiting pour savoir quand toutes les promesses ajoutées sont terminées.

    La fonction waitUntil se présente comme suit : 

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

    • promesse

      Promise<T>

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

    • retours

      Promise<T>

StrategyOptions

Propriétés

  • cacheName

    string facultatif

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[] facultatif