Skip to content

Router ​

Class @vite-pwa/workbox-swkit/routing

The Router can be used to process a FetchEvent using one or more workbox-routing.Route, responding with a Response if a matching route exists.

If no route matches a given a request, the Router will use a "default" handler if one is defined.

Should the matching Route throw an error, the Router will use a "catch" handler if one is defined to gracefully deal with issues and respond with a Request.

If a request matches multiple routes, the earliest registered route will be used to respond to the request.

Constructor ​

ts
new Router()

Initializes a new Router.

Methods ​

addCacheListener() ​

ts
addCacheListener(): void

Adds a message event listener for URLs to cache from the window. This is useful to cache resources loaded on the page prior to when the service worker started controlling it.

The format of the message data sent from the window should be as follows. Where the urlsToCache array may consist of URL strings or an array of URL string + requestInit object (the same as you'd pass to fetch()).

{
  type: 'CACHE_URLS',
  payload: {
    urlsToCache: [
      './script1.js',
      './script2.js',
      ['./script3.js', {mode: 'no-cors'}],
    ],
  },
}

addFetchListener() ​

ts
addFetchListener(): void

Adds a fetch event listener to respond to events when a route matches the event's request.

findMatchingRoute() ​

ts
findMatchingRoute(options: RouteMatchCallbackOptions): { params?: MapLikeObject | string[]; route?: Route }

Checks a request and URL (and optionally an event) against the list of registered routes, and if there's a match, returns the corresponding route along with any params generated by the match.

Returns: An object with route and params properties. They are populated if a matching route was found or undefined otherwise.

handleRequest() ​

ts
handleRequest(options: { event: ExtendableEvent; request: Request }): Promise<Response> | undefined

Apply the routing rules to a FetchEvent object to get a Response from an appropriate Route's handler.

Returns: A promise is returned if a registered route can handle the request. If there is no matching route and there's no defaultHandler, undefined is returned.

registerRoute() ​

ts
registerRoute(route: Route): void

Registers a route with the router.

Parameters

  • route – The route to register.

setCatchHandler() ​

ts
setCatchHandler(handler: RouteHandler): void

If a Route throws an error while handling a request, this handler will be called and given a chance to provide a response.

Parameters

  • handler – A callback function that returns a Promise resulting in a Response.

setDefaultHandler() ​

ts
setDefaultHandler(handler: RouteHandler, method?: HTTPMethod): void

Define a default handler that's called when no routes explicitly match the incoming request.

Each HTTP method ('GET', 'POST', etc.) gets its own default handler.

Without a default handler, unmatched requests will go against the network as if there were no service worker present.

Parameters

  • handler – A callback function that returns a Promise resulting in a Response.

  • method – The HTTP method to associate with this default handler. Each method has its own default.

unregisterRoute() ​

ts
unregisterRoute(route: Route): void

Unregisters a route with the router.

Parameters

  • route – The route to unregister.

Released under the MIT License.