---
url: /api/symbols/workbox-swkit/strategies/cachefirst.md
---

# CacheFirst

Class @vite-pwa/workbox-swkit/strategies

An implementation of a [cache-first](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#cache-first-falling-back-to-network)
request strategy.

A cache first strategy is useful for assets that have been revisioned,
such as URLs like `/styles/example.a8f5f1.css`, since they
can be cached for long periods of time.

If the network request fails, and there is no cache match, this will throw
a `WorkboxError` exception.

## Constructor

```ts
new CacheFirst(options?: StrategyOptions)
```

Creates a new instance of the strategy and sets all documented option
properties as public instance properties.

Note: if a custom strategy class extends the base Strategy class and does
not need more than these properties, it does not need to define its own
constructor.

## Properties

## Methods

### \_awaitComplete()

```ts
_awaitComplete(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent): Promise<void>
```

### \_getResponse()

```ts
_getResponse(handler: StrategyHandler, request: Request, event: ExtendableEvent): Promise<Response>
```

### handle()

```ts
handle(options: HandlerCallbackOptions | FetchEvent): Promise<Response>
```

Perform a request strategy and returns a `Promise` that will resolve with
a `Response`, invoking all relevant plugin callbacks.

When a strategy instance is registered with a Workbox
workbox-routing.Route, this method is automatically
called when the route matches.

Alternatively, this method can be used in a standalone `FetchEvent`
listener by passing it to `event.respondWith()`.

**Parameters**

* `options` – A `FetchEvent` or an object with the
  properties listed below.

### handleAll()

```ts
handleAll(options: HandlerCallbackOptions | FetchEvent): [Promise<Response>, Promise<void>]
```

Similar to workbox-strategies.Strategy~handle, but
instead of just returning a `Promise` that resolves to a `Response` it
it will return an tuple of `[response, done]` promises, where the former
(`response`) is equivalent to what `handle()` returns, and the latter is a
Promise that will resolve once any promises that were added to
`event.waitUntil()` as part of performing the strategy have completed.

You can await the `done` promise to ensure any extra work performed by
the strategy (usually caching responses) completes successfully.

**Parameters**

* `options` – A `FetchEvent` or an object with the
  properties listed below.

**Returns:** A tuple of \[response, done]
promises that can be used to determine when the response resolves as
well as when the handler has completed all its work.