réponse-boîte-de-travail-mise-en-cache

Lors de la mise en cache des éléments au moment de l'exécution, il n'existe pas de règle universelle qui détermine si une réponse donnée est "valide" et peut être enregistrée et réutilisée.

Le module workbox-cacheable-response est un moyen standard de déterminer si une réponse doit être mise en cache en fonction de son code d'état numérique, de la présence d'un en-tête avec une valeur spécifique ou d'une combinaison des deux.

Mise en cache en fonction des codes d'état

Vous pouvez configurer une stratégie de boîte de travail pour considérer un ensemble de codes d'état comme éligibles à la mise en cache en ajoutant une instance CacheableResponsePlugin au paramètre plugins d'une stratégie:

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

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Cette configuration indique à Workbox qu'il doit mettre en cache toutes les requêtes dont le code d'état est 0 ou 200 lors du traitement des réponses aux requêtes envoyées à https://third-party.example.com/images/.

Mise en cache en fonction des en-têtes

Vous pouvez configurer une stratégie de boîte de travail pour vérifier la présence de valeurs d'en-tête spécifiques comme critères d'ajout au cache. Pour ce faire, définissez l'objet headers lors de la construction du plug-in:

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

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

Lors du traitement des réponses pour les URL de requête contenant /path/to/api/, examinez l'en-tête nommé X-Is-Cacheable (qui serait ajouté à la réponse par le serveur). Si cet en-tête est présent et s'il est défini sur la valeur "true", la réponse peut être mise en cache.

Si plusieurs en-têtes sont spécifiés, un seul des en-têtes doit correspondre aux valeurs associées.

Mise en cache basée sur les en-têtes et les codes d'état

Vous pouvez combiner des configurations d'état et d'en-tête. Ces deux conditions doivent être remplies pour qu'une réponse puisse être mise en cache. En d'autres termes, la réponse doit avoir l'un des codes d'état configurés et elle doit comporter au moins l'un des en-têtes fournis.

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

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

Quelles sont les valeurs par défaut ?

Si vous utilisez l'une des stratégies intégrées de Workbox sans configurer explicitement un cacheableResponse.CacheableResponsePlugin, les critères par défaut suivants sont utilisés pour déterminer si une réponse reçue du réseau doit être mise en cache:

  • stalewhileRevalidate et networkFirst: les réponses dont l'état est 0 (c'est-à-dire réponses opaques) ou 200 sont considérées comme pouvant être mises en cache.
  • cacheFirst: les réponses dont l'état est 200 sont considérées comme pouvant être mises en cache.

Par défaut, les en-têtes de réponse ne sont pas utilisés pour déterminer la mise en cache.

Pourquoi existe-t-il des valeurs par défaut différentes ?

Les valeurs par défaut varient selon que les réponses dont l'état est 0 (c'est-à-dire des réponses opaques) finissent ou non par être mises en cache. En raison de la nature "boîte noire" des réponses opaques, il est impossible pour le service worker de savoir si la réponse est valide ou si elle reflète une réponse d'erreur renvoyée par le serveur multi-origine.

Pour les stratégies comprenant des moyens de mettre à jour la réponse mise en cache, telles que "stalewhileRevalidate" et "networkFirst", le risque de mise en cache d'une réponse d'erreur temporaire est atténué par le fait que la prochaine fois que le cache sera mis à jour, une réponse correcte et réussie sera utilisée avec un peu de chance.

Pour les stratégies qui impliquent de mettre en cache la première réponse reçue et de réutiliser cette réponse mise en cache indéfiniment, les répercussions d'une erreur temporaire lors de la mise en cache et de la réutilisation sont plus sévères. Pour éviter les erreurs par défaut, cacheFirst refuse d'enregistrer une réponse, sauf si son code d'état est 200.

Utilisation avancée

Si vous souhaitez utiliser la même logique de mise en cache en dehors d'une stratégie de boîte de travail, vous pouvez utiliser directement la classe CacheableResponse.

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}

Types

CacheableResponse

Cette classe vous permet de configurer des règles déterminant les codes d'état et/ou les en-têtes à inclure pour qu'une Response soit considérée comme pouvant être mise en cache.

Propriétés

  • constructor

    void

    Pour construire une nouvelle instance CacheableResponse, vous devez fournir au moins l'une des propriétés config.

    Si les champs statuses et headers sont tous les deux spécifiés, les deux conditions doivent être remplies pour que l'élément Response soit considéré comme pouvant être mis en cache.

    La fonction constructor se présente comme suit : 

    (config?: CacheableResponseOptions) => {...}

  • isResponseCacheable

    void

    Vérifie une réponse pour savoir si elle peut être mise en cache ou non, en fonction de la configuration de cet objet.

    La fonction isResponseCacheable se présente comme suit : 

    (response: Response) => {...}

    • réponse

      Réponse

      Réponse dont la mise en cache est en cours de vérification.

    • retours

      boolean

      true si Response peut être mis en cache, et false dans le cas contraire.

CacheableResponseOptions

Propriétés

  • headers

    objet facultatif

  • états

    number[] facultatif

CacheableResponsePlugin

Une classe implémentant le rappel de cycle de vie cacheWillUpdate. Il est ainsi plus facile d'ajouter des vérifications de mise en cache pour les requêtes effectuées via les stratégies intégrées de Workbox.

Propriétés

  • constructor

    void

    Pour construire une nouvelle instance CacheableResponsePlugin, vous devez fournir au moins l'une des propriétés config.

    Si les champs statuses et headers sont tous les deux spécifiés, les deux conditions doivent être remplies pour que l'élément Response soit considéré comme pouvant être mis en cache.

    La fonction constructor se présente comme suit : 

    (config: CacheableResponseOptions) => {...}