Route

A Route allows you to tell a service worker that it should handle certain network requests using a specific response strategy.

A consists or a matcher and a handler. A matcher needs to determine if a route should be used for a request. A handler should handle the request if it does match a Router.

Instead of implementing your own handlers, you can use one of the pre-defined runtime caching strategies from the workbox-runtime-caching module.

There are also pre-defined Route's provided by this library: RegExpRoute and ExpressRoute subclasses which provide a convenient wrapper with a nicer interface for using regular expressions or Express-style routes as the match criteria.

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});

Constructor

new Route(input)

Constructor for Route class.

Parameters
input Object
Properties
match function

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

See matchCallback for full details on this function.

handler function | 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 string (Optional)

Only match requests that use this HTTP method.

Defaults to 'GET'.

Type Definitions

this.handlerCallback(input) Promise.<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.

Parameters
input Object
Properties
url URL

The request's URL.

event FetchEvent

The event that triggered the fetch handler.

params Object (Optional)

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

Returns Promise.<Response>

The response that will fulfill the request.

this.matchCallback(input) Object|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).

Parameters
input Object
Properties
url URL

The request's URL.

event FetchEvent

The event that triggered the fetch handler.

Returns Object | 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.