Question: Is there anyway to cache a request based on value of "accept" headers in workbox-sw routing?

[dharmawankenny]

Hey, first of all, great library from great company, the docs is a bit lacking but i still can live with it (would love to contribute tho). Anyway, ive been tinkering about a way to cache any requests that has "accept" headers with "text/html" values, i want to cache my html files since it is server rendered and not handled by webpack, i dont see any practical way to precache it (and i dont intend to do so).

after reading the docs, i think this can be done with vanilla Route object, but been playing with the workbox-sw for a while and i cant get my head around on how to register just a Route, not a RegexpRoute nor a ExpressRoute, i dont think the Route class or function itself is exposed to the export so i dont know how to use it (there is no worboxSW.Route or workboxSW.routing.Route, etc).

Anyway, i think this is a common problems so someone might have the solution to this already, all i am looking for is a way to fetch and cache any request for html file or any request that has accept: "text/html" in the headers.

Thanks in advance, and sorry if this wasn't written in perfect english.

[jeffposnick]

Hello!

Once #644 is deployed, registering a route that looks for a specific Request header should be possible via:

workboxSW.router.registerRoute(
  ({event}) => event.request.headers.get('accept').includes('text/html'),
  ({event, url, params}) => {
    // Return a promise for a Response, or use workboxSW.strategies.*
  }
);

Alternatively, if what you're looking for is a route that will match all navigation requests (which might be what you're getting at when you say that you want to check the Accept header for text/html), you can use the workboxSW.router.reigsterNavigationRoute() method right now.

[dharmawankenny]

thanks for the answer, will try the registerNavigationRoute option and if it doesnt cut it i will wait for the release. On that note, is there any expected date of that release?

[jeffposnick]

It's out, as v1.1.0: https://github.com/GoogleChrome/workbox/releases/tag/v1.1.0

[dman777]

@jeffposnick This is really useful. I did not see this in documentation. Did I miss it? I only saw something of the lines where the header check had to be in the workbox strategy.

registerRoute(
  isGraphql,
  new NetworkOnly({                                                       
    headers: {
       'graphql-submit-form': 'true'
    },
    plugins: [bgSyncPlugin]
  }),
  'POST'
);

[dman777]

Also, just to mention the previous example will not work because of the get method on header. Instead, you need to do this:

const foo = (event) => {
  const tar = event.request.headers.get('graphql-submit-form')
  if (tar?.includes('true')) {
    return true;
    console.log('hit');
  }
  
  console.log('ho hit');
  return false;
};            
              
registerRoute(
  foo,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  'POST'
);

[jeffposnick]

Hello @dman777!

There are a couple of places in which the docs provide examples of using a custom matchCallback function, along with the parameters that it's passed:

• https://developers.google.com/web/tools/workbox/guides/route-requests#matching_a_route_with_a_callback_function
• https://developers.google.com/web/tools/workbox/modules/workbox-routing#matching_and_handling_in_routes

Apologies if this was not immediately clear from reading through the docs—there's unfortunately a lot of information that has built up over the years, and some of it can be harder to find.