recetas-recetas

Algunos patrones comunes, especialmente en el enrutamiento y el almacenamiento en caché, son lo suficientemente comunes como para estandarizarse en recetas reutilizables. workbox-recipes los pone a disposición en un paquete fácil de consumir, lo que te permite comenzar a usar un trabajador de servicio altamente funcional rápidamente.

Recetas

Cada receta combina una serie de módulos de Workbox y los agrupa en patrones de uso general. Las siguientes recetas mostrarán la receta que usarás cuando utilices este módulo y el patrón equivalente que usa de forma interna, en caso de que quieras escribirlo tú mismo.

Conmutación por error sin conexión

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

De forma predeterminada, esta receta supone que la página de resguardo es offline.html y que no hay un resguardo de imagen ni de fuente. Consulta las opciones de resguardo sin conexión para obtener una lista de todas las opciones de configuración.

La alternativa sin conexión solo se aplicará si hay una ruta coincidente para una solicitud determinada. Si usas la receta de resguardo sin conexión por su cuenta, deberás crear las rutas tú mismo. La forma más sencilla de hacerlo 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 páginas, la caché de recursos estáticos o la caché de imágenes, configuran rutas para sus respectivas cachés. No se requiere setDefaultHandler() cuando se usan 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 semicaliente

La receta de la caché de la estrategia activa te permite cargar las URLs proporcionadas en tu caché durante la fase install del trabajador de servicio y almacenarlas en caché con las opciones de la estrategia proporcionada. Esto se puede usar como alternativa a la caché previa si conoces las URLs específicas que deseas almacenar en caché, quieres activar la caché de una ruta o lugares similares en los que deseas almacenar en caché las URLs durante la instalación.

Consulta las opciones de caché de estrategia con introducción 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 la caché de 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é en la que se prioriza la red, optimizada para permitir, de manera ideal, que el resguardo de la caché llegue lo suficientemente rápido para obtener una puntuación de pintura con más contenido de menos de 4.0 segundos.

De forma predeterminada, esta receta supone que el tiempo de espera de la red debe ser de 3 segundos y admite el calentamiento de la caché mediante la opción warmCache. Consulta las opciones de la caché de páginas 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 solicitudes de recursos estáticos, específicamente solicitudes de CSS, JavaScript y Web Worker, con una estrategia de almacenamiento en caché stale-while-revalidate, de modo que esos recursos puedan entregarse rápidamente desde la caché y actualizarse en segundo plano.

Esta receta admite el calentamiento de caché mediante 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 imágenes

La receta de almacenamiento en caché de imágenes permite que tu service worker responda a una solicitud de imágenes con una estrategia de almacenamiento en caché que priorice la caché, de modo que, una vez que estén disponibles en la caché, el usuario no necesite realizar otra solicitud por ellas.

De forma predeterminada, esta receta almacena en caché un máximo de 60 imágenes, cada una durante 30 días, y admite el preacondicionamiento de la 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áticas y revisadas.

Debido a que la hoja de estilo puede cambiar con frecuencia, se utiliza una estrategia de almacenamiento en caché inactiva durante la revalidación. Por otro lado, los archivos de fuentes no cambian y pueden aprovechar una estrategia de priorización de la caché.

De forma predeterminada, esta receta almacena en caché un máximo de 30 archivos de fuente, cada uno durante 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, obtendrás un servicio trabajador que responda a las solicitudes de página con una estrategia de almacenamiento en caché en primer lugar de la red, responda a las solicitudes de CSS, JavaScript y Web Worker con una estrategia de inactividad durante la validación, responda a las solicitudes de imágenes con una estrategia de caché en primer lugar, almacenen correctamente en caché las fuentes de Google y proporcionen un resguardo sin conexión para las solicitudes de página. Todo esto se puede hacer con los siguientes métodos:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Tipos

GoogleFontCacheOptions

Propiedades

  • cachePrefix

    cadena opcional

  • maxAgeSeconds

    número opcional

  • maxEntries

    número opcional

ImageCacheOptions

Propiedades

  • cacheName

    string opcional

  • matchCallback

    RouteMatchCallback opcional

  • maxAgeSeconds

    número opcional

  • maxEntries

    número opcional

  • complementos

    WorkboxPlugin[] opcional

  • warmCache

    string[] opcional

OfflineFallbackOptions

Propiedades

  • fontFallback

    cadena opcional

  • imageFallback

    string opcional

  • pageFallback

    string opcional

PageCacheOptions

Propiedades

  • cacheName

    string opcional

  • matchCallback

    RouteMatchCallback opcional

  • networkTimeoutSeconds

    número opcional

  • complementos

    WorkboxPlugin[] opcional

  • warmCache

    string[] opcional

StaticResourceOptions

Propiedades

WarmStrategyCacheOptions

Propiedades

Métodos

googleFontsCache()

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

Una implementación de la receta de almacenamiento en caché https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts de [Google Fonts]

Parámetros

imageCache()

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

Una implementación de la [receta de almacenamiento en caché de imágenes]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

Parámetros

offlineFallback()

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

Una implementación de la [receta de resguardos integrales]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks. Asegúrate de incluir los resguardos en la inserción de almacenamiento en caché previo.

Parámetros

pageCache()

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

Una implementación de una receta de almacenamiento en caché de páginas con un tiempo de espera de red

Parámetros

staticResourceCache()

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

Una implementación de la [receta de archivos CSS y JavaScript]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

Parámetros

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Parámetros