Register non-navigation routes in Workbox

Question

Is there a way to match only non-navigation requests in Workbox? For example, I have an app containing several AMP pages that I want to inject in my app shell, so I intercept all navigations to those pages and respond with the shell, like this:

workboxSW.router.registerNavigationRoute('shell.html', {
  whitelist: [/./]
});

I also want to intercept all other requests and handle them with the cache first strategy, like this:

workboxSW.router.registerRoute('/*',
  workboxSW.strategies.cacheFirst()
);

But this route overlaps with the first route. I could replace the two routes with the following code to get the behavior I'm looking for:

workboxSW.router.registerRoute('/*', args => {
  if (args.event.request.mode !== 'navigate') {
    return workboxSW.strategies.cacheFirst().handle(args);
  }
  return caches.match('/shell.html', {ignoreSearch: true});
});

But request.mode is not supported by several mobile browsers (even some that support Service Worker) and has a few corner cases where it fails.

Is there a convenient, best-practicy way to match non-navigation requests?

Answer 1

First, you are asking for trouble with such broad regex's.

One simple step would be to first add a route for requests you know can be cache first and aren't navigation routes (i.e. paths with extensions like js, css, png, jpg).

Then after that - use what you know about your build to match other requests (i.e. do all network requests for pages end in html or do you have pretty urls ending in a slash?).

You may actually just want to add a default route such that if no route is matching, fallback to the default and let that serve the shell.