workbox-routing.RegExpRoute

class   static

RegExpRoute is a helper class to make defining regular expression based Routes easy.

The matching for regular expressioned are slightly different between same-origin requests and cross-origin requests.

A common pattern is to use a regex pattern similar to /styles/.* to capture all stylesheets on your site.

If we used this on https://workboxjs.org, this regular expression would match for the end of https://workboxjs.org/styles/main.css.

However, it's unlikely that we'd intend for this to match against: https://third-party-origin.com/styles/example.css.

To overcome this common issue, regular expressions will only match against cross-origin requests if the regular expression matches from the start.

For example, matching the cross-origin example, we could change the regular expression to: https://third-party-origin.com/styles/.*, meaning we would now match https://third-party-origin.com/styles/example.css.

If you wish your regular expression to match both, you just need to ensure you account for the full URL.

Constructor

RegExpRoute

new RegExpRoute(input)

Constructor for RegExpRoute.

Parameter

input

Object
Extends
Route

Example 

// Any requests that match the regular expression will match this route, with
// the capture groups passed along to the handler as an array via params.
const route = new workbox.routing.RegExpRoute({
  regExp: new RegExp('^https://example.com/path/to/(\\w+)'),
  handler: {
    handle: ({event, params}) => {
      // params[0], etc. will be set based on the regexp capture groups.
      // Do something that returns a Promise.<Response>, like:
      return caches.match(event.request);
    },
  },
});

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