How to conditionally cache bust an API in workbox

Question

Details about my goal.

I have workbox webpack plugin configured to cache an API for a duration of 30 seconds. I would like to force cache bust it conditionally when a different API request is triggered.

Example, below config caches feature-flags. I am trying to cache bust it when the page sends a request to "updateTests".

workbox configuration to cache feature-flag Workbox configuration updated to clear feature-flags Cache clear makes it work

Things I have tried

Deleting IndexedDB manually does a fresh fetch of feature-flags

Jeff Posnick · Accepted Answer · 2020-07-10 15:24:57Z

2

Just to make sure I understand:

You have API calls that include the feature-flags in their URL, and you want all of those calls to be served cache-first out of the cache named api, with a 30 seconds max lifetime.
If at any point the browser makes a request for a URL that contains updateFlags, that should serve as kind of a "kill switch" that automatically clears out the contents of the api cache, ensuring that the next feature-flags request will always go against the network.

Assuming that's an accurate summary, you could add a new runtimeCaching route to your configuration that does the following:

runtimeCaching: [{
  // existing route
}, {
  urlPattern: new RegExp('updateFlags'),
  handler: async ({request, event}) => {
    // Deleting the 'api' cache will ensure that the next API
    // request goes against the network.
    event.waitUntil(caches.delete('api'));

    // Assuming that you want the actual request for the URL
    // containing updateFlags to be made against the server:
    return fetch(request);
  },
}]

answered Jul 10, 2020 at 15:24

Jeff Posnick

56.4k14 gold badges150 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vetrivel Over a year ago

It deletes the cache but somehow it is still serving with the cached value.

Jeff Posnick Over a year ago

If it's still serving the cached value, then that is coming from the fetch(request). Which implies that the Cache-Control headers you're setting on your HTTP response allow for the response to come from the browser cache. You need to change those headers to disable HTTP caching.

Vetrivel Over a year ago

I think that's not the issue because I have a fresh local express version that doesn't do http caching. I tried one more thing. After the cache.delete('api'), I cleared the indexedDB manually and it started fetching fresh from the server. I found that by reading about deleteCacheAndMetadata. After multiple failed attempts to invoke that function I went ahead and cleared the indexed db and it worked as expected.

Collectives™ on Stack Overflow

How to conditionally cache bust an API in workbox

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related