Constructor

Route

new Route(input)

Constructor for Route class.

Parameter

input

Object

Values in input have the following properties:

Parameter

match

function()

The function that determines whether the route matches a given fetch event.

See matchCallback for full details on this function.

handler

(function() or module:workbox-runtime-caching.Handler)

This parameter can be either a function or an object which is a subclass of Handler.

Either option should result in a Response that the Route can use to handle the fetch event.

See handlerCallback for full details on using a callback function as the handler.

method

Optional

string

Only match requests that use this HTTP method.

Defaults to 'GET'.

Example

// Any navigate requests for URLs that start with /path/to/ will match.
const route = new workbox.routing.Route({
  match: ({url, event}) => {
    return event.request.mode === 'navigate' &&
           url.pathname.startsWith('/path/to/');
  },
  handler: ({event}) => {
    // Do something that returns a Promise.<Response>, like:
    return caches.match(event.request);
  },
});

const router = new workbox.routing.Router();
router.registerRoute({route});

Abstract types

handlerCallback

inner

handlerCallback(input) returns Promise containing Response

This is the definition of the handler callback that can be passed into the Route constructor.

The handler callback is called when a request has been matched by a Route and should return a Promise that resolves with a Response.

Parameter

input

Object

Values in input have the following properties:

Parameter

url

URL

The request's URL.

event

FetchEvent

The event that triggered the fetch handler.

params

Optional

Object

Parameters returned the Route's match callback function. This will be undefined if nothing was returned.

Returns

Promise containing Response The response that will fulfill the request.

matchCallback

inner

matchCallback(input) returns (Object or null)

This is the definition of the match callback passed into the Route constructor.

This callback is used to determine if a new fetch event can be served by this Route. Returning a truthy value indicates that this Route can handle this fetch event. Return null if this shouldn't match against the fetch event.

If you do return a truthy value, the object will be passed to the Route's handler (see the Route Constructor).

Parameter

input

Object

Values in input have the following properties:

Parameter

url

URL

The request's URL.

event

FetchEvent

The event that triggered the fetch handler.

Returns

(Object or null) To signify a match, return a truthy value, otherwise return null if the route shouldn't match. If you return an Object with contents it will be passed to the handler in the Route constructor.