workbox-routing

If both denylist and allowlist are provided, the denylist will take precedence and the request will not match this route.

The regular expressions in allowlist and denylist are matched against the concatenated [pathname]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname and [search]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search portions of the requested URL.

Note: These RegExps may be evaluated against every destination URL during a navigation. Avoid using complex RegExps, or else your users may see delays when navigating your site.

The constructor function looks like: (handler: RouteHandler, options?: NavigationRouteMatchOptions) => {...}

The setCatchHandler function looks like: (handler: RouteHandler) => {...}

If the regular expression contains [capture groups]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references, the captured values will be passed to the workbox-routing~handlerCallback params argument.

The constructor function looks like: (regExp: RegExp, handler: RouteHandler, method?: HTTPMethod) => {...}

The setCatchHandler function looks like: (handler: RouteHandler) => {...}

Constructor for Route class.

The constructor function looks like: (match: RouteMatchCallback, handler: RouteHandler, method?: HTTPMethod) => {...}

The setCatchHandler function looks like: (handler: RouteHandler) => {...}

Initializes a new Router.

The constructor function looks like: () => {...}

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'}],
    ],
  },
}

The addCacheListener function looks like: () => {...}

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

The addFetchListener function looks like: () => {...}

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.

The findMatchingRoute function looks like: (options: RouteMatchCallbackOptions) => {...}

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

The handleRequest function looks like: (options: object) => {...}

Registers a route with the router.

The registerRoute function looks like: (route: Route) => {...}

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

The setCatchHandler function looks like: (handler: RouteHandler) => {...}

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.

The setDefaultHandler function looks like: (handler: RouteHandler, method?: HTTPMethod) => {...}

Unregisters a route with the router.

The unregisterRoute function looks like: (route: Route) => {...}

If the capture param is a Route, all other arguments will be ignored.

The generated Route.

A callback function that returns a Promise resulting in a Response.

A callback function that returns a Promise resulting in a Response.