[Vuejs]-Workbox/Vue: Create a custom variation on an existing caching strategy handler

by

0👍

I don’t think using the built-in StaleWhileRevalidate strategy is the right approach here. It might be possible to do what you’re describing using StaleWhileRevalidate along with a number of custom plugin callbacks to override the default behavior… but honestly, you’d end up changing so much via plugins that starting from scratch would make more sense.

What I’d recommend that you do instead is to write a custom handlerCallback function that implements exactly the logic you want, and returns a Response.

// Your full logic goes here.
async function myCustomHandler({event, request}) {
  event.waitUntil((() => {
    const idbStuff = ...;
    const networkResponse = await fetch(...);
    // Some IDB operation go here.
    return finalResponse;
  })());
}

workbox.routing.registerRoute(
  'https://www.example.com/api/customers',
  myCustomHandler
);

You could do this without Workbox as well, but if you’re using Workbox to handle some of your unrelated caching needs, it’s probably easiest to also register this logic via a Workbox route.

Leave a comment