estrategias-de-caja de trabajo

Cuando se introdujeron los service workers por primera vez, surgió un conjunto de estrategias comunes de almacenamiento en caché. Una estrategia de almacenamiento en caché es un patrón que determina cómo un service worker 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 service worker.

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

Uso de estrategias

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

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

Revalidación de inactividad

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 recurrir a la solicitud de red si no está almacenada en caché. Luego, se usa la solicitud de red para actualizar la caché. A diferencia de algunas implementaciones de revalidación inactiva, esta estrategia siempre realizará una solicitud de revalidación, sin importar 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 fundamental para la aplicación.

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

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

Caché primero (la caché vuelve a la red)

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

Si hay una respuesta en la caché, la solicitud se completará con la respuesta almacenada en caché y no se usará la red. Si no hay una respuesta almacenada en caché, una solicitud de red completará la solicitud 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());

Red primero (red que se vuelve a la caché)

Para las solicitudes que se actualizan con frecuencia, la estrategia primera en 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

Si necesitas que las solicitudes específicas se entreguen 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é

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é.

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

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

Configuración de estrategias

Todas las estrategias te permiten configurar lo siguiente:

• El nombre de la caché que se usará en la estrategia.
• Restricciones de vencimiento de la caché para usar en la estrategia.
• Un array de complementos a los que se llamará a los métodos de ciclo de vida para recuperar y almacenar en caché una solicitud.

Cambia la caché que usa una estrategia

Puedes cambiar una estrategia utilizada en la caché proporcionando un nombre para la caché. Esto es útil si deseas separar tus elementos 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',
  })
);

Uso de complementos

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

• sincronización en segundo plano de la caja de trabajo
• workbox-broadcast-update
• Respuesta-en-caché-de-la-caja de trabajo
• vencimiento-del-cuadro de trabajo
• workbox-range-requests

Para usar cualquiera de estos complementos (o uno personalizado), solo debes pasar las 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 estrategia de solicitud para definir una lógica de control específica. Existen dos estrategias de solicitudes que se pueden usar:

• handle(): Realiza una estrategia de solicitud y muestra un Promise que se resolverá con un Response, lo que invoca 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 resolverá cuando se completen las promesas que se agregaron a event.waitUntil() dentro de la estrategia.

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

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

Crea 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 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: Hace coincidir una solicitud de la caché y, luego, invoca los métodos del 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 el valor true 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 coinciden con un nombre determinado, en orden y pasa un objeto de parámetro determinado (combinado con el estado actual del complemento) como único argumento.
• iterateCallbacks: Acepta una devolución de llamada y muestra un iterable de devoluciones de llamada de complementos coincidentes, en las que cada devolución de llamada se une con el estado actual del controlador (es decir, cuando llamas 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 la 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 cumplen todas las promesas que se pasaron a waitUntil().
• destroy: Deja de ejecutar la estrategia y resuelve de inmediato cualquier promesa waitUntil() pendiente.

Nota: Consulta la implementación de origen de StrategyHandler para ver todos los parámetros que acepta cada acción

Estrategia de carrera de red de caché personalizada

El siguiente ejemplo se basa en cache-network-race de la Guía de soluciones 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. Esto 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 eventos 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 stale-while-revalidar, 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 los documentos de referencia de las estrategias de cuadros de trabajo.

Tipos

CacheFirst

Una implementación de una estrategia de solicitud que priorice la caché.

Una estrategia centrada en la caché es útil para los elementos que se revisaron, como las URLs como /styles/example.a8f5f1.css, ya que se pueden almacenar en caché durante largos períodos.

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

Propiedades

• constructor

  void

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

  Nota: Si una clase de estrategia personalizada extiende la clase básica de estrategia y no necesita más que estas propiedades, no necesita definir su propio constructor.

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

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

  • Opciones

    StrategyOptions opcional

  • resultados

    CacheFirst

• cacheName

  cadena

• 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

    Promesa<Respuesta>

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promise<void>

• Respuesta de_get

  void

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

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

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promesa<Respuesta>

• identificador

  void

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

  Cuando se registra una instancia de estrategia con un workbox-routing.Route de Workbox, se llama a este método automáticamente 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.

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

  • resultados

    Promesa<Respuesta>

• handleAll

  void

  Es similar a workbox-strategies.Strategy~handle, pero en lugar de solo mostrar una Promise que se resuelve en una Response, se mostrará una tupla de promesas [response, done], en la que la primera (response) es equivalente a lo que muestra handle() y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado a event.waitUntil().

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

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

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

  • Opciones

    FetchEvent|HandlerCallbackOptions.

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

  • resultados

    [Promise<Response>,Promise<void>]

    Una tupla de [respuesta, hecha] promesas que se pueden usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo el trabajo.

CacheOnly

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

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

Si no hay una coincidencia de caché, se arrojará una excepción WorkboxError.

Propiedades

• constructor

  void

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

  Nota: Si una clase de estrategia personalizada extiende la clase básica de estrategia y no necesita más que estas propiedades, no necesita definir su propio constructor.

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

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

  • Opciones

    StrategyOptions opcional

  • resultados

    CacheOnly

• cacheName

  cadena

• 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

    Promesa<Respuesta>

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promise<void>

• Respuesta de_get

  void

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

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

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promesa<Respuesta>

• identificador

  void

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

  Cuando se registra una instancia de estrategia con un workbox-routing.Route de Workbox, se llama a este método automáticamente 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.

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

  • resultados

    Promesa<Respuesta>

• handleAll

  void

  Es similar a workbox-strategies.Strategy~handle, pero en lugar de solo mostrar una Promise que se resuelve en una Response, se mostrará una tupla de promesas [response, done], en la que la primera (response) es equivalente a lo que muestra handle() y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado a event.waitUntil().

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

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

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

  • Opciones

    FetchEvent|HandlerCallbackOptions.

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

  • resultados

    [Promise<Response>,Promise<void>]

    Una tupla de [respuesta, hecha] promesas que se pueden usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo el trabajo.

NetworkFirst

Es la implementación de una estrategia de solicitudes que priorizan la red.

De forma predeterminada, esta estrategia almacenará en caché las respuestas con un código de estado 200 y las respuestas opacas. Las respuestas opacas son solicitudes de origen cruzado en las que la respuesta no admite CORS.

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

Propiedades

• constructor

  void

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

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

  • Opciones

    NetworkFirstOptions opcional

  • resultados

    NetworkFirst

• cacheName

  cadena

• 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

    Promesa<Respuesta>

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promise<void>

• Respuesta de_get

  void

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

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

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promesa<Respuesta>

• identificador

  void

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

  Cuando se registra una instancia de estrategia con un workbox-routing.Route de Workbox, se llama a este método automáticamente 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.

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

  • resultados

    Promesa<Respuesta>

• handleAll

  void

  Es similar a workbox-strategies.Strategy~handle, pero en lugar de solo mostrar una Promise que se resuelve en una Response, se mostrará una tupla de promesas [response, done], en la que la primera (response) es equivalente a lo que muestra handle() y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado a event.waitUntil().

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

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

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

  • Opciones

    FetchEvent|HandlerCallbackOptions.

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

  • resultados

    [Promise<Response>,Promise<void>]

    Una tupla de [respuesta, hecha] promesas que se pueden usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo el trabajo.

NetworkFirstOptions

Propiedades

• cacheName

  cadena opcional

• fetchOptions

  RequestInit opcional

• matchOptions

  CacheQueryOptions opcional

• networkTimeoutSeconds

  número opcional

• Complementos

  WorkboxPlugin[] opcional

NetworkOnly

Es la implementación de una estrategia de solicitudes solo red.

Esta clase es útil si quieres 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)=> {...}

  • Opciones

    NetworkOnlyOptions opcional

  • resultados

    NetworkOnly

• cacheName

  cadena

• 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

    Promesa<Respuesta>

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promise<void>

• Respuesta de_get

  void

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

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

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promesa<Respuesta>

• identificador

  void

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

  Cuando se registra una instancia de estrategia con un workbox-routing.Route de Workbox, se llama a este método automáticamente 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.

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

  • resultados

    Promesa<Respuesta>

• handleAll

  void

  Es similar a workbox-strategies.Strategy~handle, pero en lugar de solo mostrar una Promise que se resuelve en una Response, se mostrará una tupla de promesas [response, done], en la que la primera (response) es equivalente a lo que muestra handle() y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado a event.waitUntil().

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

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

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

  • Opciones

    FetchEvent|HandlerCallbackOptions.

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

  • resultados

    [Promise<Response>,Promise<void>]

    Una tupla de [respuesta, hecha] promesas que se pueden usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo el trabajo.

NetworkOnlyOptions

Propiedades

• fetchOptions

  RequestInit opcional

• networkTimeoutSeconds

  número opcional

• Complementos

  WorkboxPlugin[] opcional

StaleWhileRevalidate

Una implementación de una estrategia de solicitudes inactivas durante la revalidación.

Los recursos se solicitan desde la caché y la red en paralelo. La estrategia responderá con la versión almacenada en caché si está disponible; de lo contrario, espera 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 y las respuestas opacas. Las respuestas opacas son solicitudes de origen cruzado en las que la respuesta no admite CORS.

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

Propiedades

• constructor

  void

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

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

  • Opciones

    StrategyOptions opcional

  • resultados

    StaleWhileRevalidate

• cacheName

  cadena

• 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

    Promesa<Respuesta>

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promise<void>

• Respuesta de_get

  void

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

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

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promesa<Respuesta>

• identificador

  void

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

  Cuando se registra una instancia de estrategia con un workbox-routing.Route de Workbox, se llama a este método automáticamente 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.

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

  • resultados

    Promesa<Respuesta>

• handleAll

  void

  Es similar a workbox-strategies.Strategy~handle, pero en lugar de solo mostrar una Promise que se resuelve en una Response, se mostrará una tupla de promesas [response, done], en la que la primera (response) es equivalente a lo que muestra handle() y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado a event.waitUntil().

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

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

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

  • Opciones

    FetchEvent|HandlerCallbackOptions.

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

  • resultados

    [Promise<Response>,Promise<void>]

    Una tupla de [respuesta, hecha] promesas que se pueden usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo el trabajo.

Strategy

Una clase base abstracta desde la que se deben extender todas las demás clases de estrategia:

Propiedades

• constructor

  void

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

  Nota: Si una clase de estrategia personalizada extiende la clase básica de estrategia y no necesita más que estas propiedades, no necesita definir su propio constructor.

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

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

  • Opciones

    StrategyOptions opcional

  • resultados

    Estrategia

• cacheName

  cadena

• 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

    Promesa<Respuesta>

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promise<void>

• Respuesta de_get

  void

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

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

  • controlador

    StrategyHandler

  • request

    Solicitud

  • event

    ExtendableEvent

  • resultados

    Promesa<Respuesta>

• _identificador

  void

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

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

  • request

    Solicitud

  • controlador

    StrategyHandler

  • resultados

    Promesa<Respuesta>

• identificador

  void

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

  Cuando se registra una instancia de estrategia con un workbox-routing.Route de Workbox, se llama a este método automáticamente 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.

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

  • resultados

    Promesa<Respuesta>

• handleAll

  void

  Es similar a workbox-strategies.Strategy~handle, pero en lugar de solo mostrar una Promise que se resuelve en una Response, se mostrará una tupla de promesas [response, done], en la que la primera (response) es equivalente a lo que muestra handle() y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado a event.waitUntil().

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

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

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

  • Opciones

    FetchEvent|HandlerCallbackOptions.

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

  • resultados

    [Promise<Response>,Promise<void>]

    Una tupla de [respuesta, hecha] promesas que se pueden usar para determinar cuándo se resuelve la respuesta y cuándo el controlador completó todo el trabajo.

StrategyHandler

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

Propiedades

• constructor

  void

  Crea una instancia nueva asociada con la estrategia y el evento pasados que controla 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)=> {...}

  • estrategia

    Estrategia

  • Opciones

    HandlerCallbackOptions

  • resultados

    StrategyHandler

• event

  ExtendableEvent

• params

  cualquier opcional

• request

  Solicitud

• url

  URL opcional

• cacheMatch

  void

  Hace coincidir una solicitud de la caché (e invoca cualquier método de devolución de llamada de 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:

  • cacheKeyWillByUsed()
  • cachedResponseWillByUsed()

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

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

  • clave

    RequestInfo

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

  • resultados

    Promesa<Respuesta>

    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 correspondiente) con el cacheName y la 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:

  • cacheKeyWillByUsed()
  • cacheWillUpdate()
  • cacheDidUpdate()

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

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

  • clave

    RequestInfo

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

  • respuesta

    Respuesta

    La respuesta que se almacena en caché.

  • resultados

    Promise<boolean>

    Es false si un cacheWillUpdate hizo que la respuesta no se almacene en caché, y true en caso contrario.

• destroy

  void

  Deja de ejecutar la estrategia y resuelve de inmediato cualquier promesa waitUntil() pendiente.

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

  ()=> {...}

• doneWaiting

  void

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

  Nota: Cualquier trabajo realizado después de que doneWaiting() se establezca debe pasarse de forma manual al método waitUntil() de un evento (no al método waitUntil() de este controlador); de lo contrario, se debe finalizar el subproceso del service worker antes de que se complete tu trabajo.

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

  ()=> {...}

  • resultados

    Promise<void>

• fetch

  void

  Recupera una solicitud determinada (e invoca cualquier método de devolución de llamada de complemento correspondiente) con el fetchOptions (para solicitudes sin 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 la solicitud que se recuperará.

  • resultados

    Promesa<Respuesta>

• 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 a 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 la URL que se debe recuperar y almacenar en caché.

  • resultados

    Promesa<Respuesta>

• getCacheKey

  void

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

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

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

  • request

    Solicitud

  • Standard

    "read"
    |"write"
    

  • resultados

    Promesa<Request>

• hasCallback

  void

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

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

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

  • name

    C

    El nombre de la devolución de llamada que se debe comprobar.

  • resultados

    boolean

• iterateCallbacks

  void

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

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

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

  • name

    C

    El nombre de la devolución de llamada que se ejecutará

  • resultados

    Generador<NonNullable<indexedAccess>anyunknown>

• runCallbacks

  void

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

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

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

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

  • name

    C

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

  • param

    Omite<indexedAccess"state"
    >

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

  • resultados

    Promise<void>

• waitUntil

  void

  Agrega una promesa al atributo [promesas de duración extendida]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises del evento asociado con la solicitud que se controla (por lo general, un FetchEvent).

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

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

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

  • promesa

    Promise<T>

    Una promesa para agregar a las promesas de extensión de la vida útil del evento que activó la solicitud.

  • resultados

    Promise<T>

StrategyOptions

Propiedades

• cacheName

  cadena opcional

• fetchOptions

  RequestInit opcional

• matchOptions

  CacheQueryOptions opcional

• Complementos

  WorkboxPlugin[] opcional