núcleo de la caja de trabajo

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

Sin embargo, hay superposición entre los módulos. Por ejemplo, cada módulo necesitará 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.

Cómo ver y cambiar los nombres de caché predeterminados

Workbox define sus 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 en 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, altera 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 del prefijo y el sufijo es que, si usas Workbox para varios proyectos y usas el mismo puerto localhost para cada proyecto, 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 ya abiertas en cuanto se active, lo que no sucederá de forma predeterminada.

Si quieres obtener 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() en workbox-core agrega automáticamente un objeto de escucha de eventos activate a tu trabajador de servicio y, dentro de él, llama a self.clients.claim(). Si llamas a self.clients.claim() antes de que se active el trabajador de servicio actual, se producirá una excepción de tiempo de ejecución, y el wrapper de workbox-core te ayudará a asegurarte de llamarlo en el momento adecuado.

El wrapper skipWaiting dejó de estar disponible

Antes de la versión 6 de Workbox, a los desarrolladores también se les recomendaba usar el método skipWaiting() de workbox-core. Sin embargo, este método ofrecía poco valor más allá de lo que los desarrolladores obtendrían 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 llamó a self.skipWaiting(), el wrapper no se comportaría como se esperaba si se lo llamara dentro de otro controlador de eventos, como message, después de que se completara la instalación.

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

Tipos

CacheDidUpdateCallback()

workbox-core.CacheDidUpdateCallback(
  param: CacheDidUpdateCallbackParam,
)

Parámetros

Muestra

  • Promise<void>

CacheDidUpdateCallbackParam

Propiedades

  • cacheName

    string

  • evento

    ExtendableEvent

  • newResponse

    Respuesta

  • oldResponse

    Respuesta opcional

  • solicitud

    Solicitud

  • state

    MapLikeObject opcional

CachedResponseWillBeUsedCallback()

workbox-core.CachedResponseWillBeUsedCallback(
  param: CachedResponseWillBeUsedCallbackParam,
)

Parámetros

Muestra

  • Promise<void | Response>

CachedResponseWillBeUsedCallbackParam

Propiedades

  • cacheName

    string

  • cachedResponse

    Respuesta opcional

  • evento

    ExtendableEvent

  • matchOptions

    CacheQueryOptions opcional

  • solicitud

    Solicitud

  • state

    MapLikeObject opcional

CacheKeyWillBeUsedCallback()

workbox-core.CacheKeyWillBeUsedCallback(
  param: CacheKeyWillBeUsedCallbackParam,
)

Parámetros

Muestra

  • Promise<string | Request>

CacheKeyWillBeUsedCallbackParam

Propiedades

  • evento

    ExtendableEvent

  • Standard

    string

  • params

    cualquier opcional

  • solicitud

    Solicitud

  • state

    MapLikeObject opcional

CacheWillUpdateCallback()

workbox-core.CacheWillUpdateCallback(
  param: CacheWillUpdateCallbackParam,
)

Parámetros

Muestra

  • Promise<void | Response>

CacheWillUpdateCallbackParam

Propiedades

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • respuesta

    Respuesta

  • state

    MapLikeObject opcional

FetchDidFailCallback()

workbox-core.FetchDidFailCallback(
  param: FetchDidFailCallbackParam,
)

Parámetros

Muestra

  • Promise<void>

FetchDidFailCallbackParam

Propiedades

  • error

    Error

  • evento

    ExtendableEvent

  • originalRequest

    Solicitud

  • solicitud

    Solicitud

  • state

    MapLikeObject opcional

FetchDidSucceedCallback()

workbox-core.FetchDidSucceedCallback(
  param: FetchDidSucceedCallbackParam,
)

Parámetros

Muestra

  • Promise<Response>

FetchDidSucceedCallbackParam

Propiedades

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • respuesta

    Respuesta

  • state

    MapLikeObject opcional

HandlerCallbackOptions

Enum

RouteHandlerCallbackOptions

ManualHandlerCallbackOptions

HandlerDidCompleteCallback()

workbox-core.HandlerDidCompleteCallback(
  param: HandlerDidCompleteCallbackParam,
)

Parámetros

Muestra

  • Promise<void>

HandlerDidCompleteCallbackParam

Propiedades

  • error

    Error opcional

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • respuesta

    Respuesta opcional

  • state

    MapLikeObject opcional

HandlerDidErrorCallback()

workbox-core.HandlerDidErrorCallback(
  param: HandlerDidErrorCallbackParam,
)

Parámetros

Muestra

  • Promise<Response>

HandlerDidErrorCallbackParam

Propiedades

  • error

    Error

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • state

    MapLikeObject opcional

HandlerDidRespondCallback()

workbox-core.HandlerDidRespondCallback(
  param: HandlerDidRespondCallbackParam,
)

Parámetros

Muestra

  • Promise<void>

HandlerDidRespondCallbackParam

Propiedades

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • respuesta

    Respuesta opcional

  • state

    MapLikeObject opcional

HandlerWillRespondCallback()

workbox-core.HandlerWillRespondCallback(
  param: HandlerWillRespondCallbackParam,
)

Parámetros

Muestra

  • Promise<Response>

HandlerWillRespondCallbackParam

Propiedades

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • respuesta

    Respuesta

  • state

    MapLikeObject opcional

HandlerWillStartCallback()

workbox-core.HandlerWillStartCallback(
  param: HandlerWillStartCallbackParam,
)

Parámetros

Muestra

  • Promise<void>

HandlerWillStartCallbackParam

Propiedades

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • state

    MapLikeObject opcional

ManualHandlerCallback()

workbox-core.ManualHandlerCallback(
  options: ManualHandlerCallbackOptions,
)

La devolución de llamada de "controlador" se invoca cada vez que un Router coincide con una URL o una solicitud a 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 el RouteMatchCallback muestra un array o un objeto no vacío, se pasará como argumento options.params de este controlador.

Parámetros

Muestra

  • Promise<Response>

ManualHandlerCallbackOptions

Son opciones que se pasan a una función ManualHandlerCallback.

Propiedades

  • evento

    ExtendableEvent

  • solicitud

    Cadena | Solicitud

MapLikeObject

PluginState

Por el momento, se usa un MapLikeObject simple, pero se podría extender o restringir esto en el futuro.

Tipo

MapLikeObject

RequestWillFetchCallback()

workbox-core.RequestWillFetchCallback(
  param: RequestWillFetchCallbackParam,
)

Parámetros

Muestra

  • Promise<Request>

RequestWillFetchCallbackParam

Propiedades

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • state

    MapLikeObject opcional

RouteHandler

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

Enum

RouteHandlerCallback

RouteHandlerObject

RouteHandlerCallback()

workbox-core.RouteHandlerCallback(
  options: RouteHandlerCallbackOptions,
)

La devolución de llamada de "controlador" se invoca cada vez que un Router coincide con una URL o una solicitud a 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 el RouteMatchCallback muestra un array o un objeto no vacío, se pasará como argumento options.params de este controlador.

Parámetros

Muestra

  • Promise<Response>

RouteHandlerCallbackOptions

Son opciones que se pasan a una función RouteHandlerCallback.

Propiedades

  • evento

    ExtendableEvent

  • params

    string[] | MapLikeObject opcional

  • solicitud

    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 con este objeto RouteHandler. El beneficio 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 se debe aplicar un Route para una URL y una solicitud en particular. Cuando la coincidencia se produce 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 verdadero, se invocarรก de inmediato el RouteHandlerCallback de la ruta coincidente. Si el valor que se muestra es un objeto o un array no vacío, ese valor se establecerá en el argumento options.params del controlador.

Parámetros

Muestra

  • cualquiera

RouteMatchCallbackOptions

Son opciones que se pasan a una función RouteMatchCallback.

Propiedades

  • evento

    ExtendableEvent

  • solicitud

    Solicitud

  • sameOrigin

    booleano

  • url

    URL

WorkboxPlugin

Un objeto con propiedades de devolución de llamada de ciclo de vida opcionales para las operaciones de recuperación y almacenamiento en 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 los recursos almacenados en caché previamente, cacheNames.googleAnalytics se usa para almacenar analytics.js, y cacheNames.runtime se usa para todo lo demás.workbox-google-analytics

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

Tipo

objeto

Propiedades

  • googleAnalytics

    string

  • almacenamiento en caché previo

    string

  • prefijo

    string

  • runtime

    string

  • sufijo

    string

Métodos

clientsClaim()

workbox-core.clientsClaim()

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

copyResponse()

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

Permite que los desarrolladores copien una respuesta y modifiquen sus valores headers, status o statusText (los valores que se pueden establecer 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 segundo argumento. Esa función se invocará con un solo objeto con las propiedades de respuesta {headers, status, statusText}. El valor que muestra esta función se usará como ResponseInit para el nuevo Response. Para cambiar los valores, modifica los parámetros pasados y devuélvelos, o muestra un objeto completamente nuevo.

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

Parámetros

  • respuesta

    Respuesta

  • modificador

    función opcional

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

    (responseInit: ResponseInit) => ResponseInit

    • responseInit

      ResponseInit

    • muestra

      ResponseInit

Muestra

  • Promise<Response>

registerQuotaErrorCallback()

workbox-core.registerQuotaErrorCallback(
  callback: Function,
)

Agrega una función al conjunto de quotaErrorCallbacks que se ejecutará 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 la 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 la versión 7 de Workbox.

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