núcleo de la caja de trabajo

Workbox se diseñó para ser modular, lo que permite a los desarrolladores seleccionar las piezas que quieren usar sin tener que descargar todo en un solo archivo.

Sin embargo, habrá una superposición entre los módulos. Por ejemplo, cada uno deberá interactuar con la consola, arrojar errores significativos y usar la red o la caché. Para evitar que cada módulo implemente la misma lógica, workbox-core contiene este código común en el que se basa cada módulo.

Este módulo proporciona algunas funciones a los desarrolladores, pero más allá de los niveles de registro y el almacenamiento en caché, workbox-core ofrece lógica interna a cada módulo, en lugar de al desarrollador final.

Ve y cambia los nombres predeterminados de la caché

Workbox define las cachés a través de cacheNames:

import {cacheNames} from 'workbox-core';

console.log(cacheNames.precache);
console.log(cacheNames.runtime);
console.log(cacheNames.googleAnalytics);

Estos nombres de caché se construyen con el formato de un prefijo, un nombre y un sufijo, en el que el nombre cambia según el uso de la caché.

<prefix>-<cache-id>-<suffix>

Para cambiar estos nombres predeterminados, modifica todos o algunos de los valores que se pasan a setCacheNameDetails().

import {cacheNames, setCacheNameDetails} from 'workbox-core';

setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'install-time',
  runtime: 'run-time',
  googleAnalytics: 'ga',
});

// Will print 'my-app-install-time-v1'
console.log(cacheNames.precache);

// Will print 'my-app-run-time-v1'
console.log(cacheNames.runtime);

// Will print 'my-app-ga-v1'
console.log(cacheNames.googleAnalytics);

El caso de uso principal para el prefijo y el sufijo es que, si usas Workbox en varios proyectos y el mismo puerto de host local en cada uno, configurar un prefijo personalizado para cada módulo evitará que las cachés entren en conflicto entre sí.

Reclamación de los clientes

Algunos desarrolladores quieren poder publicar un nuevo service worker y hacer que controle las páginas web que ya están abiertas en cuanto se active, lo que no sucederá de forma predeterminada.

Si deseas este comportamiento, workbox-core proporciona un método de ayuda:

import {clientsClaim} from 'workbox-core';

// This clientsClaim() should be at the top level
// of your service worker, not inside of, e.g.,
// an event handler.
clientsClaim();

El método clientsClaim() de workbox-core agrega automáticamente un objeto de escucha de eventos activate a tu service worker y, dentro de este, llama a self.clients.claim(). Llamar a self.clients.claim() antes de que se active el service worker actual generará una excepción del entorno de ejecución, y el wrapper de workbox-core ayuda a garantizar que lo llames en el momento correcto.

El wrapperSkipWaiting dejó de estar disponible

Antes de Workbox v6, también se animaba a los desarrolladores a usar el método skipWaiting() de workbox-core. Sin embargo, este método ofrecía poco valor más allá del que obtendrían los desarrolladores si llamaran a self.skipWaiting() de forma explícita.

Debido a que el wrapper workbox-core heredado también registró un controlador de eventos install en el que se llamaba a self.skipWaiting(), el wrapper no se comportaría como se esperaba si se llamara dentro de otro controlador de eventos, como message, después de que ya se hubiera completado la instalación.

Por estos motivos, la skipWaiting() de workbox-core dejó de estar disponible, y los desarrolladores deberían llamar directamente a self.skipWaiting(). A diferencia de self.clients.claim(), self.skipWaiting() no arrojará una excepción si se llama en el momento "incorrecto", por lo que no es necesario unirla a un controlador de eventos.

Tipos

CacheDidUpdateCallback()

workbox-core.CacheDidUpdateCallback(
  param: CacheDidUpdateCallbackParam,
)

Parámetros

Devuelve

  • Promise<void>

CacheDidUpdateCallbackParam

Propiedades

  • cacheName

    cadena

  • event

    ExtendableEvent

  • newResponse

    Respuesta

  • oldResponse

    Respuesta opcional

  • request

    Solicitud

  • state

    MapLikeObject opcional

CachedResponseWillBeUsedCallback()

workbox-core.CachedResponseWillBeUsedCallback(
  param: CachedResponseWillBeUsedCallbackParam,
)

Parámetros

Devuelve

  • Promise<void | Response>

CachedResponseWillBeUsedCallbackParam

Propiedades

  • cacheName

    cadena

  • cachedResponse

    Respuesta opcional

  • event

    ExtendableEvent

  • matchOptions

    CacheQueryOptions opcional

  • request

    Solicitud

  • state

    MapLikeObject opcional

CacheKeyWillBeUsedCallback()

workbox-core.CacheKeyWillBeUsedCallback(
  param: CacheKeyWillBeUsedCallbackParam,
)

Parámetros

Devuelve

  • Promise<string | Request>

CacheKeyWillBeUsedCallbackParam

Propiedades

  • event

    ExtendableEvent

  • Standard

    cadena

  • params

    cualquier opcional

  • request

    Solicitud

  • state

    MapLikeObject opcional

CacheWillUpdateCallback()

workbox-core.CacheWillUpdateCallback(
  param: CacheWillUpdateCallbackParam,
)

Parámetros

Devuelve

  • Promise<void | Response>

CacheWillUpdateCallbackParam

Propiedades

  • event

    ExtendableEvent

  • request

    Solicitud

  • respuesta

    Respuesta

  • state

    MapLikeObject opcional

FetchDidFailCallback()

workbox-core.FetchDidFailCallback(
  param: FetchDidFailCallbackParam,
)

Parámetros

Devuelve

  • Promise<void>

FetchDidFailCallbackParam

Propiedades

  • error

    Error

  • event

    ExtendableEvent

  • originalRequest

    Solicitud

  • request

    Solicitud

  • state

    MapLikeObject opcional

FetchDidSucceedCallback()

workbox-core.FetchDidSucceedCallback(
  param: FetchDidSucceedCallbackParam,
)

Parámetros

Devuelve

  • Promesa<Respuesta>

FetchDidSucceedCallbackParam

Propiedades

  • event

    ExtendableEvent

  • request

    Solicitud

  • respuesta

    Respuesta

  • state

    MapLikeObject opcional

HandlerCallbackOptions

Enum

RouteHandlerCallbackOptions

ManualHandlerCallbackOptions

HandlerDidCompleteCallback()

workbox-core.HandlerDidCompleteCallback(
  param: HandlerDidCompleteCallbackParam,
)

Parámetros

Devuelve

  • Promise<void>

HandlerDidCompleteCallbackParam

Propiedades

  • error

    Error opcional

  • event

    ExtendableEvent

  • request

    Solicitud

  • respuesta

    Respuesta opcional

  • state

    MapLikeObject opcional

HandlerDidErrorCallback()

workbox-core.HandlerDidErrorCallback(
  param: HandlerDidErrorCallbackParam,
)

Parámetros

Devuelve

  • Promesa<Respuesta>

HandlerDidErrorCallbackParam

Propiedades

  • error

    Error

  • event

    ExtendableEvent

  • request

    Solicitud

  • state

    MapLikeObject opcional

HandlerDidRespondCallback()

workbox-core.HandlerDidRespondCallback(
  param: HandlerDidRespondCallbackParam,
)

Parámetros

Devuelve

  • Promise<void>

HandlerDidRespondCallbackParam

Propiedades

  • event

    ExtendableEvent

  • request

    Solicitud

  • respuesta

    Respuesta opcional

  • state

    MapLikeObject opcional

HandlerWillRespondCallback()

workbox-core.HandlerWillRespondCallback(
  param: HandlerWillRespondCallbackParam,
)

Parámetros

Devuelve

  • Promesa<Respuesta>

HandlerWillRespondCallbackParam

Propiedades

  • event

    ExtendableEvent

  • request

    Solicitud

  • respuesta

    Respuesta

  • state

    MapLikeObject opcional

HandlerWillStartCallback()

workbox-core.HandlerWillStartCallback(
  param: HandlerWillStartCallbackParam,
)

Parámetros

Devuelve

  • Promise<void>

HandlerWillStartCallbackParam

Propiedades

  • event

    ExtendableEvent

  • request

    Solicitud

  • state

    MapLikeObject opcional

ManualHandlerCallback()

workbox-core.ManualHandlerCallback(
  options: ManualHandlerCallbackOptions,
)

Se invoca la devolución de llamada de "controlador" cada vez que un Router hace coincidir una URL o solicitud con un Route a través de su RouteMatchCallback. Esta devolución de llamada del controlador debe mostrar un Promise que se resuelva con un Response.

Si RouteMatchCallback muestra un objeto o array que no está vacío, se pasará como el argumento options.params de este controlador.

Parámetros

Devuelve

  • Promesa<Respuesta>

ManualHandlerCallbackOptions

Opciones que se pasan a una función ManualHandlerCallback.

Propiedades

  • event

    ExtendableEvent

  • request

    cadena | Solicitud

MapLikeObject

PluginState

Por ahora, se usa un MapLikeObject simple, pero podría extenderlo o restringirlo en el futuro.

Tipo

MapLikeObject

RequestWillFetchCallback()

workbox-core.RequestWillFetchCallback(
  param: RequestWillFetchCallbackParam,
)

Parámetros

Devuelve

  • Promesa<Request>

RequestWillFetchCallbackParam

Propiedades

  • event

    ExtendableEvent

  • request

    Solicitud

  • state

    MapLikeObject opcional

RouteHandler

Es un RouteHandlerCallback o un RouteHandlerObject. La mayoría de las APIs en workbox-routing que aceptan controladores de ruta toman cualquiera de las dos opciones.

Enum

RouteHandlerCallback

RouteHandlerObject

RouteHandlerCallback()

workbox-core.RouteHandlerCallback(
  options: RouteHandlerCallbackOptions,
)

Se invoca la devolución de llamada de "controlador" cada vez que un Router hace coincidir una URL o solicitud con un Route a través de su RouteMatchCallback. Esta devolución de llamada del controlador debe mostrar un Promise que se resuelva con un Response.

Si RouteMatchCallback muestra un objeto o array que no está vacío, se pasará como el argumento options.params de este controlador.

Parámetros

Devuelve

  • Promesa<Respuesta>

RouteHandlerCallbackOptions

Opciones que se pasan a una función RouteHandlerCallback.

Propiedades

  • event

    ExtendableEvent

  • params

    string[] | MapLikeObject opcional

  • request

    Solicitud

  • url

    URL

RouteHandlerObject

Un objeto con un método handle de tipo RouteHandlerCallback.

Se puede crear un objeto Route con una función RouteHandlerCallback o este objeto RouteHandler. La ventaja de RouteHandler es que se puede extender (como lo hace el paquete workbox-strategies).

Propiedades

RouteMatchCallback()

workbox-core.RouteMatchCallback(
  options: RouteMatchCallbackOptions,
)

La devolución de llamada "match" se usa para determinar si un Route debe aplicarse a una URL y una solicitud en particular. Cuando se produce la coincidencia en respuesta a un evento de recuperación del cliente, también se proporciona el objeto event. Sin embargo, como la devolución de llamada de coincidencia se puede invocar fuera de un evento de recuperación, la lógica de coincidencia no debe suponer que el objeto event siempre estará disponible. Si la devolución de llamada de coincidencia muestra un valor de verdad, el RouteHandlerCallback de la ruta coincidente se invocará de inmediato. Si el valor que se muestra es un objeto o array que no está vacío, ese valor se establecerá en el argumento options.params del controlador.

Parámetros

Devuelve

  • cualquiera

RouteMatchCallbackOptions

Opciones que se pasan a una función RouteMatchCallback.

Propiedades

  • event

    ExtendableEvent

  • request

    Solicitud

  • sameOrigin

    boolean

  • url

    URL

WorkboxPlugin

Es un objeto con propiedades opcionales de devolución de llamada de ciclo de vida para las operaciones de recuperación y caché.

Propiedades

WorkboxPluginCallbackParam

Propiedades

Propiedades

cacheNames

Obtén los nombres de caché actuales y el prefijo o sufijo que usa Workbox.

cacheNames.precache se usa para elementos prealmacenados en caché, workbox-google-analytics usa cacheNames.googleAnalytics para almacenar analytics.js y cacheNames.runtime se usa para todo lo demás.

cacheNames.prefix se puede usar para recuperar solo el valor de prefijo actual. cacheNames.suffix se puede usar para recuperar solo el valor del sufijo actual.

Tipo

objeto

Propiedades

  • googleAnalytics

    cadena

  • almacenamiento previo en caché

    cadena

  • prefijo

    cadena

  • runtime

    cadena

  • sufijo

    cadena

Métodos

clientsClaim()

workbox-core.clientsClaim()

Reclama los clientes disponibles actualmente una vez que se active el service worker. Por lo general, se usa junto con skipWaiting().

copyResponse()

workbox-core.copyResponse(
  response: Response,
  modifier?: function,
)

Permite a los desarrolladores copiar una respuesta y modificar sus valores headers, status o statusText (los valores que se pueden configurar a través de un objeto [ResponseInit]https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax en el constructor). Para modificar estos valores, pasa una función como el segundo argumento. Esa función se invocará con un solo objeto que tiene las propiedades de respuesta {headers, status, statusText}. El valor que se muestra de esta función se usará como ResponseInit para el nuevo Response. Para cambiar los valores, modifica los parámetros pasados y los muestra, o bien muestra un objeto completamente nuevo.

Este método se limita intencionalmente a respuestas del mismo origen, independientemente de si se usó o no CORS.

Parámetros

  • respuesta

    Respuesta

  • modificador

    Función opcional

    El parámetro modifier se ve de la siguiente manera: 

    (responseInit: ResponseInit) => ResponseInit

    • responseInit

      ResponseInit

    • resultados

      ResponseInit

Devuelve

  • Promesa<Respuesta>

registerQuotaErrorCallback()

workbox-core.registerQuotaErrorCallback(
  callback: Function,
)

Agrega una función al conjunto de quotaErrorCallbacks que se ejecutarán si hay un error de cuota.

Parámetros

  • callback

    Función

setCacheNameDetails()

workbox-core.setCacheNameDetails(
  details: PartialCacheNameDetails,
)

Modifica los nombres de caché predeterminados que usan los paquetes de Workbox. Los nombres de caché se generan como <prefix>-<Cache Name>-<suffix>.

Parámetros

  • detalles

    PartialCacheNameDetails

skipWaiting()

workbox-core.skipWaiting()

Este método dejó de estar disponible y se quitará en Workbox v7.

Llamar a self.skipWaiting() es equivalente y se debe usar en su lugar.