recetas-recetas

Varios patrones comunes, en especial los relacionados con el enrutamiento y el almacenamiento en caché, son lo suficientemente comunes como para que se puedan estandarizar en recetas reutilizables. workbox-recipes las pone a disposición en un paquete fácil de consumir, lo que te permite ponerte en marcha rápidamente con un service worker altamente funcional.

Plantillas

Cada receta combina varios módulos de Workbox y los agrupa en patrones de uso común. En las siguientes recetas, se mostrará la receta que usas cuando utilizas este módulo, y el patrón equivalente que está usando de forma interna, por si quieres escribirlo tú mismo.

Resguardo sin conexión

La receta de resguardo sin conexión permite que tu service worker entregue una página web, una imagen o una fuente si se produce un error de enrutamiento para cualquiera de los tres, por ejemplo, si un usuario está sin conexión y no hay un acierto de caché. En la versión 6.1.0 de Workbox Recipes, se quitó el requisito de almacenar en caché estos elementos con el almacenamiento previo en caché. Por motivos de retrocompatibilidad, primero buscará elementos en el precaché antes de probar su propia caché.

Esta receta, de forma predeterminada, supone que la página de resguardo es offline.html y que no hay un resguardo de imágenes o fuentes. Consulta las opciones de resguardo sin conexión para obtener una lista de todas las opciones de configuración.

El resguardo sin conexión solo se aplicará si hay una ruta que coincida con una solicitud determinada. Si usas la receta de resguardo sin conexión por sí sola, deberás crear rutas por tu cuenta. La forma más sencilla es usar el método setDefaultHandler() para crear una ruta que aplique la estrategia NetworkOnly a todas las solicitudes, como se muestra a continuación. Otras recetas, como la caché de la página, la caché de recursos estáticos o la caché de imágenes, configuran rutas para sus respectivas cachés. setDefaultHandler() no es obligatorio cuando se usa el resguardo sin conexión y una de esas recetas.

Receta

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

Patrón

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

Caché de estrategia de preparación

La receta de caché de estrategia semicaliente te permite cargar las URLs proporcionadas en la caché durante la fase install del service worker y almacenarlas en caché con las opciones de la estrategia proporcionada. Se puede usar como alternativa al almacenamiento previo en caché si conoces las URLs específicas que quieres almacenar en caché, quieres calentar la caché de una ruta o lugares similares en los que quieres almacenar en caché las URLs durante la instalación.

Consulta las opciones de caché de la estrategia semicaliente para obtener una lista de todas las opciones de configuración.

Receta

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

Patrón

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

Caché de la página

La receta de caché de la página permite que tu service worker responda a una solicitud de una página HTML (a través de la navegación de URL) con una estrategia de almacenamiento en caché primero en la red, optimizada para permitir que el resguardo de caché llegue lo suficientemente rápido para obtener una puntuación de Largest Contentful Paint de menos de 4.0 segundos.

Esta receta, de forma predeterminada, supone que el tiempo de espera de la red debe ser de 3 segundos y admite el calentamiento de caché a través de la opción warmCache. Consulta las opciones de caché de la página para obtener una lista de todas las opciones de configuración.

Receta

import {pageCache} from 'workbox-recipes';

pageCache();

Patrón

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

Caché de recursos estáticos

La receta de caché de recursos estáticos permite que tu service worker responda a una solicitud de recursos estáticos, específicamente solicitudes de CSS, JavaScript y trabajo web, con una estrategia de almacenamiento en caché stale-while-revalidate, de manera que los elementos puedan entregarse rápidamente desde la caché y actualizarse en segundo plano.

Esta receta admite el calentamiento de caché a través de la opción warmCache. Consulta las opciones de caché de recursos estáticos para obtener una lista de todas las opciones de configuración.

Receta

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Patrón

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

Caché de imagen

La receta de caché de imágenes permite que el service worker responda a una solicitud de imágenes con una estrategia de almacenamiento en caché del tipo cache first, de modo que, una vez que estén disponibles en la caché, el usuario no tenga que realizar otra solicitud.

De forma predeterminada, esta receta almacena en caché un máximo de 60 imágenes, cada una durante 30 días, y admite el calentamiento de caché a través de la opción warmCache. Consulta las opciones de caché de imágenes para obtener una lista de todas las opciones de configuración.

Receta

import {imageCache} from 'workbox-recipes';

imageCache();

Patrón

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

Caché de Google Fonts

La receta de Google Fonts almacena en caché las dos partes de una solicitud de Google Fonts:

• La hoja de estilo con las definiciones de @font-face, que vinculan a los archivos de fuentes
• Los archivos de fuentes estáticos y revisados

Dado que la hoja de estilo puede cambiar con frecuencia, se usa una estrategia de almacenamiento en caché stale-while-revalidate. Por otro lado, los archivos de fuentes no cambian y pueden aprovechar una estrategia de primero almacenamiento en caché.

De forma predeterminada, esta receta almacena en caché un máximo de 30 archivos de fuentes, cada uno por un año. Consulta las opciones de caché de Google Fonts para obtener una lista de todas las opciones de configuración.

Receta

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Patrón

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

Uso rápido

Si combinas todas las recetas, se generará un service worker que responda a las solicitudes de páginas con una estrategia de almacenamiento en caché que prioriza la red, responderá a las solicitudes de CSS, JavaScript y Web Worker con una estrategia stale-while-revalidate, responderá a las solicitudes de imagen con una estrategia de primero el almacenamiento en caché, almacenará en caché correctamente las fuentes de Google y proporcionará un resguardo sin conexión para las solicitudes de páginas. Todo esto se puede hacer con lo siguiente:

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,
)