boîte de travail-recettes

Un certain nombre de modèles courants, en particulier en ce qui concerne le routage et le mise en cache, sont suffisamment courants pour pouvoir être normalisés en recettes réutilisables. workbox-recipes les met à disposition dans un package facile à utiliser, ce qui vous permet d'être rapidement opérationnel avec un service worker hautement fonctionnel.

Recettes

Chaque recette combine un certain nombre de modules Workbox et les regroupe dans des modèles couramment utilisés. Les recettes ci-dessous présentent la recette que vous utilisez avec ce module, ainsi que le pattern équivalent qu'il utilise en arrière-plan, si vous souhaitez l'écrire vous-même.

Création hors connexion de remplacement

La recette de remplacement hors connexion permet à votre service worker de diffuser une page Web, une image ou une police en cas d'erreur de routage pour l'un des trois, par exemple si un utilisateur est hors connexion et qu'il n'y a pas de succès de cache. Dans la version 6.1.0 de Workbox Recipes, il n'est plus nécessaire de mettre en cache ces éléments à l'aide de la précaching. pour assurer la rétrocompatibilité, il recherche d'abord les éléments en pré-cache avant d'essayer son propre cache.

Par défaut, cette recette suppose que la page de remplacement est offline.html et qu'il n'existe pas d'image ou de police de remplacement. Consultez les options de remplacement hors connexion pour obtenir la liste de toutes les options de configuration.

Le remplacement hors connexion ne sera appliqué que s'il existe un route correspondant à une requête donnée. Si vous utilisez seule la recette de remplacement hors connexion, vous devez créer vous-même les routes. Le moyen le plus simple consiste à utiliser la méthode setDefaultHandler() pour créer un parcours qui applique la stratégie NetworkOnly à toutes les requêtes, comme illustré ci-dessous. D'autres recettes, comme le cache de page, le cache de ressources statiques ou le cache d'images, configurent des routes pour leurs caches respectifs. setDefaultHandler() n'est pas nécessaire lorsque vous utilisez à la fois le mode de secours hors connexion et l'une de ces recettes.

Recette

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

Modèle

import {setCatchHandler, setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const pageFallback = 'offline.html';
const imageFallback = false;
const fontFallback = false;

setDefaultHandler(new NetworkOnly());

self.addEventListener('install', event => {
  const files = [pageFallback];
  if (imageFallback) {
    files.push(imageFallback);
  }
  if (fontFallback) {
    files.push(fontFallback);
  }

  event.waitUntil(
    self.caches
      .open('workbox-offline-fallbacks')
      .then(cache => cache.addAll(files))
  );
});

const handler = async options => {
  const dest = options.request.destination;
  const cache = await self.caches.open('workbox-offline-fallbacks');

  if (dest === 'document') {
    return (await cache.match(pageFallback)) || Response.error();
  }

  if (dest === 'image' && imageFallback !== false) {
    return (await cache.match(imageFallback)) || Response.error();
  }

  if (dest === 'font' && fontFallback !== false) {
    return (await cache.match(fontFallback)) || Response.error();
  }

  return Response.error();
};

setCatchHandler(handler);

Cache de stratégie à chaud

La recette de cache de stratégie à préchargement vous permet de charger les URL fournies dans votre cache pendant la phase install du service worker, en les mettant en cache avec les options de la stratégie fournie. Cela peut être utilisé à la place de la mise en cache préalable si vous connaissez les URL spécifiques à mettre en cache, si vous souhaitez réchauffer le cache d'un itinéraire, ou si vous souhaitez mettre en cache les URL lors de l'installation.

Pour obtenir la liste de toutes les options de configuration, consultez les options de cache de stratégie de précharge.

Recette

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

warmStrategyCache({urls, strategy});

Modèle

import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

self.addEventListener('install', event => {
  // handleAll returns two promises, the second resolves after all items have been added to cache.
  const done = urls.map(
    path =>
      strategy.handleAll({
        event,
        request: new Request(path),
      })[1]
  );

  event.waitUntil(Promise.all(done));
});

Cache de page

La recette de mise en cache des pages permet à votre service worker de répondre à une demande de page HTML (via la navigation dans l'URL) à l'aide d'une stratégie de mise en cache axée sur le réseau.Dans l'idéal, elle permet d'obtenir un retour en cache suffisamment rapide pour obtenir un score Largest Contentful Paint inférieur à 4 secondes.

Par défaut, cette recette suppose que le délai avant expiration du réseau doit être de trois secondes et prend en charge le préchauffage du cache via l'option warmCache. Pour obtenir la liste complète des options de configuration, consultez les options de cache de page.

Recette

import {pageCache} from 'workbox-recipes';

pageCache();

Modèle

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

const cacheName = 'pages';
const matchCallback = ({request}) => request.mode === 'navigate';
const networkTimeoutSeconds = 3;

registerRoute(
  matchCallback,
  new NetworkFirst({
    networkTimeoutSeconds,
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Cache des ressources statiques

La recette de cache de ressources statiques permet à votre service worker de répondre à une requête de ressources statiques, en particulier les requêtes CSS, JavaScript et Web Worker, avec une stratégie de mise en cache obsolète pendant la validation afin que ces éléments puissent être diffusés rapidement à partir du cache et mis à jour en arrière-plan.

Cette recette est compatible avec le préchauffage du cache via l'option warmCache. Pour obtenir la liste de toutes les options de configuration, consultez les options de cache des ressources statiques.

Recette

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Modèle

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

const cacheName = 'static-resources';
const matchCallback = ({request}) =>
  // CSS
  request.destination === 'style' ||
  // JavaScript
  request.destination === 'script' ||
  // Web Workers
  request.destination === 'worker';

registerRoute(
  matchCallback,
  new StaleWhileRevalidate({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Cache d'images

La recette du cache d'images permet à votre service worker de répondre à une requête d'images à l'aide d'une stratégie de mise en cache axée sur le cache. Ainsi, une fois celles-ci disponibles dans le cache, l'utilisateur n'a pas besoin d'effectuer une autre requête pour celles-ci.

Par défaut, cette recette met en cache un maximum de 60 images, chacune pendant 30 jours et accepte le préchauffage du cache via l'option warmCache. Pour obtenir la liste de toutes les options de configuration, consultez les options de cache d'images.

Recette

import {imageCache} from 'workbox-recipes';

imageCache();

Modèle

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

const cacheName = 'images';
const matchCallback = ({request}) => request.destination === 'image';
const maxAgeSeconds = 30 * 24 * 60 * 60;
const maxEntries = 60;

registerRoute(
  matchCallback,
  new CacheFirst({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries,
        maxAgeSeconds,
      }),
    ],
  })
);

Cache Google Fonts

La recette Google Fonts met en cache les deux parties d'une requête Google Fonts :

• Feuille de style avec les définitions @font-face, qui renvoient vers les fichiers de police.
• Fichiers de police statiques avec révision.

Étant donné que la feuille de style peut changer fréquemment, une stratégie de mise en cache obsolète pendant la validation est utilisée. En revanche, les fichiers de polices eux-mêmes ne changent pas et peuvent exploiter une stratégie de mise en cache prioritaire.

Par défaut, cette recette met en cache un maximum de 30 fichiers de polices, chacun pendant un an. Consultez les options de cache Google Fonts pour obtenir la liste de toutes les options de configuration.

Recette

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Modèle

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

const sheetCacheName = 'google-fonts-stylesheets';
const fontCacheName = 'google-fonts-webfonts';
const maxAgeSeconds = 60 * 60 * 24 * 365;
const maxEntries = 30;

registerRoute(
  ({url}) => url.origin === 'https://fonts.googleapis.com',
  new StaleWhileRevalidate({
    cacheName: sheetCacheName,
  })
);

// Cache the underlying font files with a cache-first strategy for 1 year.
registerRoute(
  ({url}) => url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: fontCacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds,
        maxEntries,
      }),
    ],
  })
);

Utilisation rapide

En combinant toutes les recettes, vous obtiendrez un service worker qui répond aux requêtes de page avec une stratégie de mise en cache network first (d'abord le réseau), aux requêtes CSS, JavaScript et Web Worker avec une stratégie stale-while-revalidate (obsolète pendant la validation), aux requêtes d'image avec une stratégie cache first (d'abord le cache), met en cache correctement Google Fonts et fournit un plan de secours hors connexion pour les requêtes de page. Pour ce faire, procédez comme suit:

import {
  pageCache,
  imageCache,
  staticResourceCache,
  googleFontsCache,
  offlineFallback,
} from 'workbox-recipes';

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Types

GoogleFontCacheOptions

Propriétés

• cachePrefix

  chaîne facultatif

• maxAgeSeconds

  numéro facultatif

• maxEntries

  number facultatif

ImageCacheOptions

Propriétés

• cacheName

  chaîne facultatif

• matchCallback

  RouteMatchCallback facultatif

• maxAgeSeconds

  numéro facultatif

• maxEntries

  number facultatif

• plugins

  WorkboxPlugin[] facultatif

• warmCache

  string[] facultatif

OfflineFallbackOptions

Propriétés

• fontFallback

  chaîne facultatif

• imageFallback

  chaîne facultatif

• pageFallback

  chaîne facultatif

PageCacheOptions

Propriétés

• cacheName

  chaîne facultatif

• matchCallback

  RouteMatchCallback facultatif

• networkTimeoutSeconds

  numéro facultatif

• plugins

  WorkboxPlugin[] facultatif

• warmCache

  string[] facultatif

StaticResourceOptions

Propriétés

• cacheName

  chaîne facultatif

• matchCallback

  RouteMatchCallback facultatif

• plugins

  WorkboxPlugin[] facultatif

• warmCache

  string[] facultatif

WarmStrategyCacheOptions

Propriétés

• stratégie

  Stratégie

• URL

  chaîne[]

Méthodes

googleFontsCache()

workbox-recipes.googleFontsCache(
  options?: GoogleFontCacheOptions,
)

Implémentation de la recette de mise en cache [Google Fonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts

Paramètres

• options

  GoogleFontCacheOptions facultatif

imageCache()

workbox-recipes.imageCache(
  options?: ImageCacheOptions,
)

Implémentation de la [recette de mise en cache d'images]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

Paramètres

• options

  ImageCacheOptions facultatif

offlineFallback()

workbox-recipes.offlineFallback(
  options?: OfflineFallbackOptions,
)

Implémentation de la [recette complète des créations de remplacement]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks. Veillez à inclure les solutions de remplacement dans votre injection de préchargement.

Paramètres

• options

  OfflineFallbackOptions facultatif

pageCache()

workbox-recipes.pageCache(
  options?: PageCacheOptions,
)

Implémentation d'une recette de mise en cache de pages avec un délai avant expiration du réseau

Paramètres

• options

  PageCacheOptions facultatif

staticResourceCache()

workbox-recipes.staticResourceCache(
  options?: StaticResourceOptions,
)

Implémentation de la [recette de fichiers CSS et JavaScript]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

Paramètres

• options

  StaticResourceOptions facultatif

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Paramètres

• options

  WarmStrategyCacheOptions