ExpressRoute is a helper class to make defining Express-style
Under the hood, it uses the
path-to-regexp library to transform the
path parameter into a regular expression, which is then matched against the URL's path.
Please note that
ExpressRoute can match either same-origin or cross-origin requests.
To match same-origin requests, use a
path value that begins with
To match cross-origin requests, use a
path value that includes the origin, e.g.
NavigationRoute is a helper class to create a Route that matches for browser navigation requests, i.e. requests for HTML pages.
It will only match incoming requests whose
mode is set to
You can optionally only apply this route to a subset of navigation requests by using one or both of the
whitelist parameters. If both lists are provided, and there's a navigation to a URL which matches
both, then the blacklist will take precedence and the request will not be matched by this route. The regular expressions in
blacklist are matched against the concatenated
search portions of the requested URL.
To match all navigations, use a
whitelist array containing a RegExp that matches everything, i.e.
RegExpRoute is a helper class to make defining regular expression based
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
However, it's unlikely that we'd intend for this to match against:
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
If you wish your regular expression to match both, you just need to ensure you account for the full URL.
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
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
The Router takes one or more Routes and allows you to apply that routing logic to determine the appropriate way of handling requests inside of a service worker.
It also allows you to define a "default" handler that applies to any requests that don't explicitly match a
Route, and a "catch" handler that responds to any requests that throw an exception while being routed.
You can use the
handleRequest() method to pass a
FetchEvent through the router and ultimately get a "routed response" back. If you'd like this to be handled automatically for you, calling
addFetchListener() will cause the
Router to respond to
If a request matches multiple routes, precedence will be given to the last-registered route.