boîte de travail-recettes

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

Recettes

Chaque recette associe un certain nombre de modules de boîte de travail et les regroupe dans des modèles couramment utilisés. Les recettes ci-dessous présentent la recette que vous utilisez avec ce module et le motif équivalent que vous utilisez en arrière-plan, si vous souhaitez l'écrire vous-même.

Création de remplacement hors connexion

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 de ces trois éléments, par exemple si un utilisateur est hors connexion et qu'il n'y a pas de succès de cache (hit). 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é-mise en cache. Pour assurer la rétrocompatibilité, l'application 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'y a 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.

La création de remplacement hors connexion ne sera appliquée que s'il existe une route correspondante pour une requête donnée. Si vous utilisez la recette de remplacement hors connexion seule, vous devez créer vous-même les routes. Le moyen le plus simple consiste à utiliser la méthode setDefaultHandler() pour créer une route qui applique la stratégie NetworkOnly à toutes les requêtes, comme indiqué ci-dessous. D'autres méthodes, comme le cache de pages, le cache de ressources statique ou le cache d'images, configurent des routes pour leurs caches respectifs. setDefaultHandler() n'est pas requis lorsque vous utilisez à la fois une création de remplacement 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();

Schéma

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 tiède

La recette de cache de stratégie tiède 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. Cette méthode peut être utilisée à la place de la pré-mise en cache si vous connaissez les URL spécifiques que vous souhaitez mettre en cache, si vous souhaitez préchauffer le cache d'un itinéraire ou à des emplacements similaires dans lesquels vous souhaitez mettre en cache des URL lors de l'installation.

Consultez les options de cache de stratégie "tiède" pour obtenir la liste de toutes les options de configuration.

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});

Schéma

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 la page

La recette du cache de pages permet à votre service worker de répondre à une requête de page HTML (via la navigation via des URL) à l'aide d'une stratégie de mise en cache privilégiant le réseau.Idéalement, cette stratégie doit être optimisée pour permettre au remplacement du cache d'arriver assez rapidement pour obtenir un score de plus grande valeur Contentful Paint de moins de 4 secondes.

Par défaut, cette recette suppose que le délai avant expiration du réseau doit être de trois secondes et accepte le préchauffage du cache via l'option warmCache. Consultez les options de cache de pages pour obtenir la liste de toutes les options de configuration.

Recette

import {pageCache} from 'workbox-recipes';

pageCache();

Schéma

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 du cache des ressources statiques permet à votre service worker de répondre à une requête de ressources statiques, en particulier des requêtes CSS, JavaScript et Web Worker, en utilisant une stratégie de mise en cache stale-while-revalidate. Ainsi, ces éléments peuvent être rapidement diffusés à partir du cache et mis à jour en arrière-plan.

Cette recette est compatible avec le chauffage du cache via l'option warmCache. Consultez les options de cache des ressources statiques pour obtenir la liste de toutes les options de configuration.

Recette

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Schéma

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 de mise en 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 mise en cache. Ainsi, une fois qu'elles sont disponibles dans le cache, l'utilisateur n'a pas besoin d'envoyer d'autre requête.

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

Recette

import {imageCache} from 'workbox-recipes';

imageCache();

Schéma

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 aux fichiers de polices.
• Fichiers de police statiques révisés.

La feuille de style pouvant changer fréquemment, nous utilisons la stratégie de mise en cache stale-while-revalidate. En revanche, les fichiers de police eux-mêmes ne changent pas et peuvent tirer parti d'une stratégie axée sur le cache-first.

Par défaut, cette recette met en cache un maximum de 30 fichiers de police, 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();

Schéma

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 l'ensemble de ces recettes, vous obtiendrez un service worker qui répond aux requêtes de page avec une stratégie de mise en cache d'abord réseau, qui répond aux requêtes CSS, JavaScript et Web Worker à l'aide d'une stratégie stale-while-revalidate, répond aux requêtes d'image avec une stratégie mise en cache d'abord, met correctement en cache Google Fonts et offre une connexion de remplacement 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();

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

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

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

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

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

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)