estrategias-de-caja de trabajo

Cuando se introdujeron los service workers por primera vez, surgió un conjunto de estrategias de almacenamiento en caché comunes. Una estrategia de almacenamiento en caché es un patrón que determina cómo un trabajador de servicio genera una respuesta después de recibir un evento de recuperación.

workbox-strategies proporciona las estrategias de almacenamiento en caché más comunes para que sea fácil aplicarlas en tu trabajador de servicio.

No entraremos en muchos detalles fuera de las estrategias compatibles con Workbox, pero puedes obtener más información en la guía sin conexión.

Cómo usar estrategias

En los siguientes ejemplos, te mostraremos cómo usar las estrategias de almacenamiento en caché de Workbox con workbox-routing. Existen algunas opciones que puedes definir con cada estrategia que se describen en la sección Configuración de estrategias de este documento.

En la sección de uso avanzado, veremos cómo puedes usar las estrategias de almacenamiento en caché directamente sin workbox-routing.

Stale-While-Revalidate

Diagrama de inactividad durante la revalidación

El patrón stale-while-revalidate te permite responder a la solicitud lo más rápido posible con una respuesta almacenada en caché si está disponible y, si no lo está, recurrir a la solicitud de red. Luego, se usa la solicitud de red para actualizar la caché. A diferencia de algunas implementaciones de inactividad durante la validación, esta estrategia siempre realizará una solicitud de validación, independientemente de la antigüedad de la respuesta almacenada en caché.

Esta es una estrategia bastante común en la que tener el recurso más actualizado no es vital para la aplicación.

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

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Primero la caché (recurrir a la red si no hay caché)

Diagrama de caché primero

Las apps web sin conexión dependerán en gran medida de la caché, pero para los recursos que no son esenciales y que se pueden almacenar en caché de forma gradual, la mejor opción es primero la caché.

Si hay una respuesta en la caché, la solicitud se entregará con la respuesta almacenada en caché y no se usará la red. Si no hay una respuesta almacenada en caché, la solicitud se completará con una solicitud de red, y la respuesta se almacenará en caché para que la siguiente solicitud se entregue directamente desde la caché.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

Prioridad a la red (red y recurrir al caché)

Primer diagrama de red

Para las solicitudes que se actualizan con frecuencia, la estrategia de prioridad de la red es la solución ideal. De forma predeterminada, intentará recuperar la respuesta más reciente de la red. Si la solicitud se realiza correctamente, colocará la respuesta en la caché. Si la red no muestra una respuesta, se usará la respuesta almacenada en caché.

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

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

Solo red

Diagrama de solo red

Si necesitas que se realicen solicitudes específicas desde la red, la estrategia que debes usar es solo red.

import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

Solo caché

Diagrama de solo caché

La estrategia de solo caché garantiza que las respuestas se obtengan de una caché. Esto es menos común en Workbox, pero puede ser útil si tienes tu propio paso de almacenamiento en caché previo.

import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

Configura estrategias

Todas las estrategias te permiten configurar lo siguiente:

  • Es el nombre de la caché que se usará en la estrategia.
  • Restricciones de vencimiento de la caché que se usarán en la estrategia.
  • Es un array de complementos a los que se llamará a sus métodos de ciclo de vida cuando se recupere y almacenen en caché una solicitud.

Cómo cambiar la caché que usa una estrategia

Puedes cambiar la estrategia de caché que se usa si proporcionas un nombre de caché. Esto es útil si deseas separar tus recursos para facilitar la depuración.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

Cómo usar complementos

Workbox incluye un conjunto de complementos que se pueden usar con estas estrategias.

Para usar cualquiera de estos complementos (o un complemento personalizado), solo debes pasar instancias a la opción plugins.

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

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

Estrategias personalizadas

Además de configurar estrategias, Workbox te permite crear tus propias estrategias personalizadas. Para ello, importa y extiende la clase base Strategy desde workbox-strategies:

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

En este ejemplo, handle() se usa como una estrategia de solicitud para definir una lógica de control específica. Existen dos estrategias de solicitud que se pueden usar:

  • handle(): Realiza una estrategia de solicitud y muestra un Promise que se resolverá con un Response, invocando todas las devoluciones de llamada relevantes del complemento.
  • handleAll(): Es similar a handle(), pero muestra dos objetos Promise. El primero es equivalente a lo que muestra handle(), y el segundo se resolverá cuando se completen las promesas que se agregaron a event.waitUntil() dentro de la estrategia.

Ambas estrategias de solicitud se invocan con dos parámetros:

  • request: Es el Request para el que la estrategia mostrará una respuesta.
  • handler: Es una instancia de StrategyHandler creada automáticamente para la estrategia actual.

Cómo crear una estrategia nueva

El siguiente es un ejemplo de una estrategia nueva que vuelve a implementar el comportamiento de NetworkOnly:

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

Observa cómo se llama a handler.fetch() en lugar del método nativo fetch. La clase StrategyHandler proporciona una serie de acciones de recuperación y almacenamiento en caché que se pueden usar cada vez que se usa handle() o handleAll():

  • fetch: Recupera una solicitud determinada y, luego, invoca los métodos de ciclo de vida del complemento requestWillFetch(), fetchDidSucceed() y fetchDidFail().
  • cacheMatch: Coincide con una solicitud de la caché y, luego, invoca los métodos de ciclo de vida del complemento cacheKeyWillBeUsed() y cachedResponseWillBeUsed().
  • cachePut: Coloca un par de solicitud/respuesta en la caché y, luego, invoca los métodos de ciclo de vida del complemento cacheKeyWillBeUsed(), cacheWillUpdate() y cacheDidUpdate().
  • fetchAndCachePut: Llama a fetch() y ejecuta cachePut() en segundo plano en la respuesta que genera fetch().
  • hasCallback: Toma una devolución de llamada como entrada y muestra verdadero si la estrategia tiene al menos un complemento con la devolución de llamada determinada.
  • runCallbacks: Ejecuta todas las devoluciones de llamada de complementos que coincidan con un nombre determinado, en orden, y pasa un objeto de parámetro determinado (combinado con el estado del complemento actual) como el único argumento.
  • iterateCallbacks: Acepta una devolución de llamada y muestra un iterador de devoluciones de llamada de complementos coincidentes, en el que cada devolución de llamada se une con el estado del controlador actual (es decir, cuando llames a cada devolución de llamada, cualquier parámetro de objeto que pases se combinará con el estado actual del complemento).
  • waitUntil: Agrega una promesa a las promesas de extensión de vida útil del evento asociado con la solicitud que se controla (por lo general, un FetchEvent).
  • doneWaiting: Muestra una promesa que se resuelve una vez que se liquidan todas las promesas que se pasan a waitUntil().
  • destroy: Detiene la ejecución de la estrategia y resuelve de inmediato las promesas waitUntil() pendientes.

Estrategia de carrera de red de caché personalizada

El siguiente ejemplo se basa en cache-network-race del libro de recetas sin conexión (que Workbox no proporciona), pero va un paso más allá y siempre actualiza la caché después de una solicitud de red correcta. Este es un ejemplo de una estrategia más compleja que usa varias acciones.

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

Uso avanzado

Si deseas usar las estrategias en tu propia lógica de evento de recuperación, puedes usar las clases de estrategia para ejecutar una solicitud a través de una estrategia específica.

Por ejemplo, para usar la estrategia de inactividad durante la validación, puedes hacer lo siguiente:

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

Puedes encontrar la lista de clases disponibles en la documentación de referencia de workbox-strategies.

Tipos

CacheFirst

Una implementación de una estrategia de solicitud prioritaria en la caché

Una estrategia en la que se prioriza la caché es útil para los recursos que se revisaron, como las URLs como /styles/example.a8f5f1.css, ya que pueden almacenarse en caché durante largos períodos de tiempo.

Si la solicitud de red falla y no hay coincidencias en la caché, se arrojará una excepción WorkboxError.

Propiedades

  • constructor

    void

    Crea una instancia nueva de la estrategia y establece todas las propiedades de opciones documentadas como propiedades de instancia públicas.

    Nota: Si una clase de estrategia personalizada extiende la clase Strategy base y no necesita más que estas propiedades, no es necesario que defina su propio constructor.

    La función constructor se ve de la siguiente manera: 

    (options?: StrategyOptions) => {...}

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • complementos

    WorkboxPlugin[]

  • _awaitComplete

    void

    La función _awaitComplete se ve de la siguiente manera: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Solicitud

    • evento

      ExtendableEvent

    • muestra

      Promise<void>

  • _getResponse

    void

    La función _getResponse se ve de la siguiente manera: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • muestra

      Promise<Response>

  • handle

    void

    Realiza una estrategia de solicitud y muestra un Promise que se resolverá con un Response, invocando todas las devoluciones de llamada de complementos relevantes.

    Cuando una instancia de estrategia se registra con un workbox-routing.Route de Workbox, se llama automáticamente a este método cuando la ruta coincide.

    Como alternativa, este método se puede usar en un objeto de escucha FetchEvent independiente pasándolo a event.respondWith().

    La función handle se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      Promise<Response>

  • handleAll

    void

    Es similar a workbox-strategies.Strategy~handle, pero en lugar de mostrar solo un Promise que se resuelve en un Response, mostrará una tupla de promesas [response, done], en la que el primero (response) es equivalente a lo que muestra handle() y el segundo es una promesa que se resolverá una vez que se completen las promesas que se agregaron a event.waitUntil() como parte de la ejecución de la estrategia.

    Puedes esperar la promesa de done para asegurarte de que el trabajo adicional que realiza la estrategia (por lo general, las respuestas de almacenamiento en caché) se complete correctamente.

    La función handleAll se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      [Promise<Response>, Promise<void>]

      Es una tupla de promesas [response, done] que se puede usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo su trabajo.

CacheOnly

Una implementación de una estrategia de solicitud solo de caché

Esta clase es útil si deseas aprovechar cualquier complemento de Workbox.

Si no hay coincidencias en la caché, se arrojará una excepción WorkboxError.

Propiedades

  • constructor

    void

    Crea una instancia nueva de la estrategia y establece todas las propiedades de opciones documentadas como propiedades de instancia públicas.

    Nota: Si una clase de estrategia personalizada extiende la clase Strategy base y no necesita más que estas propiedades, no es necesario que defina su propio constructor.

    La función constructor se ve de la siguiente manera: 

    (options?: StrategyOptions) => {...}

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • complementos

    WorkboxPlugin[]

  • _awaitComplete

    void

    La función _awaitComplete se ve de la siguiente manera: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Solicitud

    • evento

      ExtendableEvent

    • muestra

      Promise<void>

  • _getResponse

    void

    La función _getResponse se ve de la siguiente manera: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • muestra

      Promise<Response>

  • handle

    void

    Realiza una estrategia de solicitud y muestra un Promise que se resolverá con un Response, invocando todas las devoluciones de llamada de complementos relevantes.

    Cuando una instancia de estrategia se registra con un workbox-routing.Route de Workbox, se llama automáticamente a este método cuando la ruta coincide.

    Como alternativa, este método se puede usar en un objeto de escucha FetchEvent independiente pasándolo a event.respondWith().

    La función handle se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      Promise<Response>

  • handleAll

    void

    Es similar a workbox-strategies.Strategy~handle, pero en lugar de mostrar solo un Promise que se resuelve en un Response, mostrará una tupla de promesas [response, done], en la que el primero (response) es equivalente a lo que muestra handle() y el segundo es una promesa que se resolverá una vez que se completen las promesas que se agregaron a event.waitUntil() como parte de la ejecución de la estrategia.

    Puedes esperar la promesa de done para asegurarte de que el trabajo adicional que realiza la estrategia (por lo general, las respuestas de almacenamiento en caché) se complete correctamente.

    La función handleAll se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      [Promise<Response>, Promise<void>]

      Es una tupla de promesas [response, done] que se puede usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo su trabajo.

NetworkFirst

Una implementación de una estrategia de solicitud de red primero.

De forma predeterminada, esta estrategia almacenará en caché las respuestas con un código de estado 200, así como las respuestas opacas. Las respuestas opacas son solicitudes entre dominios en las que la respuesta no es compatible con CORS.

Si la solicitud de red falla y no hay coincidencias en la caché, se arrojará una excepción WorkboxError.

Propiedades

  • constructor

    void

    La función constructor se ve de la siguiente manera: 

    (options?: NetworkFirstOptions) => {...}

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • complementos

    WorkboxPlugin[]

  • _awaitComplete

    void

    La función _awaitComplete se ve de la siguiente manera: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Solicitud

    • evento

      ExtendableEvent

    • muestra

      Promise<void>

  • _getResponse

    void

    La función _getResponse se ve de la siguiente manera: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • muestra

      Promise<Response>

  • handle

    void

    Realiza una estrategia de solicitud y muestra un Promise que se resolverá con un Response, invocando todas las devoluciones de llamada de complementos relevantes.

    Cuando una instancia de estrategia se registra con un workbox-routing.Route de Workbox, se llama automáticamente a este método cuando la ruta coincide.

    Como alternativa, este método se puede usar en un objeto de escucha FetchEvent independiente pasándolo a event.respondWith().

    La función handle se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      Promise<Response>

  • handleAll

    void

    Es similar a workbox-strategies.Strategy~handle, pero en lugar de mostrar solo un Promise que se resuelve en un Response, mostrará una tupla de promesas [response, done], en la que el primero (response) es equivalente a lo que muestra handle() y el segundo es una promesa que se resolverá una vez que se completen las promesas que se agregaron a event.waitUntil() como parte de la ejecución de la estrategia.

    Puedes esperar la promesa de done para asegurarte de que el trabajo adicional que realiza la estrategia (por lo general, las respuestas de almacenamiento en caché) se complete correctamente.

    La función handleAll se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      [Promise<Response>, Promise<void>]

      Es una tupla de promesas [response, done] que se puede usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo su trabajo.

NetworkFirstOptions

Propiedades

  • cacheName

    cadena opcional

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • networkTimeoutSeconds

    número opcional

  • complementos

    WorkboxPlugin[] opcional

NetworkOnly

Una implementación de una estrategia de solicitud solo de red

Esta clase es útil si deseas aprovechar cualquier complemento de Workbox.

Si la solicitud de red falla, se arrojará una excepción WorkboxError.

Propiedades

  • constructor

    void

    La función constructor se ve de la siguiente manera: 

    (options?: NetworkOnlyOptions) => {...}

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • complementos

    WorkboxPlugin[]

  • _awaitComplete

    void

    La función _awaitComplete se ve de la siguiente manera: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Solicitud

    • evento

      ExtendableEvent

    • muestra

      Promise<void>

  • _getResponse

    void

    La función _getResponse se ve de la siguiente manera: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • muestra

      Promise<Response>

  • handle

    void

    Realiza una estrategia de solicitud y muestra un Promise que se resolverá con un Response, invocando todas las devoluciones de llamada de complementos relevantes.

    Cuando una instancia de estrategia se registra con un workbox-routing.Route de Workbox, se llama automáticamente a este método cuando la ruta coincide.

    Como alternativa, este método se puede usar en un objeto de escucha FetchEvent independiente pasándolo a event.respondWith().

    La función handle se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      Promise<Response>

  • handleAll

    void

    Es similar a workbox-strategies.Strategy~handle, pero en lugar de mostrar solo un Promise que se resuelve en un Response, mostrará una tupla de promesas [response, done], en la que el primero (response) es equivalente a lo que muestra handle() y el segundo es una promesa que se resolverá una vez que se completen las promesas que se agregaron a event.waitUntil() como parte de la ejecución de la estrategia.

    Puedes esperar la promesa de done para asegurarte de que el trabajo adicional que realiza la estrategia (por lo general, las respuestas de almacenamiento en caché) se complete correctamente.

    La función handleAll se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      [Promise<Response>, Promise<void>]

      Es una tupla de promesas [response, done] que se puede usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo su trabajo.

NetworkOnlyOptions

Propiedades

  • fetchOptions

    RequestInit opcional

  • networkTimeoutSeconds

    número opcional

  • complementos

    WorkboxPlugin[] opcional

StaleWhileRevalidate

Una implementación de una estrategia de solicitud stale-while-revalidate

Los recursos se solicitan a la caché y a la red en paralelo. La estrategia responderá con la versión almacenada en caché si está disponible; de lo contrario, esperará la respuesta de la red. La caché se actualiza con la respuesta de la red con cada solicitud correcta.

De forma predeterminada, esta estrategia almacenará en caché las respuestas con un código de estado 200, así como las respuestas opacas. Las respuestas opacas son solicitudes entre dominios en las que la respuesta no es compatible con CORS.

Si la solicitud de red falla y no hay coincidencias en la caché, se arrojará una excepción WorkboxError.

Propiedades

  • constructor

    void

    La función constructor se ve de la siguiente manera: 

    (options?: StrategyOptions) => {...}

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • complementos

    WorkboxPlugin[]

  • _awaitComplete

    void

    La función _awaitComplete se ve de la siguiente manera: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Solicitud

    • evento

      ExtendableEvent

    • muestra

      Promise<void>

  • _getResponse

    void

    La función _getResponse se ve de la siguiente manera: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • muestra

      Promise<Response>

  • handle

    void

    Realiza una estrategia de solicitud y muestra un Promise que se resolverá con un Response, invocando todas las devoluciones de llamada de complementos relevantes.

    Cuando una instancia de estrategia se registra con un workbox-routing.Route de Workbox, se llama automáticamente a este método cuando la ruta coincide.

    Como alternativa, este método se puede usar en un objeto de escucha FetchEvent independiente pasándolo a event.respondWith().

    La función handle se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      Promise<Response>

  • handleAll

    void

    Es similar a workbox-strategies.Strategy~handle, pero en lugar de mostrar solo un Promise que se resuelve en un Response, mostrará una tupla de promesas [response, done], en la que el primero (response) es equivalente a lo que muestra handle() y el segundo es una promesa que se resolverá una vez que se completen las promesas que se agregaron a event.waitUntil() como parte de la ejecución de la estrategia.

    Puedes esperar la promesa de done para asegurarte de que el trabajo adicional que realiza la estrategia (por lo general, las respuestas de almacenamiento en caché) se complete correctamente.

    La función handleAll se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      [Promise<Response>, Promise<void>]

      Es una tupla de promesas [response, done] que se puede usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo su trabajo.

Strategy

Una clase base abstracta de la que deben extenderse todas las demás clases de estrategias:

Propiedades

  • constructor

    void

    Crea una instancia nueva de la estrategia y establece todas las propiedades de opciones documentadas como propiedades de instancia públicas.

    Nota: Si una clase de estrategia personalizada extiende la clase Strategy base y no necesita más que estas propiedades, no es necesario que defina su propio constructor.

    La función constructor se ve de la siguiente manera: 

    (options?: StrategyOptions) => {...}

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • complementos

    WorkboxPlugin[]

  • _awaitComplete

    void

    La función _awaitComplete se ve de la siguiente manera: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Solicitud

    • evento

      ExtendableEvent

    • muestra

      Promise<void>

  • _getResponse

    void

    La función _getResponse se ve de la siguiente manera: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • muestra

      Promise<Response>

  • _handle

    void

    La función _handle se ve de la siguiente manera: 

    (request: Request, handler: StrategyHandler) => {...}

    • muestra

      Promise<Response>

  • handle

    void

    Realiza una estrategia de solicitud y muestra un Promise que se resolverá con un Response, invocando todas las devoluciones de llamada de complementos relevantes.

    Cuando una instancia de estrategia se registra con un workbox-routing.Route de Workbox, se llama automáticamente a este método cuando la ruta coincide.

    Como alternativa, este método se puede usar en un objeto de escucha FetchEvent independiente pasándolo a event.respondWith().

    La función handle se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      Promise<Response>

  • handleAll

    void

    Es similar a workbox-strategies.Strategy~handle, pero en lugar de mostrar solo un Promise que se resuelve en un Response, mostrará una tupla de promesas [response, done], en la que el primero (response) es equivalente a lo que muestra handle() y el segundo es una promesa que se resolverá una vez que se completen las promesas que se agregaron a event.waitUntil() como parte de la ejecución de la estrategia.

    Puedes esperar la promesa de done para asegurarte de que el trabajo adicional que realiza la estrategia (por lo general, las respuestas de almacenamiento en caché) se complete correctamente.

    La función handleAll se ve de la siguiente manera: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opciones

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un objeto con las propiedades que se indican a continuación.

    • muestra

      [Promise<Response>, Promise<void>]

      Es una tupla de promesas [response, done] que se puede usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo su trabajo.

StrategyHandler

Es una clase que se crea cada vez que una instancia de Strategy llama a workbox-strategies.Strategy~handle o workbox-strategies.Strategy~handleAll que une todas las acciones de recuperación y almacenamiento en caché alrededor de las devoluciones de llamada del complemento y realiza un seguimiento de cuándo la estrategia está "terminada" (es decir, se resolvieron todas las promesas de event.waitUntil() agregadas).

Propiedades

  • constructor

    void

    Crea una instancia nueva asociada con la estrategia y el evento pasados que controlan la solicitud.

    El constructor también inicializa el estado que se pasará a cada uno de los complementos que controlan esta solicitud.

    La función constructor se ve de la siguiente manera: 

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • evento

    ExtendableEvent

  • params

    cualquier opcional

  • request

    Solicitud

  • url

    URL opcional

  • cacheMatch

    void

    Coincide con una solicitud de la caché (y, además, invoca cualquier método de devolución de llamada del complemento aplicable) con cacheName, matchOptions y plugins definidos en el objeto de estrategia.

    Cuando se usa este método, se invocan los siguientes métodos del ciclo de vida del complemento:

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

    La función cacheMatch se ve de la siguiente manera: 

    (key: RequestInfo) => {...}

    • clave

      RequestInfo

      Es la solicitud o la URL que se usará como clave de caché.

    • muestra

      Promise<Response>

      Una respuesta coincidente, si se encuentra

  • cachePut

    void

    Coloca un par de solicitud/respuesta en la caché (y, luego, invoca cualquier método de devolución de llamada de complemento aplicable) con cacheName y plugins definidos en el objeto de estrategia.

    Cuando se usa este método, se invocan los siguientes métodos del ciclo de vida del complemento:

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    La función cachePut se ve de la siguiente manera: 

    (key: RequestInfo, response: Response) => {...}

    • clave

      RequestInfo

      Es la solicitud o la URL que se usará como clave de caché.

    • respuesta

      Respuesta

      Es la respuesta para almacenar en caché.

    • muestra

      Promesa<booleano>

      false si un cacheWillUpdate provocó que la respuesta no se almacenara en caché, y true en caso contrario.

  • destruir

    void

    Detiene la ejecución de la estrategia y resuelve de inmediato las promesas waitUntil() pendientes.

    La función destroy se ve de la siguiente manera: 

    () => {...}

  • doneWaiting

    void

    Muestra una promesa que se resuelve una vez que se liquidan todas las promesas que se pasaron a workbox-strategies.StrategyHandler~waitUntil.

    Nota: Cualquier trabajo que se realice después de que se establezca doneWaiting() se debe pasar manualmente al método waitUntil() de un evento (no al método waitUntil() de este controlador). De lo contrario, es posible que se cancele el subproceso del trabajador de servicio antes de que se complete tu trabajo.

    La función doneWaiting se ve de la siguiente manera: 

    () => {...}

    • muestra

      Promise<void>

  • fetch

    void

    Recupera una solicitud determinada (y, luego, invoca cualquier método de devolución de llamada de complemento aplicable) con fetchOptions (para solicitudes que no son de navegación) y plugins definidos en el objeto Strategy.

    Cuando se usa este método, se invocan los siguientes métodos del ciclo de vida del complemento:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

    La función fetch se ve de la siguiente manera: 

    (input: RequestInfo) => {...}

    • entrada

      RequestInfo

      La URL o solicitud que se recuperará.

    • muestra

      Promise<Response>

  • fetchAndCachePut

    void

    Llama a this.fetch() y (en segundo plano) ejecuta this.cachePut() en la respuesta que genera this.fetch().

    La llamada a this.cachePut() invoca automáticamente this.waitUntil(), por lo que no tienes que llamar a waitUntil() de forma manual en el evento.

    La función fetchAndCachePut se ve de la siguiente manera: 

    (input: RequestInfo) => {...}

    • entrada

      RequestInfo

      La solicitud o URL que se recuperará y almacenará en caché.

    • muestra

      Promise<Response>

  • getCacheKey

    void

    Verifica la lista de complementos para la devolución de llamada de cacheKeyWillBeUsed y ejecuta cualquiera de esas devoluciones de llamada que se encuentren en secuencia. El objeto Request final que muestra el último complemento se considera la clave de caché para las operaciones de lectura o escritura en la caché. Si no se registraron devoluciones de llamada del complemento cacheKeyWillBeUsed, la solicitud pasada se muestra sin modificaciones.

    La función getCacheKey se ve de la siguiente manera: 

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • request

      Solicitud

    • Standard

      "read"
       | "write"

    • muestra

      Promise<Request>

  • hasCallback

    void

    Muestra verdadero si la estrategia tiene al menos un complemento con la devolución de llamada proporcionada.

    La función hasCallback se ve de la siguiente manera: 

    (name: C) => {...}

    • nombre

      C

      Es el nombre de la devolución de llamada que se debe verificar.

    • muestra

      booleano

  • iterateCallbacks

    void

    Acepta una devolución de llamada y muestra un iterador de devoluciones de llamada de complementos coincidentes, en el que cada devolución de llamada se une con el estado del controlador actual (es decir, cuando llamas a cada devolución de llamada, cualquier parámetro de objeto que le pases se combinará con el estado actual del complemento).

    La función iterateCallbacks se ve de la siguiente manera: 

    (name: C) => {...}

    • nombre

      C

      Es el nombre de la devolución de llamada que se ejecutará.

    • muestra

      Generador<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    void

    Ejecuta todas las devoluciones de llamada de complementos que coincidan con el nombre determinado, en orden, y pasa el objeto de parámetro determinado (combinado con el estado del complemento actual) como el único argumento.

    Nota: Como este método ejecuta todos los complementos, no es adecuado para los casos en los que se debe aplicar el valor que se muestra de una devolución de llamada antes de llamar a la siguiente. Consulta workbox-strategies.StrategyHandler#iterateCallbacks a continuación para saber cómo manejar ese caso.

    La función runCallbacks se ve de la siguiente manera: 

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • nombre

      C

      Es el nombre de la devolución de llamada que se ejecutará en cada complemento.

    • param

      Omite<indexedAccess"state"
      >

      Es el objeto que se pasará como el primer (y único) parámetro cuando se ejecute cada devolución de llamada. Este objeto se combinará con el estado del complemento actual antes de la ejecución de la devolución de llamada.

    • muestra

      Promise<void>

  • waitUntil

    void

    Agrega una promesa a la [extend lifetime promises]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises del evento asociado con la solicitud que se controla (por lo general, una FetchEvent).

    Nota: Puedes esperar a workbox-strategies.StrategyHandler~doneWaiting para saber cuándo se resolvieron todas las promesas agregadas.

    La función waitUntil se ve de la siguiente manera: 

    (promise: Promise<T>) => {...}

    • promesa

      Promise<T>

      Es una promesa que se agrega a las promesas de extensión de la vida útil del evento que activó la solicitud.

    • muestra

      Promise<T>

StrategyOptions

Propiedades

  • cacheName

    cadena opcional

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • complementos

    WorkboxPlugin[] opcional