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 unPromise
que se resolverá con unResponse
, lo que invoca todas las devoluciones de llamada relevantes del complemento.handleAll()
: Es similar ahandle()
, pero muestra dos objetosPromise
. El primero es equivalente a lo que muestrahandle()
y el segundo resolverá cuando se completen las promesas que se agregaron aevent.waitUntil()
dentro de la estrategia.
Ambas estrategias de solicitudes se invocan con dos parámetros:
request
: ElRequest
para el que se mostrará una respuesta de la estrategiahandler
: Es una instancia deStrategyHandler
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 complementorequestWillFetch()
,fetchDidSucceed()
yfetchDidFail()
.cacheMatch
: Hace coincidir una solicitud de la caché y, luego, invoca los métodos del ciclo de vida del complementocacheKeyWillBeUsed()
ycachedResponseWillBeUsed()
.cachePut
: Coloca un par de solicitud/respuesta en la caché y, luego, invoca los métodos de ciclo de vida del complementocacheKeyWillBeUsed()
,cacheWillUpdate()
ycacheDidUpdate()
.fetchAndCachePut
: Llama afetch()
y ejecutacachePut()
en segundo plano en la respuesta que generafetch()
.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, unFetchEvent
).doneWaiting
: Muestra una promesa que se resuelve una vez que se cumplen todas las promesas que se pasaron awaitUntil()
.destroy
: Deja de ejecutar la estrategia y resuelve de inmediato cualquier promesawaitUntil()
pendiente.
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
-
-
cacheName
cadena
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
Complementos
-
_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
-
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
-
request
Solicitud
-
event
ExtendableEvent
-
resultados
Promesa<Respuesta>
-
-
identificador
void
Realiza una estrategia de solicitud y muestra un
Promise
que se resolverá con unResponse
, 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 aevent.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 unaPromise
que se resuelve en unaResponse
, se mostrará una tupla de promesas[response, done]
, en la que la primera (response
) es equivalente a lo que muestrahandle()
y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado aevent.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
-
-
cacheName
cadena
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
Complementos
-
_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
-
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
-
request
Solicitud
-
event
ExtendableEvent
-
resultados
Promesa<Respuesta>
-
-
identificador
void
Realiza una estrategia de solicitud y muestra un
Promise
que se resolverá con unResponse
, 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 aevent.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 unaPromise
que se resuelve en unaResponse
, se mostrará una tupla de promesas[response, done]
, en la que la primera (response
) es equivalente a lo que muestrahandle()
y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado aevent.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
-
-
cacheName
cadena
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
Complementos
-
_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
-
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
-
request
Solicitud
-
event
ExtendableEvent
-
resultados
Promesa<Respuesta>
-
-
identificador
void
Realiza una estrategia de solicitud y muestra un
Promise
que se resolverá con unResponse
, 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 aevent.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 unaPromise
que se resuelve en unaResponse
, se mostrará una tupla de promesas[response, done]
, en la que la primera (response
) es equivalente a lo que muestrahandle()
y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado aevent.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
-
-
cacheName
cadena
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
Complementos
-
_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
-
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
-
request
Solicitud
-
event
ExtendableEvent
-
resultados
Promesa<Respuesta>
-
-
identificador
void
Realiza una estrategia de solicitud y muestra un
Promise
que se resolverá con unResponse
, 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 aevent.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 unaPromise
que se resuelve en unaResponse
, se mostrará una tupla de promesas[response, done]
, en la que la primera (response
) es equivalente a lo que muestrahandle()
y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado aevent.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
-
-
cacheName
cadena
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
Complementos
-
_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
-
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
-
request
Solicitud
-
event
ExtendableEvent
-
resultados
Promesa<Respuesta>
-
-
identificador
void
Realiza una estrategia de solicitud y muestra un
Promise
que se resolverá con unResponse
, 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 aevent.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 unaPromise
que se resuelve en unaResponse
, se mostrará una tupla de promesas[response, done]
, en la que la primera (response
) es equivalente a lo que muestrahandle()
y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado aevent.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
-
-
cacheName
cadena
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
Complementos
-
_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
-
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
-
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
-
resultados
Promesa<Respuesta>
-
-
identificador
void
Realiza una estrategia de solicitud y muestra un
Promise
que se resolverá con unResponse
, 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 aevent.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 unaPromise
que se resuelve en unaResponse
, se mostrará una tupla de promesas[response, done]
, en la que la primera (response
) es equivalente a lo que muestrahandle()
y la última es una promesa que se resolverá una vez que se complete cualquier promesa que se haya agregado aevent.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
-
Opciones
-
resultados
-
-
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
yplugins
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 laplugins
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é, ytrue
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étodowaitUntil()
de un evento (no al métodowaitUntil()
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) yplugins
definidos en el objetoStrategy
.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) ejecutathis.cachePut()
en la respuesta que generathis.fetch()
.La llamada a
this.cachePut()
invoca automáticamente athis.waitUntil()
, por lo que no tienes que llamar awaitUntil()
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 objetoRequest
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 complementocacheKeyWillBeUsed
, 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, unFetchEvent
).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