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 unique la réponse donnée est "valide" et pouvant être enregistrées et réutilisées.

Le module workbox-cacheable-response fournit 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 basée sur les codes d'état

Vous pouvez configurer une stratégie Workbox 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 que lors du traitement des réponses requêtes sur https://third-party.example.com/images/, mettre en cache les requêtes avec un code d'état 0 ou 200.

Mise en cache basée sur les en-têtes

Vous pouvez configurer une stratégie Workbox pour vérifier la présence de valeurs d'en-tête spécifiques comme critères d'ajout au cache en définissant l'objet headers lors de la création 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',
        },
      }),
    ],
  })
);

Lorsque vous traitez les réponses pour les URL de requête contenant /path/to/api/, examinez l'en-tête nommé X-Is-Cacheable (qui sera ajouté à la réponse par le serveur). Si cet en-tête est présent et s'il est défini sur "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 correspondent aux valeurs associées.

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

Vous pouvez combiner la configuration de l'état et de l'en-tête. Les deux conditions doivent être remplies pour qu'une réponse soit considérée comme pouvant être mise en cache. En d'autres termes, la réponse doit comporter l'un des codes d'état configurés et 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 (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 les valeurs par défaut sont-elles différentes ?

Les valeurs par défaut varient selon que les réponses avec un état 0 (réponses opaques) seront mises en cache. En raison de la nature "boîte noire" des réponses opaques, le service worker ne peut pas savoir si la réponse est valide ou si elle reflète une réponse d'erreur renvoyée par le serveur cross-origin.

Pour les stratégies qui incluent un moyen de mettre à jour la réponse mise en cache, comme staleWhenRevalidate et networkFirst, le risque de mettre en cache d'erreur temporaire est atténuée par le fait que la prochaine fois le cache est mis à jour, nous espérons qu'une réponse appropriée et réussie sera utilisée.

Pour les stratégies impliquant la mise en cache de la première réponse reçue et de réutiliser indéfiniment cette réponse mise en cache, et la répercussion d'une les erreurs temporaires de mise en cache et de réutilisation sont plus graves. Par défaut, cacheFirst refuse d'enregistrer une réponse, sauf si elle comporte un code d'état 200.

Utilisation avancée

Si vous souhaitez utiliser la même logique de mise en cache en dehors d'une stratégie Workbox, 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 définir des règles codes d'état et/ou en-têtes doivent être présents pour qu'une Response pouvant être mises en cache.

Propriétés

  • constructor

    vide

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

    Si les options statuses et headers sont spécifiées, les deux conditions doivent être remplies pour que Response soit considéré comme enregistrable en cache.

    La fonction constructor se présente comme suit: 

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

  • isResponseCacheable

    vide

    Vérifie une réponse pour déterminer si elle peut être mise en cache en fonction de ce la configuration de l'objet.

    La fonction isResponseCacheable se présente comme suit : 

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

    • réponse

      Réponse

      La réponse dont la mise en cache est en cours cochée.

    • retours

      booléen

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

CacheableResponseOptions

Propriétés

  • headers

    objet facultatif

  • statuts

    number[] facultatif

CacheableResponsePlugin

Classe implémentant le rappel de cycle de vie cacheWillUpdate. Cela permet d'ajouter plus facilement des vérifications de la mise en cache aux requêtes effectuées via les stratégies intégrées de Workbox.

Propriétés

  • constructor

    vide

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

    Si les options statuses et headers sont spécifiées, les deux conditions doivent être remplies pour que Response soit considéré comme enregistrable en cache.

    La fonction constructor se présente comme suit: 

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