NetworkFirst extends module:workbox-runtime-caching.Handler

An implementation of a network first request strategy.

By default, NetworkFirst will cache responses with a 200 status code as well as opaque responses (responses from cross-origin servers which don't support CORS). You can override this default by passing in a RequestWrapper that includes an appropriately-configured CacheableResponsePlugin.


// Set up a route to match any requests made for URLs that end in .txt.
// The requests are handled with a network-first strategy.
const route = new workbox.routing.RegExpRoute({
  regExp: /\.txt$/,
  handler: new workbox.runtimeCaching.NetworkFirst(),

const router = new workbox.routing.Router();


new NetworkFirst(input)

Constructor for a new NetworkFirst instance.

input Object
networkTimeoutSeconds number (Optional)

If set, and a valid network response isn't returned, then the cached response will be returned instead. If there is no previously cached response, then an null response will be returned. This option is meant to combat "lie-fi" scenarios.

requestWrapper RequestWrapper (Optional)

An optional RequestWrapper that is used to configure the cache name and request plugins. If not provided, a new RequestWrapper using the default cache name will be used.

Instance Methods

this.handle(input) Promise.<Response>

The handle method will be called by the Route class when a route matches a request.

input Object
event FetchEvent

The event that triggered the service worker's fetch handler.

Returns Promise.<Response>

The response from the network, or if that's not available, a previously cached response.